Vue Pivot Table with Highcharts

Integrate the Flexmonster pivot table with the Highcharts library in the Vue.js framework.

Use the multi-platform charting library together with pivot functionality for insightful business reports. Create a ready-to-use dashboard for your Vue project following an intelligible Integration with Highcharts guide.

Requests vs Answered Calls

The dashboard shows all core metrics that help you discover new insights. Link up the pivot grid with charts, slice and dice the data any way you want, and immediately see the updated result on the charts.

Revenue vs Support Cost

Customer Satisfaction

Edit in JSfiddle Get Free Trial

<template>
  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    height="300"
    licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
    v-bind:report="report"
    v-bind:reportcomplete="reportcomplete"
  />

  <div class="demo-box">
    <div class="demo-title">Requests vs Answered Calls</div>
    <div id="highcharts-container"></div>
  </div>

  <div class="demo-box">
    <div class="demo-title">Revenue vs Support Cost</div>
    <div id="highcharts-column-container"></div>
  </div>

  <div class="demo-box">
    <div class="demo-title">Customer Satisfaction</div>
    <div id="highcharts-pie-container"></div>
  </div>
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

import "flexmonster/lib/flexmonster.highcharts";
import Highcharts from "highcharts";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/data/demos/highcharts-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Date.Month",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Requests",
              aggregation: "sum",
            },
            {
              uniqueName: "Answered Calls",
              aggregation: "sum",
            },
            {
              uniqueName: "Revenue",
              aggregation: "sum",
              format: "currency",
              active: false,
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Answered Calls",
                aggregation: "sum",
              },
            },
          },
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
          },
          {
            name: "currency",
            decimalSeparator: ".",
            decimalPlaces: 2,
            currencySymbol: "$",
          },
        ],
        options: {
          showHeaders: false,
        },
      },
    };
  },
  methods: {
    reportcomplete() {
      this.$refs.pivot.flexmonster.off("reportcomplete");
      this.setGlobalChartsOptions();
      this.createLineChart();
      this.createColumnChart();
      this.createPieChart();
    },
    setGlobalChartsOptions() {
      Highcharts.setOptions({
        colors: [
          "#4cbf8b",
          "#e8734c",
          "#ffcd4c",
          "#9875e3",
          "#4c9eff",
          "#8acfc3",
          "#cd97e6",
          "#f1d34c",
          "#65d2e7",
        ],
        lang: {
          thousandsSep: ",",
        },
        chart: {
          plotBackgroundColor: "#fafafa",
          backgroundColor: "#fafafa",
          style: {
            fontFamily: "Serif Typeface",
          },
        },
      });
    },
    createLineChart() {
      this.$refs.pivot.flexmonster.highcharts.getData(
        {
          type: "line",
        },
        this.drawLineChart,
        this.updateLineChart,
      );
    },
    drawLineChart(chartData) {
      chartData.xAxis.title.enabled = false;
      chartData.xAxis.type = "datetime";
      Highcharts.chart("highcharts-container", chartData);
    },
    updateLineChart(chartData) {
      this.drawLineChart(chartData);
    },
    createColumnChart() {
      this.$refs.pivot.flexmonster.highcharts.getData(
        {
          type: "column",
          slice: {
            rows: [
              {
                uniqueName: "Date.Month",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Revenue",
                aggregation: "sum",
              },
              {
                uniqueName: "Support Cost",
                aggregation: "sum",
              },
            ],
          },
        },
        this.drawColumnChart,
        this.updateColumnChart,
      );
    },
    drawColumnChart(chartData, rawData) {
      let currencyFormat = rawData.meta.formats.find(
        (format) => format.name == "currency",
      );
      chartData.xAxis.title.enabled = false;
      chartData.legend = {
        enabled: false,
      };
      if (chartData.yAxis == undefined) chartData.yAxis = {};

      for (let i = 0; i < chartData.yAxis.length; i++) {
        chartData.yAxis[i].labels = {
          format: pivot.highcharts.getAxisFormat(currencyFormat),
        };
      }

      for (let i = 0; i < chartData.series.length; i++) {
        chartData.series[i].tooltip = {
          pointFormat:
            "{series.name}: <b>" +
            pivot.highcharts.getPointYFormat(currencyFormat) +
            "</b><br/>",
        };
      }
      chartData.xAxis.type = "datetime";
      Highcharts.chart("highcharts-column-container", chartData);
    },
    updateColumnChart(chartData) {
      // Here you can add your own logic for updating the chart
    },
    createPieChart() {
      this.$refs.pivot.flexmonster.highcharts.getData(
        {
          type: "pie",
          slice: {
            rows: [
              {
                uniqueName: "Customer Satisfaction",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Answered Calls",
                aggregation: "sum",
              },
            ],
          },
        },
        this.drawPieChart,
        this.updatePieChart,
      );
    },
    drawPieChart(chartData) {
      Highcharts.chart("highcharts-pie-container", chartData);
    },
    updatePieChart(chartData) {
      // Here you can add your own logic for updating the chart
    },
  },
};

</script>

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 40px 30px 30px 30px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  margin-top: 40px;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #555;
}

Empower your Vue.js application with interactive features of the pivot table and different chart types.

With amCharts With FusionCharts

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?

Changes to Flexmonster Software License Agreement

Vue Pivot Table with Highcharts

For the best experience

See our live examples

Frequently asked questions