Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Timeseries Chart

Timeseries is a JavaScript library that helps you visualize and explore time-series data interactively. It supports data with atomicity ranging from milliseconds to years.

Data Plot

Data plot refers to the columns of the Timeseries chart.

Time Axis

Time Axis refers to a line on a chart that runs horizontally (left to right).

Time Markers

Time markers are the names of the data points that are displayed on the time axis of a chart.

Data Markers

Data markers are the names of the data points that are displayed on the chart plot.

Y-Axis

Y-Axis refers to a line on a chart that runs vertically (up-down) through zero.

Y-Axis Title

It refers to the title of the y-axis. You can customize it using Style Definition.

Standard Range Selector

It refers to the selector for standard time periods.

Custom Range Selector

It refers to the selector for custom time periods.

Crossline

Cross line is a vertical line/area used as a quick reference for data plots.

Legend

A legend is a chart element used to display the series name for each dataset. Legends are used to correlate a data plot to its series name using its color.

Tooltip

tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point.

Difference between Timeseries and other charts

While charts can help you visualize data in different ways, Timeseries works exclusively with time series data. Unlike other varieties of charts, which only accept data in JSON, Timeseries accepts data in rows and columns as a Datatable. You can then apply different data operations (filter, grouping, etc.) on the DataTable to optimize your data as per the requirement.

Timeseries Data Layer

Timeseries data layer is comprised of a DataStore and a DataTable. So, how do you create the DataTable? The Timeseries data layer comes with a DataStore which accepts data in JSON/2D array format. The data fed in the DataStore is converted to a root DataTable. This root DataTable contains the source data in a tabular format.

Once the root data table is available, one can either use it to render the chart or apply data operations on it, to create a new DataTable with modified data. Data operations are chain operations which can be applied on any data table. Once we decide on the data table for a particular Timeseries chart, we can instantiate the chart using the particular derived data table.

The DataStore also contains a set of data operators (filter, grouping, etc.) which can be applied to any DataTable. Any operation applied on a DataTable to optimize data generates a new child DataTable. Likewise, any number of data tables can be generated from either the master or other child data tables. You can then provide any one of them to render the chart.

Create a Timeseries Chart

For a detailed list of attributes, refer to the Timeseries Chart attributes page.
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1840534944" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1577290368" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_697703808" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>