Time series component for Dashbuilder
As you probably already know, you can use Dashbuilder, a part of Business Central to create pages and intuitive dashboards.
In Dashbuilder, Pages are composed of small components that can show any type of data. Dashbuilder provides by default multiple components that users can drag to pages. Recently, we have added a bunch of new components like treemaps, charts, maps, etc, to extend the usability and aid in representing user data in a precise way.
Recently, we added the Prometheus dataset provider to extend the usability of Dashbuilder to represent time series metrics (see more details on this blog post).
In this blog post, I’m going to walk you through the new external component added to Dashbuilder to better represent time-series data and use it to create your own dashboards connected to your time series datasets.
Time series component
This is one of the new components that we have added using React and ApexCharts library. Now, you can provide a custom dataset or Prometheus metrics and create visualizations of your time series data on a line or area chart using Dashbuilder.
ApexCharts is an MIT licensed open-source library to create interactive JavaScript charts built on SVG. You can find it on GitHub. ApexCharts provides some in-built features like downloading the dataset in CSV or downloading the chart in PNG or SVG format. You just have to click the sandwich menu icon on the top right corner to discover it. The component that I have used is zoomable time series, which means you can choose to zoom in and out a particular area of the chart.
To use the time series component on Dashbuilder, get the component from https://github.com/jesuino/dashbuilder-components/tree/master/packages/time-series-chart and paste it in the Components directory. For more information about Developing custom components, head over to https://blog.kie.org/2020/09/developing-custom-components-for-dashbuilder.html.
After adding the component to the aforementioned directory and enabling external components, just click on the External Components dropdown, and select time-series-chart and drag it to the page, select the dataset in the Data tab(make sure that the columns are selected properly), set the component properties in the Component Editor tab and you are done.
In order to add datasets, click on the menu dropdown in the navigation bar, select Datasets. You will be asked the type of dataset you want to add. You can add a CSV dataset or Prometheus metrics according to your choice. Based on what you name the datasets while adding them, the names of datasets in the Data tab will be populated after dragging the component to the page.
You can use any library of your choice to create a component, just add the library, for instance, react-apexcharts and apexcharts to package.json and import them in respective TypeScript or JavaScript files. Configure the data to the required format to feed it to the component, for example, the major props that the Zoomable series chart uses includes options and series. The Options interface, which takes care of the x-axis categories and the chart name and the Series interface, which takes the arrays of names and the series values, looks like this:
We have the following component properties to make it customizable:
- Show Area: A checkbox to set the type of chart, area, or line;
- Chart Name: To set the chart name;
- Date Categories: A checkbox to handle categories as dates or pure text;
- Labels: To enable or disable data labels on data points;
- Transposed: Whether the dataset provided uses series as separate columns or as rows.
Conclusion
There is no limit to what library/framework you want to use. We are continuing to include more custom components to allow users to create interactive dashboards.
Huge shoutout to William Antônio Siqueira for coming up with integrating the Prometheus dataset provider with Dashbuilder and for the chart GIF.
