Flexmonster Pivot Charts for Angular

Flexmonster Pivot Charts for Angular is a great way to visualize aggregated data from the grid and get a different perspective on it.

Edit in JSfiddle Get Free Trial

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: {
      type: "json",
      filename: "https://cdn.flexmonster.com/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",
        },
      ],
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 0,
    }, {
      name: "currency",
      currencySymbol: "$",
      decimalPlaces: 2,
    }]
  };

  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",
        },
      },
    ];
    pivotReport.options = {
      viewType: "grid",
    };
    pivotReport.formats = [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 0,
    }, {
      name: "currency",
      currencySymbol: "$",
      decimalPlaces: 2,
    }];
    this.pivot.flexmonster.setReport(pivotReport);
  }

  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,
      },
    };
    pivotReport.formats = [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 0,
    }, {
      name: "currency",
      currencySymbol: "$",
      decimalPlaces: 2,
    }]
    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;
}

/* 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;
}

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
Combined column
Stacked column chart

Switch between different chart types and the pivot table view via UI or using API calls to see the data from another angle and gain even more insights.

One million rows Dashboard

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

Flexmonster Pivot Charts for Angular

For the best experience

See our live examples

Frequently asked questions