We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Vue Pivot Table with Highcharts

Integrate Flexmonster Pivot table with Highcharts library on the base of Vue.js framework.

Use multi-platform charting library together with pivot functionality to create 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 to discover new insights. Link up pivot grid with charts, slice & dice the data any way you want to - 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"><strong>Requests vs Answered Calls</strong></div>
        <div id="highcharts-container"></div>
      </div>
    
      <div class="demo-box">
        <div class="demo-title"><strong>Revenue vs Support Cost</strong></div>
        <div id="highcharts-column-container"></div>
      </div>
    
      <div class="demo-box">
        <div class="demo-title"><strong>Customer Satisfaction</strong></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: "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 the interactive features of the pivot table and different chart types.