Get Free Trial
List of all demos

Flexmonster Pivot Charts for Angular

Flexmonster Pivot Charts for Angular is an additional way to visualize aggregated data from the grid in the form of different charts to get another point of view.


    import { Component, OnInit, ViewChild } from "@angular/core";
    import { FlexmonsterPivot } from "ng-flexmonster";
    
    @Component({
      selector: "pivotComponent",
      templateUrl: "./pivot.component.html",
      styleUrls: ["./pivot.component.css"],
    })
    export class PivotComponent implements OnInit {
      @ViewChild("pivot") pivot!: FlexmonsterPivot;
    
      public report: Flexmonster.Report = {
        dataSource: {
          filename: "data/demos/pivot-charts-demo-data.json",
        },
        options: {
          viewType: "charts",
          chart: {
            type: "column",
          },
          configuratorActive: false,
        },
        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",
            },
          ],
        },
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      showGrid() {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
    
        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",
            },
          },
        ];
    
        this.pivot.flexmonster.setReport(pivotReport);
        this.pivot.flexmonster.setOptions({
          viewType: "grid",
        });
    
        this.pivot.flexmonster.refresh();
      }
    
      showColumnChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    
      showLineChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster?.setReport(pivotReport);
      }
    
      showStackedColumn(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    
      showBarChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    
      showPieChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    
      showScatterChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    
      showColumnLineChart(type: string) {
        let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
        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: type,
          },
        };
        this.pivot.flexmonster.setReport(pivotReport);
      }
    }
    
    <button (click)="showGrid()">Grid</button>
    <button (click)="showColumnChart('column')">Column</button>
    <button (click)="showBarChart('bar_h')">Bar</button>
    <button (click)="showLineChart('line')">Line</button>
    <button (click)="showScatterChart('scatter')">Scatter</button>
    <button (click)="showPieChart('pie')">Pie</button>
    <button (click)="showColumnLineChart('column_line')">Combo</button>
    <button (click)="showStackedColumn('stacked_column')">Stacked</button>
    
    <fm-pivot
      #pivot
      [height]="500"
      [componentFolder]="'https://cdn.flexmonster.com/'"
      [report]="report">
    </fm-pivot>
    
    #fm-pivot-view .fm-chart .fm-circle {
      r: 8;
    }
    
    /* Charts 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;
    }
    
    .btn-route {
      margin: 5px 0;
      padding: 10px 10px;
      border: 2px solid #df3800;
      background: #fff;
      color: #df3800;
      white-space: nowrap;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-block;
      font-weight: normal;
      font-size: 14px;
      text-align: center;
      align-items: flex-start;
      box-sizing: border-box;
      text-decoration: none;
      font: 14px Arial;
    }
    
    .btn-route:hover,
    .btn-route:focus {
      outline: none;
      border: 2px solid #df3800;
      background: #df3800;
      color: #fff;
    }
    

    Our drillable Angular pivot charts have the same functionality as the pivot grid: you can expand and collapse the data, filter the members and change the chart configurations on the fly.

    The charts also have customizable tooltips and legend information to give a better user experience.

    Our Angular reporting component has the following chart types:

    • column chart,
    • bar chart,
    • line chart,
    • scatter chart,
    • pie chart,
    • stacked column chart,
    • combined column,
    • line charts.

    Switch between different chart types and pivot tables via UI or API calls to see the data from another angle and get even more insights.