FusionCharts is a charting library that provides a wide range of interactive charts, maps, and graphs.
WebDataRocks enables you to visualize the data from the pivot table component with the help of FusionCharts.
In case the chart you need is not on the list, the best way to pre-process your data is by using prepareDataFunction.
Please follow these steps to integrate your pivot table component with FusionCharts:
After including WebDataRocks into your project, load your data into a pivot table by specifying a URL to your CSV/JSON file or defining a function which returns the data. Set a basic report configuration as follows:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
Put the hierarchies into the rows, columns, and measures which will be displayed on the grid:
"slice": {
"rows": [{
"uniqueName": "Country"
}],
"columns": [{
"uniqueName": "Category"
},
{
"uniqueName": "Measures"
}
],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum"
}]
}
Add the FusionCharts loader:
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
And a theme script:
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fusion.js"></script>
Add WebDataRocks Connector for FusionCharts:
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>
Add the <div> container where the chart will be rendered:
<div id="fusionchartContainer"></div>
Define a function which draws and updates the chart and attach it as an event handler to the reportcomplete event of the pivot table instance. reportcomplete is fired once the data and localization files have been loaded successfully. Simply put, it indicates whether the component is ready to use.
reportcomplete: function() {
pivot.off("reportcomplete");
createChart();
}
In the definition of createChart(), initialize a chart by calling the FusionCharts constructor.
Next, get the data from the pivot table and pass it to the charts by using fusioncharts.getData() method from the webdatarocks.fusioncharts.js connector. As the first argument, pass an options object with the chart’s type and a slice (optionally) to specify which data will be displayed in the chart. If the Connector does not support the chart’s type you need for the visualization or you need to pre-process the data in a different way, define an external function which handles the data processing and pass it as prepareDataFunction to options.
As callbackHandler, pass a function which is called once the data has been successfully loaded into the pivot table, as updateHandler pass a function which is called once the data in the report is updated, filtered or sorted. In callbackHandler, set chart data in the JSON format and render the chart. In updateHandler, update the chart with the new data from the report.
Additionally, you can apply the chart theme using the setChartAttribute() method of FusionCharts.
function createFusionChart() {
var chart = new FusionCharts({
"type": "stackedcolumn2d",
"renderAt": "fusionchartContainer",
"width": "100%",
"height": 350
});
pivot.fusioncharts.getData({
type: chart.chartType()
}, function(data) {
chart.setJSONData(data);
chart.setChartAttribute("theme", "fusion");
chart.render();
}, function(data) {
chart.setJSONData(data);
chart.setChartAttribute("theme", "fusion");
});
}
Now an interactive dashboard with WebDataRocks and FusionCharts is ready to be used in your application. The stacked column chart shows the data from the pivot table’s report and reacts instantly to any changes in the latter.
This sample shows how to integrate WebDataRocks Pivot Table with FusionCharts: