...
Key | Description | Example |
|---|---|---|
Data Key | Data object property whose values correspond to the Yy-axis ranges | return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}]; |
Label | Y-axis name |  |
Orientation | Changes the side the Yy-axis is on |   |
Time Format | Edits the time and date format |  |
Top Padding | Creates extra spacing for the graph on the top |  |
Bottom Padding | Creates extra spacing for the graph on the bottom |  |
Show Standard Deviation Reference Lines | Shows standard deviation bounds |  |
Standard Deviations | Number of standard deviations from the mean to render the reference line |  |
Line Label | Standard deviation line name |  |
Lower Bound | Lowest number on the Yy-axis range |  |
Upper Bound | The highest number on the Yy-axis range |  |
Auto Bounds | If marked, the bounds will automatically adjust based on the data |  |
...
Key | Description | Example |
|---|---|---|
Data Key | Property from the data object whose values correspond to the x-axis ranges | {“dataKey”:“rainfall”} |
Label | X-Axis axis name |  |
Orientation | Changes the side the x-axis is on |   |
Time Format | Edits the time and date format | |
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 unit type used to scale data on the x-axis. The graph will not appear with a number if it is a string |   |
Reference Lines
X and Yy-axis lines can be added to define values and compare against the dataset (only one coordinate per reference line window).
...
Key | Description | Example |
|---|---|---|
Show/Hide | Show and hide the legend |  |
Font Color | Changes the legend’s text font color on the legend |  |
Layout | Changes the placement of the legend’s labels |  |
Horizontal Align | Changes the legend’s horizontal placement |   |
Vertical Align | Changes the legend’s vertical placement |   |
Icon Type | Changes the legend labels' icon | |
...
Key | Description | Example |
|---|---|---|
Data Key | Data object property corresponding to a bar on the graph | {“dataKey”:“humidity”} |
Type | The interpolation line type of line | |
Legend Type | The icon associated with the data key | stars |
Name | The line label if it’s different from the data key | hum (in the legend)=humidity |
...
Key | Description | Example |
|---|---|---|
Data Key | Data object property whose values correspond to the Yy-axis ranges | return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}]; |
Label | Y-axis name | |
Orientation | Changes the side the Yy-axis is on |   |
Time Format | Edits the time and date format | |
Top Padding | Creates extra spacing for the graph on the top |  |
Bottom Padding | Creates extra spacing for the graph on the bottom |  |
Show Standard Deviation Reference Lines | Shows standard deviation bounds |  |
Standard Deviations | Number of standard deviations from the mean to render the reference line |  |
Line Label | Standard deviation line name | |
Lower Bound | Lowest number on the Yy-axis range | |
Upper Bound | The highest number on the Yy-axis range | |
Auto Bounds | If marked, the bounds will automatically adjust based on the data |  |
...
Key | Description | Example |
|---|---|---|
Data Key | Data object property whose values correspond to the x-axis ranges | {“dataKey”:“rainfall”} |
Label | X-Axis axis name | |
Orientation | Changes the side the Xx-Axis axis is on |   |
Time Format | Edits the time and date format | |
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 unit type used to scale data on the Xx-Axisaxis. The graph will not appear with a number if it is a string |   |
Reference Lines
X and Yy-axis lines can be added to define values and compare against the dataset (only one coordinate per reference line window).
...
Click Add Reference Line to add more reference lines. Hover over the reference lines data entry window to reveal the trash can for deletion.
Chart
...
Change the graph’s margin measurements for the graph.
Brush
...
Key | Description | Example |
|---|---|---|
Brush | Mark the box to appear below the graph. This is used to zoom in on a graph section |  |
Stroke | Change the brush color |  |
Data Key | Data object property whose values correspond to the brush | {“dataKey”:“rainfall”} |
Height | Changes the brush’s height |  |
...
Key | Description | Example |
|---|---|---|
Show/Hide | Show and hide the legend | |
Font Color | Changes the legend’s text font color on the legend | |
Layout | Changes the placement of the legend’s labels | |
Horizontal Align | Changes the legend’s horizontal placement | |
Vertical Align | Changes the legend’s vertical placement |  |
Icon Type | Changes the legend labels' icon | |
...
Key | Description | Example |
|---|---|---|
Data Key | Data object property whose values correspond to the Yy-axis ranges | return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}]; |
Label | Y-axis name | |
Orientation | Changes the side the Yy-axis is on |   |
Time Format | Edits the time and date format | |
Top Padding | Creates extra spacing for the graph on the top |  |
Bottom Padding | Creates extra spacing for the graph on the bottom |  |
Show Standard Deviation Reference Lines | Shows standard deviation bounds |  |
Standard Deviations | Number of standard deviations from the mean to render the reference line |  |
Line Label | Standard deviation line name | |
Lower Bound | Lowest number on the Yy-axis range | |
Upper Bound | Highest number on the Yy-axis range | |
Auto Bounds | If marked, the bounds will automatically adjust based on the data |  |
...
Key | Description | Example |
|---|---|---|
Data Key | Data object property whose values correspond to the x-axis ranges | {“dataKey”:“rainfall”} |
Label | X-Axis axis name | |
Orientation | Changes the side the Xx-Axis axis is on |   |
Time Format | Edits the time and date format | |
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 unit type used to scale data on the x-axis. The graph will not appear with a number if it is a string |   |
...
Change the type to Input.
Choose your datatype and datasource (if using dynamic) if you are doing a value.
Dynamic is the only datatype option if you are doing a target. The datasources in the example below were created previously and not by default.
...
HTML
...
This allows you the freedom to create in the widget.
Use Static to create your code or Dynamic to upload your code.
...
Key | Description | Example |
|---|---|---|
Title | Changes the title’s color |  |
List Item Font | Changes the item name’s color |  |
List Item Background | Changes the item’s background color |  |
Active Item Font | Changes the active item name name’s color |  |
Active Item Background | Changes the item’s active background color | |
...
Color Picker
...
This allows you the freedom to create in the widget.
Use Static to create your code or Dynamic to upload your code.
...