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