Widgets tutorial | ClearBlade Documentation

Data types

All widgets will require you to choose an incoming data type to render.

Static: Data will be loaded as is and unchanged unless code is written to listen and force changes.

Dynamic: The datasource is added, and data gets updated as changes are made in the datasource.

Bar chart

Creating a new bar chart

1. Change the type to Bar Chart.

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

3. Click to automatically populate the graph with generated recommendations based on the data types.

The rest of the tabs are for editing the graph.

Bars

Key	Description	Example
Data Key	Property from the data object corresponding to a bar on the graph	{“dataKey”:“humidity”}
Legend Type	The icon associated with the data key	stars
Stack ID	Two bars with the same ID and value axis will be stacked
Name	The bar label if it’s different from the data key	hum (in the legend)=humidity

Click Add bar to add more bars. Hover over the bar data entry window to reveal the trash can for deletion.

Colors

This is used to give each bar a fill color. Click Add Bar Color to add more colors. Hover over colors to reveal the trash can for deletion.

Y-axes

The multiple y-axes appear once each bar has matching y-axis data.

Key	Description	Example
Data Key	Data object property whose values correspond to the y-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 y-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	The lowest number on the y-axis range
Upper Bound	The highest number on the y-axis range
Auto Bounds	If marked, the bounds will automatically adjust based on the data

Click Add Y-Axis to add more axes. Hover over the Y-axis data entry window to reveal the trash can for deletion.

X-axis

Key	Description	Example
Data Key	Property from the data object whose values correspond to the x-axis ranges	{“dataKey”:“rainfall”}
Label	X-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 y-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.

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

Change the brush’s size and section by dragging the sides.

Grid

Edit the chart’s grid lines.

Legend

Key	Description	Example
Show/Hide	Show and hide the legend
Font Color	Changes the legend’s text font color
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

Statistics

Key	Description	Example
Enable Statistics	Displays a button to open a window for graph statistics. The 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
Tooltip	Display data box on hover
Unique Style	Overrides the overall style settings to change a specific setting. It is automatically checked when you change a style
HTML ID	Used to target the DOM’s widget elements	Add an ID to the page like this: `<div id="myCustomHtmlId">some text </div>` and write CSS like this: `##myCustomHtmlId{ color: red }`
Allow Fullscreen	Makes the chart fullscreen

Line chart

Creating a new line chart

1. Change the type to Line Chart.

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

3. Click to automatically populate the graph with generated recommendations based on the data types.

The rest of the tabs are for editing the graph.

Lines

Key	Description	Example
Data Key	Data object property corresponding to a bar on the graph	{“dataKey”:“humidity”}
Type	The interpolation line type	Each line type description
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

Check the Show Dots box to add points to the graph. Click Add Line to add more lines. Hover over the line data entry window to reveal the trash can for deletion.