Integrate Flexmonster Pivot Table with Google Charts — a rich gallery of free interactive charts for projects.
Add the pivot grid and charts to the application built with Vue. With a special Connector for Google Charts, you can easily request data from the Vue pivot table and preprocess it to the format required by the chosen type of chart.
Combining these two libraries will give you an effective tool for managing data, gaining insights, and highlighting the important.
<template>
<Pivot
id="pivot"
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
height="350"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="report"
v-bind:reportcomplete="onReportComplete"
/>
<div class="demo-box">
<div class="demo-title">Income, Expenses, and Profit</div>
<div id="googlechart-column-container" ref="columnChart"></div>
</div>
<div class="demo-box">
<div class="demo-title">Top 5 Countries by Sales</div>
<div id="googlechart-pie-container" ref="pieChart"></div>
</div>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.googlecharts";
const colors = [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
];
google.charts.load("current", {
packages: ["corechart", "bar"],
});
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/googlecharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Income",
formula: 'sum("Sales") * sum("Unit Price")',
individual: true,
caption: "Income",
format: "currency",
},
{
uniqueName: "Sales",
active: false,
format: "currency",
},
{
uniqueName: "Expenses",
format: "currency",
},
{
uniqueName: "Profit",
formula: 'sum("Income") - sum("Expenses")',
individual: true,
сaption: "Profit",
format: "currency",
},
],
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
options: {
grid: {
showHeaders: false,
},
showAggregationLabels: false,
},
},
googleChartsLoaded: false,
pivotTableReportComplete: false,
};
},
methods: {
onReportComplete() {
this.$refs.pivot.flexmonster.off("reportcomplete");
this.pivotTableReportComplete = true;
},
createColumnChart() {
this.$refs.pivot.flexmonster.googlecharts.getData(
{
type: "column",
},
this.drawColumnChart,
this.drawColumnChart,
);
},
drawColumnChart(_data) {
let data = google.visualization.arrayToDataTable(_data.data);
let formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: "$",
});
for (let i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnType(i) === "number") {
formatter.format(data, i);
}
}
let options = {
fontName: "SERIF TYPEFACE",
chartArea: {
height: "100%",
},
height: 300,
colors: colors,
};
const chart = new google.charts.Bar(this.$refs.columnChart);
chart.draw(data, options);
},
createPieChart() {
this.$refs.pivot.flexmonster.googlecharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Country",
filter: {
measure: {
uniqueName: "Sales",
},
query: {
top: 5,
},
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Sales",
},
],
},
},
this.drawPieChart,
this.drawPieChart,
);
},
drawPieChart(_data) {
let data = google.visualization.arrayToDataTable(_data.data);
let options = {
legend: {
position: "bottom",
},
height: 300,
pieSliceText: "none", // Remove text from pie slices
pieHole: 0.35,
chartArea: {
height: "85%",
top: 0,
},
pieSliceBorderColor: "none",
colors: colors,
};
const chart = new google.visualization.PieChart(this.$refs.pieChart);
chart.draw(data, options);
},
},
mounted() {
google.charts.setOnLoadCallback(() => (this.googleChartsLoaded = true));
},
created() {
const unwatch = this.$watch(
() => [this.googleChartsLoaded, this.pivotTableReportComplete],
() => {
if (this.googleChartsLoaded && this.pivotTableReportComplete) {
this.createColumnChart();
this.createPieChart();
unwatch();
}
},
);
},
};
</script>
.demo-box {
background-color: #fafafa;
position: relative;
padding: 20px 20px 20px 20px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
color: #555;
}
#pivot {
margin-bottom: 20px;
}
/** For the background color of Google Charts
* (for material design charts, it can't be changed via options, only via CSS)
*/
#googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) {
fill: #fafafa !important;
}
#googlechart-pie-container > div > div:nth-child(1) > div > svg > rect {
fill: #fafafa !important;
}
/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
#googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexmonster & Google Charts Demo</title>
<!-- Loading Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Use Flexmonster Pivot with Google Charts to embed an efficient dashboard into your Vue.js application. We created a bunch of examples and a tutorial on integrating Google Charts with Flexmonster that will help you do it without a hitch.