Line Chart

Note

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

Line Chart Elements:
1. Lines
2. Colors
3. Y Axes
4. X Axis
5. Reference Lines
6. Chart Margins
7. Brush
8. Grid Edits
9. Legend
10. Other Tools

Creating new line chart

  1. Change the type to “Line Chart”
    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

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

Fill in graph

The rest of the tabs are for editing the graph itself


Lines

Key Description Example
Data Key Property from data object corresponding to a bar on the graph {“dataKey”:“humidity”}
Type The interpolation type of line For descriptions of each type of line go to :https://github.com/d3/d3-shape#curves
Legend Type Icon associated with data key stars
Name Label for the line 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

Colors


This is used to give each line a stroke color. Click Add Line Color to add more colors. Hover over colors to reveal the trash can for deletion.

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

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

Reference Lines

X and Y axis lines can be added to define values and compare against the dataset. Note: Only one coordinate per reference line window


Click Add Reference Line to add more reference lines. Hover over reference lines data entry window to reveal the trash can for deletion

Chart

Change the 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 section in the graph
Stroke Change the color of the brush
Data Key Property from data object whose values corresponds to the brush {“dataKey”:“rainfall”}
Height Changes the height of the brush

Change the size and section of the brush by dragging the sides

Grid

Edit grid lines of the chart

Legend

Key Description Example
Show/Hide Show and hide legend
Font Color Changes font color of text on legend
Layout Changes the placement of the labels of the legend
Horizontal Align Changes the horizontal placement of the legend
Vertical Align Changes the vertical placement of the legend
Icon Type Changes the icon of the legend labels
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 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

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 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