Scatter Plot

Note

This tutorial uses a default datasource to display scatter graphs. If you want to use your own data, select the Dynamic Datasource Option within the widget.

Scatter Plot Elements:
1. Dots
2. Y Axes
3. X Axis
4. Statistics
5. Other Tools

Creating new scatter plot

  1. Change the type to “Scatter Plot” under Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default.

Modify Chart Data

Dots


Key Description Example
Show Line Connects the points
Color Colors the dots and line

Y Axes


Key Description Example
Data Key Property from data object whose values corresponds to the Y axis ranges return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}];
Label Name for the Y axis
Orientation Changes the side the Y axis is on
Time Format Allows to edit format of time and date
Top Padding Creates extra spacing for the graph on top
Bottom Padding Creates extra spacing for the graph on bottom
Show Standard Deviation Reference Lines Shows standard deviation bounds
Standard Deviations Number of standard deviations from the mean to render reference line
Line Label Name for the standard deviation line
Lower Bound Lowest number on Y-axis range
Upper Bound Highest number on Y-axis range
Auto Bounds If marked, the bounds will automatically adjust based on the data

X Axis


Key Description Example
Data Key Property from data object whose values corresponds to the X axis ranges {“dataKey”:“rainfall”}
Label Name for the X axis
Orientation Changes the side the X axis is on
Time Format Allows to edit format of time and date
Left Padding Creates extra spacing for the graph on the left
Right Padding Creates extra spacing for the graph on the right
Unit Type The type of unit used to scale data on the X axis. Graph will NOT appear in with “Number” if it is a string

Statistics

Key Description Example
Enable Statistics Displays button to open window for statistics about the graph. Note: Button is disabled while editing a widget.
Anomaly Detection Strictness Number of standard deviations used to calculate and detect anomalies

Other Tools

Key Description Example
HTML Id Used to target widget element in the DOM Adds an id to the page like this : <div id="myCustomHtmlId">some text </div>and then write css like this: #myCustomHtmlId { color: red }
Allow Fullscreen Gives the option to make chart fullscreen