Chart Widget

Learn how to use the chart widget on Device and Global Dashboards.

Overview

The chart widget allows to visualise data using a graphical representation that tells how the fields have evolved within a period of time. It allows you to improve the understanding of large amounts of data.

Configuration

Basics & Data

On Basics enter a Title and select the Tint Color, which is the background color or the Highlight Color, which is the color of the Title. You can also Hide the background to make it transparent.

Then on Data, select Add Field to configure the fields on your device that you want to display for device dashboards, or select Add Device to configure the device + field that you want to display for global dashboards.

Values Absolute & Change

Once selected Fields or Devices, you can choose if you want to show absolute values coming from your devices or only the changes registered in the period of time setup under Timeframe.

You can as well select to display both Absolute and Change. This might be useful for example, to monitor an electric consumption.

You can as well setup a label, the kind of graph you want to display (line chart, area chart or bar chart), the color, interpolation type and the Y Axis.

When you select the line chart, it allows you to select the line thickness.

Interpolation type

The interpolation defines the estimation considered to construct the line plotted. A linear interpolation will take a straight line between the points, whereas a natural interpolation will take the nearest points to calculate a smoother curve.

Y Axis

When you add more than one measurement to your chart widget, make sure to select a new axis for each one of them. This way you ensure that the values get plotted correctly.

Axes

You can define the Axis orientation (left or right), define a unit, hide de Y axis and define the domain. If you want you can hide the X axis as well.

Make sure to define the Date Format on the X axis, since this is not done automatically once defined the Timeframe.

Timeframe

The chart widget comes with a time range presets, similar to the value widget, that can be overridden.

Here a small list of the options you can use on both "From" and "Until":

1. startOfHour

2. startOfDay

3. startOfYesterday

4. startOfWeek

5. startOfLastWeek

6. startOfMonth

7. startOfLastMonth

8. startOfYear

9. startOfLastYear

10. a minute ago

11. an hour ago

12. a day ago

13. 7 days ago

14. a week ago

15. a month ago

16. last year

17. now

You can as well setup a specific date, however, take into consideration that the widget will have to make the operation using the datapoints generated in the time window set. This can have extremely high calculation costs, which will result in degradation of the performance of your dashboards.

Always setup dates that exist! If the date you setup is in the future, the widget won't be able to find the data and the dashboard will crash.

• Resolution: You will find an additional parameter to specify the resolution in which the data is displayed on the widget. This settings specifies the time window size in which the datapoints within the given time range will be fetched from the database.

A high resolution leads to significantly longer loading times, since the data must first be retrieved from the server. We therefore suggest setting up daily trends with a higher resolution, in case needed and only weekly or monthly overviews with lower resolution. This will improve the overall performance of your workspaces.

Remember Datacake has a time-series database that does not store all entries, but optimises the storage by taking chunks of it and relating them to a timestamp. This enables the platform to fetch information very quickly and improve the overall performance of the visualisation.

• Timezone: Select between a list of timezones. If no timezone is selected, Datacake will take the timezone based on the browser's timezone, which means that customers around the world will be able to see the values in their own timezone.

In the following video, Simon explaines best practices for setting up time ranges on chart widgets, if you want further information.

Reference Lines

You can add reference lines on the charts, to be able to compare, reference or observe the values being stored in the database with a defined value. This will be represented as an horizontal line in the chart.

You can define the color, select if the line should be solid or dashed, setup the value as well as a title (Line Text).