Highcharts is a dynamic charting library based on native browser technologies. We’ve prepared for you a detailed tutorial about integration WebDataRocks with Highcharts.

WebDataRocks supports the following chart types from the Highcharts library:

Follow 4 simple steps to start creating interactive data visualization.

Step 1: Load the data

After embedding the pivot table, at first, load your data into the pivot table. Set a basic report configuration:

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});

Step 2: Configure the slice

Define which data will be displayed in the pivot table: put necessary fields into rows, columns and measures. This configured report with data will be passed to Highcharts.

Then the slice will look like the following one:

slice: {
    rows: [{
        uniqueName: "Country"
    }, {
        uniqueName: "Measures"
    }],
    columns: [{
        uniqueName: "Category"
    }],
    measures: [{
        uniqueName: "Price"
    }]
}

Step 3: Connect to Highcharts

  1. At first, add the loaders of Highcharts by including the scripts into the web page:
    <script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
    <script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>
    
  2. Then, add a WebDataRocks connector for Highcharts:
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
    
  3. Add a container where the chart will be rendered:
    <div id="highchartsContainer"></div>
    
  4. Next, add a reportcomplete event handler to the pivot instance by writing this code in the configuration of the pivot table:
    reportcomplete: function() {
    	pivot.off("reportcomplete");
    	createChart();
    }
    
    It will be fired when the pivot table is ready to display the data.

Step 4: Create a chart based on the pivot table’s data

Define a function which will be responsible for drawing and updating the chart. Use for this a highcharts.getData(options, callbackHandler, updateHandler) from webdatarocks.highcharts.js library. Pass an object with the specified chart’s type as the first argument. As the second argument, pass a function which will be triggered once the data is loaded into the pivot table, as the third argument – a function which will be fired when the data is updated.

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

Finally, you can use this powerful combination of Highcharts and WebDataRocks reporting tool for your business reports. Try to update the data, filter it, change the measures and aggregation functions and see how the chart reacts to these changes.

Example

This sample shows how WebDataRocks Pivot Table can be integrated with Highcharts to make an illustrative dashboard.