Chart Widget
Learn how to use the chart widget on Device and Global Dashboards.
Last updated
Learn how to use the chart widget on Device and Global Dashboards.
Last updated
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.
You will find a quick guide to our chart widget here:
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.
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.
The interpolation types determine how data points are connected between measurements in a time series. The method chosen affects the appearance of the graph, particularly in areas where there are no data points, influencing the shape of the curve between known points. Here’s an explanation of each of the interpolation methods available on Datacake:
1. Linear Interpolation
How it works: Linear interpolation draws straight lines between each pair of data points.
Graph appearance: It results in a piecewise linear graph with sharp transitions at each data point.
When to use: This is best when the changes between points are relatively simple and do not require smoothing.
2. Natural Interpolation (Cubic Spline)
How it works: Natural interpolation creates a smooth curve using a piecewise cubic function that minimizes abrupt changes in the curve's slope.
Graph appearance: The curve is smooth and continuous with no sharp angles, and it adjusts naturally through the data points.
When to use: This is suitable when the data has a smooth, continuous trend, and you want a natural-looking curve that fits all points exactly.
3. Basis Interpolation
How it works: Basis interpolation creates a smooth curve, similar to a spline, but it does not pass through all the data points. It’s more like an "average" path through the points.
Graph appearance: The result is a very smooth curve, but the curve may not touch the data points exactly.
When to use: Basis interpolation is ideal when you are more concerned with having a smooth-looking trend than exact accuracy to the data points.
4. Monotone Interpolation (Monotonic Cubic Hermite)
How it works: Monotone interpolation ensures that the curve between points does not oscillate and preserves the original trend of the data, so the curve never overshoots the data points.
Graph appearance: It results in a smooth curve that respects the natural ups and downs of the data without creating peaks or valleys that don’t exist in the original data.
When to use: Best for time series data where it’s important to maintain the original trend without creating artificial extremes. It's ideal for data that should increase or decrease smoothly.
5. Step Interpolation
How it works: Step interpolation creates a series of flat, horizontal steps between each pair of data points. The value stays constant between two points until the next point, where it jumps to the new value.
Graph appearance: The result is a graph with sharp, rectangular steps rather than smooth lines.
When to use: This is commonly used when data changes abruptly or you want to highlight the discrete jumps in value over time (e.g., stock prices or event-triggered data).
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.
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.
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":
startOfHour
startOfDay
startOfYesterday
startOfWeek
startOfLastWeek
startOfMonth
startOfLastMonth
startOfYear
startOfLastYear
a minute ago
an hour ago
a day ago
7 days ago
a week ago
a month ago
last year
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, we explain best practices for setting up time ranges on chart widgets, if you want further information.
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).
Datacake now offers a new feature in the chart widget that allows you to display events. This functionality enhances data visualization by enabling users to represent boolean field changes (events) on their charts. Below, we provide a step-by-step guide to using this feature.
This feature is particularly useful for devices generating events based on sensor values. For example:
CO2 Monitor, Flood Sensor, Parking Space, Events: Monitors environmental parameters such as temperature, CO2 levels, humidity, light, and mold risk.
Events like general alerts, CO2 alerts, temperature alerts, and humidity alerts can be derived and displayed as boolean values.
Everything that has a boolean field.
Boolean fields indicate specific conditions, such as whether an alert is active (true) or inactive (false).
Access the Events Tab:
In the chart editor, locate the Events tab, positioned next to Reference Lines.
Add an Event Source:
Click the Add button to create a new event.
Select a boolean field (e.g., Motion Alert) as the event source.
Customize Event Display:
Change the line thickness, color, and type.
Optionally, add a label (e.g., "Motion") for clarity.
Adjust Time Frame:
Use the time frame selector to display events over a specific duration (e.g., one day or one week).
Define Event Points:
Start: Marks when the boolean field becomes true.
End: Marks when the boolean field becomes false.
Start and End: Displays both the starting and ending points of the event.
Color and Style:
Customize event lines with different colors and styles for better visualization.
Add a Motion Alert as the boolean field source.
Display the motion alert as a line event on the chart:
Set the thickness and color.
Add a label (e.g., "Motion").
Observe the motion alert events, aligned with the selected time frame, on the chart.
Improved visualization of boolean-based events.
Clear representation of alert start and end points.
Flexibility to overlay multiple event sources on the same chart.
Displaying events on the chart widget provides a powerful way to visualize alerts and changes in your IoT data. By leveraging boolean fields, you can effectively represent event-driven insights directly on your dashboards.
For further assistance, explore our documentation or contact support. Thank you for using Datacake!
