Analyze Your Tabular Data and Visualize it With Charts

Many business analysts face the problem of presenting the data from the spreadsheets or business reports. If you want to learn about a more sophisticated way of doing data analysis, you may find to link your report to data with charts. I'd like to show you a solution I’ve reached.

After researching the available tools which don’t need a complicated installation process, I’ve chosen the following ones:

• WebDataRocks:  A web reporting tool for data aggregation, sorting, filtering, and further displaying it in the pivot table. It’s free, has a user-friendly interface and can be embedded into an application with any front-end (e.g., Angular 2+, React.js) and backend technologies.

• Highcharts: A dynamic charting library which supports a wide range of charts types: area, areaspline, bar, pie, bubble, column, etc. It allows for the custom preprocessing of data and element customization. It is free for non-commercial use. For commercial needs, it offers a free trial to test its functionality.

To my mind, both tools complement each other well in achieving smart data visualization goals. In this tutorial, I will explain how to create a dashboard with a pivot table and colorful charts. Moreover, the chart will be updated as soon as the data in the table is updated, sorted, or filtered. In practice, it is easier than it sounds. The process will be illustrated with an example on CodePen and enriched with explanations. You can scroll down to see the full code if you feel unsure about some steps.

Ready to make your data presentation more interesting and interactive? Let’s start.

Step 1: Data Preparation

Before the start, I’ve defined a function which returns an array of my JSON data:

function getJSONData() {
    return [{
            "Country": "Australia",
            "Category": "Wood",
            "Price": 445,
            "Revenue": 464
        }, {
            "Country": "Australia",
            "Category": "Bikes",
            "Price": 125,
            "Revenue": 440
        },
        //
    ]
}

Step 2: Embedding the Pivot Table

I’ve read a Quickstart, included the scripts and styles of WebDataRocks in my webpage:

<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>
<div id="wdr-component"></div>

Step 3: Aggregation

Next, I’ve moved on to defining the slice of the data which will be shown in the table and passed to the chart. As I’m going to conduct an analysis on which country from the dataset is the most profitable. I’ve put Country into rows, Price and Revenue into Measures. Also, to discover which category of merchandise brings the lion’s share of the revenue, I’ve added Category to columns. Now my basic pivot’s configuration looks like the following:

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        "dataSource": {
            "dataSourceType": "json",
            "data": getJSONData()
        },
        slice: {
            rows: [{
                uniqueName: "Country"
            }, {
                uniqueName: "[Measures]"
            }],
            columns: [{
                uniqueName: "Category"
            }],
            measures: [{
                uniqueName: "Price"
            }, {
                uniqueName: "Revenue"
            }]
        }
    }
});

Step 4: Connecting to Highcharts

After reading an Installation guide, I’ve included a Highcharts’s script into my webpage, a WebDataRock’s connector for Highcharts and the container for the chart:

<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
<div id="highchartsContainer"></div>

Step 5: Exporting the Data from the Pivot Table to the Chart

Now it’s time to define a function which will be responsible for creating and drawing the chart:

function createChart() {
    pivot.highcharts.getData({
        type: "spline"
    }, function(data) {
        $('#highchartsContainer').highcharts(data);
    }, function(data) {
        $('#highchartsContainer').highcharts(data);
    });
}

Step 6: Enjoy Your Data Presentation

Let’s see what data visualization results were achieved by using these 5 steps:

Try to experiment with the data: change the hierarchy in rows, apply different measures or filter the data and see how the view of the chart is changed at once.

I hope you’ve found this tutorial useful, too, and discovered a new effective way of customizing your reports. The full code is available on CodePen.

It would be my pleasure to receive feedback about your experience combining these tools. Please leave your questions and suggestions in the comments and stay tuned for updates!