FusionCharts is a charting library that provides a wide range of interactive charts, maps, and graphs. This tutorial describes how to integrate WebDataRocks with FusionCharts and visualize your data from the component.
Charts:
Maps:
In case the chart you need is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction
parameter of fusioncharts.getData().
Please follow these steps to integrate your pivot table component with FusionCharts.
Step 1.1. Complete the Quick start guide. Your code of the web page with WebDatarocks should look similar to the following:
<html>
<head>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
</head>
<body>
<div id="pivot-container"></div>
<script>
const pivot = new WebDataRocks({
container: "#pivot-container",
toolbar: true,
});
</script>
</body>
</html>
Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:
const pivot = new WebDataRocks({
container: "#pivot-container",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Business Type",
},
{
uniqueName: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
});
The fields you’ve specified in the report will be shown on the chart.
Step 2.1. Include fusioncharts.js
into your web page:
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
Step 2.2. Include a theme for FusionCharts:
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
Step 2.3. Add the <div>
container where the chart will be rendered:
<div id="fusioncharts-container"></div>
Step 3.1. Include the WebDataRocks Connector for FusionCharts:
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>
The Connector provides the fusioncharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.
Step 3.2. If we call the fusioncharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:
const pivot = new WebDataRocks({
container: "#pivot-container",
toolbar: true,
report: {
// ...
},
reportcomplete: onReportComplete
});
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivot.off("reportcomplete");
createChart();
}
Now the chart will be created only when the data is loaded and the report is ready.
Step 3.3. Implement the createChart()
function. It will use the fusioncharts.getData() method from the Connector:
function createChart() {
const columnChart = new FusionCharts({
type: "mscolumn2d",
renderAt: "fusioncharts-container",
width: "100%",
height: 450
});
pivot.fusioncharts.getData(
{
type: columnChart.chartType()
},
// Function called when data for the chart is ready
function(chartConfig) {
// Applying the chart theme
chartConfig.chart.theme = "fusion";
// Passing the data to the chart
columnChart.setJSONData(chartConfig);
columnChart.render();
},
// Function called on report changes (filtering, sorting, etc.)
function(chartConfig) {
// Applying the chart theme
chartConfig.chart.theme = "fusion";
// Passing the data to the chart
columnChart.setJSONData(chartConfig);
}
);
}
If the Connector does not support the desired chart type or you need to preprocess the data differently, implement a function that handles the data processing and pass it to fusioncharts.getData() as the options.prepareDataFunction
parameter.
To learn more about configurations available for FusionCharts, please refer to the FusionCharts documentation.
Open your web page in the browser to see an interactive dashboard with WebDataRocks and FusionCharts. The column chart shows the data from WebDataRocks and reacts instantly to any changes in the report.
After completing this tutorial, the full code of the web page should look as follows:
<html>
<head>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>
</head>
<body>
<div id="pivot-container"></div>
<div id="fusioncharts-container"></div>
<script>
const pivot = new WebDataRocks({
container: "#pivot-container",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Business Type",
},
{
uniqueName: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
reportcomplete: onReportComplete,
});
function onReportComplete() {
pivot.off("reportcomplete");
createChart();
}
function createChart() {
const columnChart = new FusionCharts({
type: "mscolumn2d",
renderAt: "fusioncharts-container",
width: "100%",
height: 450,
});
pivot.fusioncharts.getData(
{
type: columnChart.chartType(),
},
function (chartConfig) {
chartConfig.chart.theme = "fusion";
columnChart.setJSONData(chartConfig);
columnChart.render();
},
function (chartConfig) {
chartConfig.chart.theme = "fusion";
columnChart.setJSONData(chartConfig);
},
);
}
</script>
</body>
</html>
This sample shows how to integrate WebDataRocks Pivot Table with FusionCharts: