In this tutorial, I will explore how to leverage Highcharts Dashboards to create a dashboard using the MathModifier module and the draggable option (see demo below):
Link to the demo
You might ask yourself, why do I need to create such a dashboard?
Well, including the draggable points option in the dashboard lets you or your users modify data points on the chart interactively. This option allows you to dynamically adjust individual data points by dragging them, providing real-time updates to both the chart and the DataGrid. This user-friendly customization enhances the overall interactivity of the dashboard, allowing for intuitive exploratory data analysis directly within the dashboard interface.
Now, I clarified the benefit of such a dashboard, let’s see how to create one 🙂.
Library
Be ensure that you have included the necessary Highcharts Dashboards library and modules:
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script> <script src="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script> <script src="https://code.highcharts.com/dashboards/datagrid.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/draggable-points.js"></script> <script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>
Notice that I am using draggable-points.js
for draggable option, and math-modifier.js
to performs mathematical calculations with ease, in this case the following calculation:
dataModifier: { type: 'Math', columnFormulas: [{ column: 'USD', formula: 'B1*C1' // Multiply EUR (B1) with the rate (C1) }] }
Data
The code below fetches data in JSON format, then calculates and adds a ‘USD’ column to represent the exchange rate in US Dollars (using the MathModifie
module). By the way, the date is given in milliseconds since the epoch.
const data = [ ['Day', 'EUR', 'Rate'], [1691971200000, 11, 1.0930], ... ]; ... dataPool: { connectors: [{ id: 'EUR-USD', type: 'JSON', options: { data, dataModifier: { type: 'Math', columnFormulas: [{ column: 'USD', formula: 'B1*C1' // Multiply EUR (B1) with the rate (C1) }] }
Dashboards GUI
For this demo, the layout is pretty simple. All I need is two cells in one row, one for the chart and the other to host the DataGrid.
layouts: [{ id: 'layout-1', rows: [{ cells: [{ responsive: { …}, id: 'dashboard-col-1' }, { responsive: { …}, id: 'dashboard-col-2' }] }] }]
Dashboards Component
I have two components: one for the chart and the other for the DataGrid. The central part of this section is that both of the components have the sync,highlight
to true
. This allows the data changes to be synchronized between the chart and the data grid, and both of them are linked to the same data connector.
connector: { id: 'EUR-USD' } sync: { highlight: true },
The rest of the code is standard to create a chart and operate a DataGrid.
Here is a cool idea to add to the demo. Try to set the option editable under the dataGridOptions
to true
, then change the numbers on the DataGrid, right 😉?
Now, you know how to create a dashboard with draggable points and a math modifier. The result is a user-friendly interface where you and your users can easily explore and analyze data sets.
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.