Highcharts Dashboards

In this tutorial, I will walk you through the process of building a responsive and interactive Highcharts dashboard with synchronized data. With the help of the Highcharts Dashboards library, creating a dashboard becomes effortless.

The result will look like the following dashboard:

Even if you’re new to the Highcharts core library, don’t worry, the Highcharts dashboards configuration is user-friendly. Let’s dive into the code of this example to see how easy it is.

The goal is to create a dashboard displaying worldwide polio (pol3) immunization coverage among one-year-olds. The data is collected from the World Health Organization. The requirements include four area charts: one for global coverage, one for South-East Asia, and two side-by-side charts for Africa and Europe. The top two charts should be synchronized, as well as the bottom two charts.
Let’s proceed with building this dashboard in four simple steps. Remember, the Highcharts Dashboards library handles most of the heavy lifting, so I just need to use the right options for fetching data and synchronizing the charts.

Step 1: Libraries

Be sure that you get all the right libraries to build the dashboard:

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

The explanation for each library is beyond the scope of this tutorial, however, feel free to check Highcharts documentation for more information.

Step 2: Dataset

I fetch and set up the data in CSV format:

<pre id="csv">x,Global,Africa,Europe,South-East Asia
946684800000,73,54,94,64
978307200000,73,55,94,65
1009843200000,74,59,93,65

I use the dataPool object to create separate datasets for the upper and bottom two charts. A separate datasets technique will help the synchronization I mentioned above:

dataPool: {
  connectors: [{
    id: 'connector-1',
    type: 'CSV',
    options: {
      csv: csvData
    }
  }, {
    id: 'connector-2',
    type: 'CSV',
    options: {
      csv: csvData
    }
  }]
},

Step 3: Create the layout

I use the gui object to structure the chart layout as follows:

gui: {
  layouts: [
    {
      id: "layout-1",
      rows: [
        {
          cells: [
            {
              id: "dashboard-col-1"
            }
          ]
        },
        {
          cells: [
            {
              id: "dashboard-col-2"
            }
          ]
        },
        {
          cells: [
            {
              id: "dashboard-col-3"
            },
            {
              id: "dashboard-col-4"
            }
          ]
        }
      ]
    }
  ];
}

Each cell groups one or more charts together to get the layout as required: two single charts on the top and two together at the bottom.

Step 4: Create the charts

I use the components object to create charts by specifying the cell ID, connector ID, data to fetch (using the columnAssignment object), and regular Highcharts configuration (chartOptions object). Notice that I also use the sync object with the options extremes and highlight. extremes to synchronize the selection or panning between charts, and highlight to synchronize the hovering process between charts. One last thing, in this demos, as there are not many columns to pull the data, I just discard the unwanted data in the columnAssignment object. For instance, to display the global data, I set the European, African, and South East Asia to null:

columnAssignment: {
  x: 'x',
  Europe: null,
  Africa: null,
  'South-East Asia': null
},

Remark
You do not need to use null values in the columnAssigment. At this moment the core applies them by default.

Congratulations, you have now built a fully functional Highcharts dashboard with synchronized data.