Building a dashboard with Highcharts and WebDataRocks Pivot

If you are looking for a web-based tool to both slice, dice and analyze data as well as visualize those data, combining Highcharts and the free Pivot Table tool from WebDataRocks might be just what you are looking for.

Together they allow you to generate a powerful web-based dashboard that can serve multi-purpose analytical and reporting needs, and be integrated with any project.
Armed with this approach, you and your users will be able to come up with data-driven decisions faster and quicker (and most likely, cheaper) than before.

Here is an example of the kind of dashboard you will be able to make after reading this tutorial:

Why dashboards

Many dashboards are designed to only report data. However, once you combine data manipulation and visualization, the analysis becomes much more sophisticated.

No need for an expensive BI (Business Intelligence) too. All you need is WebDataRocks Pivot Table and Highcharts. Here is how they may work together:

By taking your raw data as an input, the pivot table transforms it into intelligible tabular reports. In our case, this also prepares the data for the Highcharts charting engine, so that you may explore the data visually.

The pivot table component comes with a collection of aggregation functions, a drag-and-drop interface, a comfy field list, and customization options. It’s very flexible when it comes to integrating with charting libraries, Highcharts in particular.

Building a dashboard

Building any dashboard requires you to first define the objectives of your data analysis, specify key metrics and collect relevant data.

We won’t get into the preparatory work in this tutorial. We will just assume the role of a fictional HR department, looking to better visualize data about the organizations’ employees. Here are some fictional HR data to get us started.

So, where should we start?

Step 1: Include libraries

Like Highcharts, the Pivot Table integrates smoothly with a majority of front-end technologies, including React and Angular frameworks. For this tutorial, we won’t debate frameworks, but simply use a static HTML page for demonstration purposes.

Create an empty HTML page and embed WebDataRocks into our page by linking it to the library via it’s CDN.

Open your HTML file and betweentags include WebDataRocks with some sample data.

<html>
    <head></head>
    <body>
        <div id="wdr-component"></div>
        <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
        <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
        <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
        <script>
            var pivot = new WebDataRocks({
                container: "#wdr-component",
                toolbar: true,
                report: {
                    dataSource: {
                        filename: "https://www.webdatarocks.com/wd_uploads/2019/09/hr_data.json"
                    }
                }
            });

        </script>
    </body>
</html>

You can see how this code is working in the live demo on CodePen.

Step 2: Add your data&lt

Once the pivot table is embedded, we are ready to fill the pivot table with data. Connect it to the data source. Learn how to connect using a JSON source or using a CSV source.

Step 3: Create a report

Next, define which data to show on the grid.

Here is what we’ve got:

Step 4: Sending data to the charts

Integrating Highcharts is easy. As explained in the Highcharts documentation, a neatly organized JSON file is all it takes to get a chart up with its default settings.

Fortunately for us, this step can be handled by the WebDataRocks connector that is shipped as a script. Details of how this connection works can be found in our integration guidelines.

To send the data to charts, we can use a special method – webdatarocks.highcharts.getData().

As the name suggests, the method requests and gets the aggregated data from the pivot. Depending on the chart’s type, the method preprocesses the data according to the required structure. (That was easy!) Once the method’s callback is triggered, a chart is generated based on the received data. If the underlying data (i.e. the report) is changed, the chart is also updated.

Here is a CodePen demo if you want to study the simple code behind this integration more carefully.

Step 5: Customize the Look & Feel

You may now customize the dashboard to a color scheme of your choosing. Check this article to learn how.

Results

Well, that is it. With the two JavaScript libraries working together you may interact with the pivot table and instantaneously see the changes reflected in the charts.

What’s next?

To learn the concepts of Highcharts from the ground up, check out the Understanding Highcharts guide. To explore the capabilities of WebDataRocks Pivot, walk through its technical specifications.