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:
Follow these four steps to start creating interactive data visualizations.
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" } } });
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" }] }
<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>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
<div id="highchartsContainer"></div>
reportcomplete: function() { pivot.off("reportcomplete"); createChart(); }
It is fired when the pivot table is ready to display the 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.
This sample shows how you can integrate WebDataRocks Pivot Table with Highcharts to make an illustrative dashboard.