Tutorials

Dashboard with draggable data points

by

Mustapha Mekhatria

3 minutes read

Picture of a dashboard using the MathModifier module and the draggable option.

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.