Integration with any charting library
This tutorial explains how to connect WebDataRocks to a third-party charting library, such as Chart.js, ApexCharts, ECharts, or D3.js.
WebDataRocks can be integrated with charting libraries using the getData() API call, which returns data displayed on the grid. Then, you need to preprocess the data to a format required by your charting library and pass it to the chart.
In this tutorial, we will integrate with Chart.js, but the steps are similar for other libraries. Our integration is based on the Chart.js Getting started guide.
Note that if you are integrating with amCharts, Highcharts, FusionCharts, or Google Charts, use our ready-to-use connectors that will automatically process the data. Check out the list of available tutorials.
Step 1. Add WebDataRocks to your project
Step 1.1. Complete the integration 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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
});
The fields you’ve specified in the report will be shown on the chart.
Step 2. Add a charting library
Step 2.1. Include the scripts for the charting library into your web page:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Step 2.2. Add a container to your web page where the chart should be rendered:
<div style="width: 700px;">
<canvas id="chart-container"></canvas>
</div>
Step 3. Integrate WebDataRocks with the charting library
In this step, we will use the getData() API call. This method was added especially for integration with third-part charting libraries; using it, you can request data from WebDataRocks and pass it to a charting library.
Step 3.1. If we call the 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: function() {
pivot.off("reportcomplete");
createChart();
}
});
Now the chart will be created only when the data is loaded and the report is ready.
Step 3.2. Declare a variable for the chart:
let chart;
Step 3.3. Implement the createChart() function using the getData() API call:
function createChart() {
pivot.getData(
{},
// Function called when data for the chart is ready
drawChart,
// Function called on report changes (filtering, sorting, etc.)
updateChart
);
};
Step 3.4. Implement the drawChart() function specified in the previous step. This function will initialize the chart, set all the configurations specific to this chart type, and fill it with the data provided by WebDataRocks:
function drawChart(rawData) {
let chartData = prepareData(rawData); // This function will be implemented in step 4
// Configuring the chart
const config = {
type: "polarArea",
data: {
labels: chartData.labels,
datasets: [{
data: chartData.values,
}]
},
};
// Creating a new chart instance
chart = new Chart(
document.getElementById("chart-container"),
config
);
};
Step 3.5. Implement the updateChart() function specified in step 3.3. This function will be called on the report changes (e.g., filtering, sorting, etc.):
function updateChart(rawData) {
chart.destroy();
drawChart(rawData);
};
Step 4. Preprocess the data for the chart
getData() API call returns an object (e.g., rawData) that contains the data from the grid and its metadata. The metadata includes a number of fields in rows and columns in the slice, an array of format objects, etc. Read more about the getData() response.
Here is an example of the rawData.data array returned by getData(). This data is based on the slice that was defined in the step 1.2:
data: [
{ v0: 6221870 }, // Grand total
{ r0: "Australia", v0: 1372281 },
{ r0: "France", v0: 1117794 },
{ r0: "Germany", v0: 1070453 },
{ r0: "Canada", v0: 1034112 },
{ r0: "United States", v0: 847331 },
{ r0: "United Kingdom", v0: 779899 }
]
This raw data now must be transformed to match the data format required by your charting library, in our case — Chart.js. Let’s create a function that will preprocess the data, for example, prepareData().
We are passing data to the data.labels and data.datasets properties, where data.labels contains field members and data.datasets contains values. Read more in the Chart.js documentation.
The prepareData() function for Chart.js will look similar to the following:
function prepareData(rawData) {
let labels = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.r0);
let values = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.v0);
return {
labels: labels,
values: values
};
};
prepareData() must return an object with the data that can be used by your charting library. The example shows the returned object for Chart.js:
{
labels: ["Australia", "France", "Germany", "Canada", "United States", "United Kingdom"],
values: [1372281, 1117794, 1070453, 1034112, 847331, 779899]
}
Step 5. See the result
Open your web page in the browser to see how the pivot table looks in combination with your charting library.
Try filtering the data, changing measures, and adjusting aggregation functions — the chart will be updated at once.
Check out the full code
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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div id="pivot-container"></div>
<div style="width: 600px;">
<canvas id="chart-container"></canvas>
</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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
reportcomplete: function() {
pivot.off("reportcomplete");
createChart();
},
});
let chart;
function createChart() {
pivot.getData(
{},
drawChart,
updateChart
);
};
function drawChart(rawData) {
let chartData = prepareData(rawData);
const config = {
type: 'polarArea',
data: {
labels: chartData.labels,
datasets: [{
data: chartData.values,
}],
},
}
chart = new Chart(
document.getElementById('chart-container'),
config,
);
}
function updateChart(rawData) {
chart.destroy();
drawChart(rawData);
};
function prepareData(rawData) {
let labels = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.r0);
let values = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.v0);
return {
labels: labels,
values: values
};
};
</script>
</body>
</html>
Live example
Interact with the following sample where WebDataRocks Pivot Table is integrated with Google Charts to see how they work together: