Integration with Highcharts

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 of the Highcharts library:

• Area range (demo)
• Area-spline (demo)
• Area spline range (demo)
• Basic area (demo)
• Basic bar (demo)
• Basic column (demo)
• Bubble chart (demo)
• Column range (demo)
• Error bar (demo)
• Line chart (demo)
• Funnel chart (demo)
• Pie chart (demo)
• Polygon (demo)
• Pyramid (demo)
• Scatter plot (demo)
• Spline (demo)
• Waterfall (demo)

Follow these four steps to start creating interactive data visualizations.

Step 1: Load the data

After embedding the pivot table, firstly, load your data into a 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 should be displayed in the pivot table: put the hierarchies into the rows, columns and measures. This report with the data is passed to the charts then.

Then the slice may 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 a 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 WebDataRocks Connector for Highcharts:

   <script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
   

3. Add a container where the chart should be rendered:

   <div id="highchartsContainer"></div>
   

4. Next, set an event handler for the reportcomplete event of the pivot table instance by writing this code in the configuration of the pivot table:

   reportcomplete: function() {
   	pivot.off("reportcomplete");
   	createChart();
   }
   

   It is 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 is responsible for drawing and updating the chart. Use for this the highcharts.getData() method from the webdatarocks.highcharts.js connector. Pass an object with the specified chart’s type as the first argument. As the second argument, pass a function which is triggered once the data is loaded into the pivot table, as the third argument – a function which is fired when the data is updated. In the bodies of these functions, use the Highcharts.chart constructor method to initialize and update the chart. 

function createChart() {
    pivot.highcharts.getData({
        type: "areaspline"
    }, function(data) {
        Highcharts.chart('highchartsContainer', data);
    }, function(data) {
        Highcharts.chart('highchartsContainer', data);
    });
}

Finally, you can use this powerful combination of Highcharts and WebDataRocks reporting tool for creating 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 you can integrate WebDataRocks Pivot Table with Highcharts to make an illustrative dashboard.