Integration with Google Charts
Read this tutorial to learn how to integrate the WebDataRocks reporting tool with Google Charts.
Supported chart types
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 Vue data visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.
Step 1. Add WebDataRocks to your project
Step 1.1. Complete the Quick start guide. Your code of the component with WebDatarocks should look similar to the following:
<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
</script>
<template>
<div>
<Pivot
toolbar
/>
</div>
</template>
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:
<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
const report = {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
};
</script>
<template>
<div>
<Pivot
toolbar
v-bind:report="report"
/>
</div>
</template>
The fields you’ve specified in the report will be shown on the chart.
Step 2. Get a reference to the WebDataRocks instance
Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.
Get the reference as follows:
<script setup>
// ...
import { ref } from "vue";
const pivotRef = ref(null);
// ...
</script>
<template>
<div>
<Pivot
ref="pivotRef"
toolbar
v-bind:report="report"
/>
</template>
Now it’s possible to interact with the component through pivotRef.value.webdatarocks.
Step 3. Add Google Charts
Step 3.1. Download the Google Charts wrapper for Vue:
npm install vue-google-charts
Step 3.2. Import Google Charts for Vue 2:
import { GChart } from "vue-google-charts/legacy";
Step 3.3. Now you can add a chart to your component. Let’s create a column chart:
<template>
<div>
<Pivot
ref="pivotRef"
toolbar
v-bind:report="report"
/>
<GChart
type="ColumnChart"
/>
</div>
</template>
If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts yet. We will connect them in the next step.
Step 4. Show the data from the pivot table on the chart
Step 4.1. Create a reactive variable to store data for the chart (e.g., chartData):
const chartData = ref([]);
The chartData variable is now empty, but soon we’ll fill it with data from our component.
Step 4.2. Import the WebDataRocks Connector for Google Charts:
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";
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 4.3. 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:
<script setup>
// ...
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivotRef.value.webdatarocks.off("reportComplete");
createChart();
}
</script>
<template>
<div>
<Pivot
ref="pivotRef"
toolbar
v-bind:report="report"
v-bind:reportcomplete="onReportComplete"
/>
<GChart
type="ColumnChart"
/>
</div>
</template>
Now the chart will be created only when the data is loaded and the report is ready.
Step 4.4. Implement the createChart() function. It will use the googlecharts.getData() method from the Connector:
function createChart() {
pivotRef.value.webdatarocks.googlecharts.getData(
{
type: "column",
},
// Function called when data for the chart is ready
(chartConfig) => chartData.value = chartConfig.data,
// Function called on report changes (filtering, sorting, etc.)
(chartConfig) => chartData.value = chartConfig.data
);
}
Notice the type configuration — it must correspond to the chart type specified in step 3.3 (in our case, it is "column").
Step 4.5. Finally, pass the data to the chart:
<GChart
type="ColumnChart"
v-bind:data="chartData"
/>
Since the chartData is reactive and is assigned using the v-bind directive, the chart will be re-rendered each time the chartData’s value is updated. As a result, all your changes to the WebDataRocks report will be reflected on the chart.
Step 5. Run the project
Run your project with the following command:
npm run dev
Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Google Charts.
Now try experimenting: filter the data, change the measures and the aggregation functions, and see how the results are reflected on the chart.
To learn more about configurations available for Google Charts, please refer to the Google Charts documentation.
Check out the full code
After completing this tutorial, the full code of the component should look as follows:
<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
import { ref } from "vue";
import { GChart } from "vue-google-charts/legacy";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";
let pivotRef = ref(null);
const chartData = ref([]);
const report = {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
};
function onReportComplete() {
// Unsubscribing from reportcomplete
// We need it only to track the initialization of WebDataRocks
pivotRef.value.webdatarocks.off("reportComplete");
createChart();
}
function createChart() {
pivotRef.value.webdatarocks.googlecharts.getData(
{
type: "column",
},
// Function called when data for the chart is ready
(chartConfig) => chartData.value = chartConfig.data,
// Function called on report changes (filtering, sorting, etc.)
(chartConfig) => chartData.value = chartConfig.data
);
}
</script>
<template>
<div>
<Pivot
ref="pivotRef"
toolbar
v-bind:report="report"
v-bind:reportcomplete="onReportComplete"
/>
<GChart
type="ColumnChart"
v-bind:data="chartData"
/>
</div>
</template>