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 easily request data from the Vue pivot table and preprocess it to the applicable format for the required type of chart.
Combining these two libraries you will get an effective tool to manage data, get insights and highlight 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"><strong>Income, Expenses, and Profit</strong></div>
<div id="googlechart-column-container" ref="columnChart"></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Top 5 Countries by Sales</strong></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: "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 made a bunch of examples and tutorial on How to integrate Google Charts with Flexmonster, that will help you to do it without a hitch.