☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

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

    <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;
      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.