Tutorials

How to create a DataGrid synchronized dashboard

by

Mustapha Mekhatria

3 minutes read

In this tutorial, I will create a dashboard that enables dragging points on a column chart to update a data grid and edit the data grid to update the column chart using the Highcharts library. If you want to know why you have to create such a dashboard, feel free to check the previous blog about Why you need a DataGrid synchronized dashboard.

If you are new to the Highcharts Dashboards, you can still follow along; however, feel free to check this blog to learn how to build Highcharts Dashboards step by step; it is kind of a Highcharts Dashboards 101 🙂 .

A data-synchronized dashboard is not only engaging but also empowers users to explore data relationships and patterns interactively (see dashboard demo below):

Let’s get started to build this awesome Highcharts dashboard in 5 steps:

1. Include Highcharts library

Start by including the required Highcharts library, Highcharts Dashboards library, and the magic draggable-points.js module that allows me to enable draggable points on the chart:

<script src="https://code.highcharts.com/dashboards/dashboards.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/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

2. Create a Highcharts dashboard

To set up a Highcharts Dashboards, I use the Dashboards.board method, where I define the dataPool, gui, and components.

3. Fetch data

In this demo, I fetch data as CSV with ease thanks to the dataPool option:

const csvData = document.getElementById('csv').innerText;
…
Dashboards.board('container', {
      dataPool: {
        connectors: [{
          id: 'Vitamin',
          type: 'CSV',
          options: {
            csv: csvData
          }
        }]
      },

4. Dashboard layout

I need three charts on the same row, so here is how I use the gui object to structure the three charts:

gui: {
  layouts: [{
    id: 'layout-1',
    rows: [{
      cells: [{
        id: 'dashboard-col-0'
      }, {
        id: 'dashboard-col-1'
      }, {
        id: 'dashboard-col-2'
      }]
    }]
  }]
},

5. Synchronize and update the data

The secret ingredients to synchronize and update the data between two column charts and the table are:

The draggableY property allows dragging points on both columns chart.

plotOptions: {
  series: {
    dragDrop: {
      draggableY: true,
      dragPrecisionY: 1
    }
  }
}

The allowConnectorUpdate property allows the link and update between the first chart and the table.
The editable and syn properties allow the table to be edited and synchronized with both tables.
```
editable: true,
  sync: {
    highlight: true
  }
```

That is it, simple, right 😉

Now you have a good idea of how to empower users to explore and manipulate the data in real-time, fostering a deeper understanding of the dataset’s patterns and relationships. This interactive approach to data visualization adds a new dimension to your charts and dashboards, making them both informative and engaging.