Vue Pivot Table with Google Charts

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.

Income, Expenses, and Profit

Combining these two libraries will give you an effective tool for managing data, gaining insights, and highlighting the important.

Top 5 Countries by Sales

Edit in JSfiddle Get Free Trial

<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;
  font-weight: 600;
  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.

With FusionCharts Themes

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Vue Pivot Table with Google Charts

For the best experience

See our live examples

Frequently asked questions