Read this tutorial to learn how to integrate the WebDataRocks reporting tool with Google Charts.
WebDataRocks supports the following chart types:
If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().
To start a new visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.
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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
});
The fields you’ve specified in the report will be shown on the chart.
Step 2.1. Include the script for Google Charts into your web page:
<script src="https://www.gstatic.com/charts/loader.js"></script>
Step 2.2. Create a flag variable to know when the Google Charts library is ready to be used:
let googleChartsLoaded = false;
Step 2.3. Load the Google Visualization API and the corechart package:
google.charts.load('current', {'packages':['corechart']});
Step 2.4. Set a callback to run when the Google Visualization API is loaded. In the callback handler, set the googleChartsLoaded flag to true:
google.charts.setOnLoadCallback(onGoogleChartsLoaded);
function onGoogleChartsLoaded() {
googleChartsLoaded = true;
}
Step 2.5. Create a <div> container for Google Charts with an id (e.g., googlechart-container):
<div id="googlechart-container"></div>
Step 3.1. Include the WebDataRocks Connector for Google Charts:
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
The Connector provides the googlecharts.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 googlecharts.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,
});
let googleChartsLoaded = false;
// Add a flag variable to keep the state of the report
let pivotTableReportComplete = false;
// ...
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivot.off("reportcomplete");
pivotTableReportComplete = true;
}
Now we know when the data is loaded and the report is ready.
Step 3.3. Let’s start creating a chart. A function to create a chart should be called only when the following conditions are met:
googleChartsLoaded flag is true).pivotTableReportComplete flag is true). Since we don’t know which will happen first, we have to handle both cases. Modify onGoogleChartsLoaded() and onReportComplete() functions as follows:
function onGoogleChartsLoaded() {
googleChartsLoaded = true;
// Handle the case when the report is complete before Google Charts is loaded
if (pivotTableReportComplete) {
createChart();
}
}
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivot.off("reportComplete");
pivotTableReportComplete = true;
// Handle the case when Google Charts is loaded before the report is complete
if (googleChartsLoaded) {
createChart();
}
}
Step 3.4. Now it’s time to implement the createChart() function. It will use the googlecharts.getData() method from the Connector:
function createChart() {
pivot.googlecharts.getData(
{
type: "column",
},
// Function called when data for the chart is ready
drawColumnChart,
// Function called on report changes (filtering, sorting, etc.)
drawColumnChart,
);
}
Step 3.5. Finally, implement the drawColumnChart() function:
function drawColumnChart(chartConfig) {
let data = google.visualization.arrayToDataTable(chartConfig.data);
const columnChartContainer = document.getElementById("googlechart-container");
const chart = new google.visualization.ColumnChart(columnChartContainer);
chart.draw(data);
}
Notice the id of the columnChartContainer — it must match the id of a <div> created in step 2.5 (in our case, it is googlechart-container).
Open your web page in the browser to see how the pivot table looks in combination with Google Charts.
To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.
To learn more about chart customization, please refer to the Google Charts Documentation.
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://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
</head>
<body>
<div id="pivot-container"></div>
<div id="googlechart-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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
reportcomplete: onReportComplete,
});
let googleChartsLoaded = false;
// Add a flag variable to keep the state of the report
let pivotTableReportComplete = false;
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(onGoogleChartsLoaded);
function onGoogleChartsLoaded() {
googleChartsLoaded = true;
// Handle the case when the report is complete before Google Charts is loaded
if (pivotTableReportComplete) {
createChart();
}
}
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivot.off("reportComplete");
pivotTableReportComplete = true;
// Handle the case when Google Charts is loaded before the report is complete
if (googleChartsLoaded) {
createChart();
}
}
function createChart() {
pivot.googlecharts.getData(
{
type: "column",
},
// Function called when data for the chart is ready
drawColumnChart,
// Function called on report changes (filtering, sorting, etc.)
drawColumnChart,
);
}
function drawColumnChart(chartConfig) {
let data = google.visualization.arrayToDataTable(chartConfig.data);
const columnChartContainer = document.getElementById("googlechart-container");
const chart = new google.visualization.ColumnChart(columnChartContainer);
chart.draw(data);
}
</script>
</body>
</html>
Interact with the following sample where WebDataRocks Pivot Table is integrated with Google Charts to see how they work together: