List of all demos

Flexmonster Pivot Charts for Vue

Flexmonster Pivot Charts — is one more option to visualize aggregated data and highlight a particular subset of data.


    <template>
      <button v-on:click="showGrid">Grid</button>
      <button v-on:click="showColumnChart">Column</button>
      <button v-on:click="showBarChart">Bar</button>
      <button v-on:click="showLineChart">Line</button>
      <button v-on:click="showScatterChart">Scatter</button>
      <button v-on:click="showPieChart">Pie</button>
      <button v-on:click="showColumnLineChart">Combo</button>
      <button v-on:click="showStackedColumn">Stacked</button>
    			
      <Pivot
        ref="pivot"
        componentFolder="https://cdn.flexmonster.com/"
        height="500"
        v-bind:report="report"
      />
    </template>
    
    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "json",
              filename: "data/demos/pivot-charts-demo-data.json",
            },
            options: {
              viewType: "charts",
              chart: {
                type: "column",
              },
            },
            slice: {
              rows: [
                {
                  uniqueName: "Order Date.Month",
                },
              ],
              columns: [
                {
                  uniqueName: "City",
                  filter: {
                    measure: {
                      uniqueName: "Orders",
                      aggregation: "sum",
                    },
                    query: {
                      top: 5,
                    },
                  },
                },
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
              ],
            },
          },
        };
      },
      methods: {
        showGrid() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            reportFilters: [
              {
                uniqueName: "Order Date.Year",
              },
              {
                uniqueName: "Order Date.Month",
              },
              {
                uniqueName: "Order Date.Day",
              },
            ],
            rows: [
              {
                uniqueName: "Payment Type",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
              {
                uniqueName: "Referring Site",
              },
            ],
            measures: [
              {
                uniqueName: "Revenue",
                formula: 'sum("Amount") * sum("Price")',
                individual: true,
                caption: "Revenue",
                format: "currency",
              },
            ],
          };
          pivotReport.conditions = [
            {
              formula: "#value < 45000",
              measure: "Revenue",
              format: {
                backgroundColor: "#df3800",
                color: "#fff",
                fontFamily: "Arial",
                fontSize: "12px",
              },
            },
            {
              formula: "#value > 400000",
              measure: "Revenue",
              format: {
                backgroundColor: "#00a45a",
                color: "#fff",
                fontFamily: "Arial",
                fontSize: "12px",
              },
            },
          ];
          pivotReport.options = {
            viewType: "grid",
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showColumnChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Order Date.Month",
              },
            ],
            columns: [
              {
                uniqueName: "City",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                    aggregation: "sum",
                  },
                  query: {
                    top: 5,
                  },
                },
              },
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            ],
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "column",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showLineChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Order Date.Year",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
              {
                uniqueName: "Referring Site",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                    aggregation: "sum",
                  },
                  query: {
                    top: 2,
                  },
                },
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            ],
            sorting: {
              row: {
                type: "desc",
                tuple: [],
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
              },
            },
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "line",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showStackedColumn() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Payment Type",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                  },
                  query: {
                    top: 3,
                  },
                },
              },
            ],
            columns: [
              {
                uniqueName: "Referring Site",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                  },
                  query: {
                    top: 3,
                  },
                },
              },
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            ],
            sorting: {
              column: {
                type: "desc",
                tuple: [],
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
              },
            },
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "stacked_column",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showBarChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Referring Site",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                    aggregation: "sum",
                  },
                  query: {
                    top: 6,
                  },
                },
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
              {
                uniqueName: "Payment Type",
                filter: {
                  members: ["payment type.[debit card]", "payment type.[invoice]"],
                },
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            ],
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "bar_h",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showPieChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "City",
                filter: {
                  measure: {
                    uniqueName: "Revenue",
                  },
                  query: {
                    top: 5,
                  },
                },
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Revenue",
                formula: 'sum("Amount") * sum("Price")',
                individual: true,
                format: "currency",
                caption: "Revenue",
              },
            ],
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "pie",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showScatterChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Order Date.Year",
              },
            ],
            columns: [
              {
                uniqueName: "City",
                filter: {
                  measure: {
                    uniqueName: "Orders",
                    aggregation: "sum",
                  },
                  query: {
                    top: 3,
                  },
                },
              },
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            ],
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "scatter",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
        showColumnLineChart() {
          let pivotReport = this.$refs.pivot.flexmonster.getReport();
          pivotReport.slice = {
            rows: [
              {
                uniqueName: "Order Date.Year",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Orders",
                aggregation: "sum",
              },
              {
                uniqueName: "Revenue",
                formula: 'sum("Amount") * sum("Price")',
                individual: true,
                caption: "Revenue",
                format: "currency",
              },
            ],
          };
          pivotReport.options = {
            viewType: "charts",
            chart: {
              type: "column_line",
            },
          };
          this.$refs.pivot.flexmonster.setReport(pivotReport);
        },
      },
    };
    </script>
    
    #fm-pivot-view .fm-chart .fm-circle {
      r: 8;
    }
    
    /* Chart style  */
    .fm-charts-color-1 {
      fill: rgb(0, 164, 90) !important;
    }
    
    .fm-charts-color-2 {
      fill: rgb(223, 56, 0) !important;
    }
    
    .fm-charts-color-3 {
      fill: rgb(255, 184, 0) !important;
    }
    
    .fm-charts-color-4 {
      fill: rgb(109, 59, 216) !important;
    }
    
    .fm-charts-color-5 {
      fill: rgb(0, 117, 255) !important;
    }
    
    #fm-pivot-view .fm-bar,
    #fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
    #fm-pivot-view .fm-line,
    #fm-pivot-view .fm-arc path,
    #fm-pivot-view .fm-bar-stack,
    #fm-pivot-view .fm-scatter-point {
      opacity: 70% !important;
    }
    
    #fm-yAxis-label,
    #fm-xAxis > text,
    #fm-yAxis > text {
      display: none;
    }
    

    After you add our web component into your Vue project you can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart's segments and control the legend's elements.

    Use pivot charts to show the pivot data in graphical format, using 10 charts types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and a combination of column and line chart.

    Our drillable pivot charts are built-in so you can change you report dynamically switching between grid & charts views via UI or API calls.