Get Free Trial
List of all demos

Angular Pivot Table with Highcharts

Flexmonster Pivot Table & Charts seamlessly integrates with Highcharts — a flexible and easy-to-use software library for charting.

This Angular pivot table and charts dashboard represents the data of the customer support service visualizing all the critical productivity metrics and KPIs.

The best way to achieve effective reporting is to use dashboards with different types of visualization. Flexmonster and Highcharts integrate very easily and quickly with Angular and form a super convenient stack to create perfect Angular data visualization software.

Requests vs Answered Calls

Pivot the data in your Angular data grid and catch all the updates on the charts immediately, thanks to our special Highchart connector. Compare all the metrics and KPIs and analyze the details by drilling through the data on the grid or charts.

Revenue vs Support Cost
Customer Satisfaction

    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: Object = {
        dataSource: {
          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",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Answered Calls",
                aggregation: "sum",
              },
            },
          },
        },
        options: {
          showHeaders: false,
        },
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      customizeToolbar(toolbar: Flexmonster.Toolbar) {
        toolbar.showShareReportTab = true;
      }
    
      createComboChart() {
        this.pivot.flexmonster.highcharts?.getData(
          {
            type: "line",
          },
          (data: any) => {
            data.xAxis.title.enabled = false;
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.xAxis.type = "datetime";
            data.title.text = "Requests vs Answered Calls";
            data.subtitle = {
              text: "over months",
            };
            Highcharts.setOptions({
              colors: [
                "#ff3b1d",
                "#00b370",
                "#4f9da6",
                "#FF6B6B",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-container", <Highcharts.Options>data);
          },
          (data: any) => {
            data.xAxis.title.enabled = false;
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.xAxis.type = "datetime";
            data.title.text = "Requests vs Answered Calls";
            data.subtitle = {
              text: "over months",
            };
            Highcharts.setOptions({
              colors: [
                "#ff3b1d",
                "#00b370",
                "#4f9da6",
                "#FF6B6B",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-container", <Highcharts.Options>data);
          }
        );
      }
      createBarChart() {
        this.pivot.flexmonster.highcharts?.getData(
          {
            type: "column",
            slice: {
              rows: [
                {
                  uniqueName: "Date.Month",
                },
              ],
              columns: [
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Revenue",
                  aggregation: "sum",
                },
                {
                  uniqueName: "Support Cost",
                  aggregation: "sum",
                },
              ],
            },
          },
          (data: any) => {
            data.xAxis.title.enabled = false;
            data.legend = {
              enabled: false,
            };
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.xAxis.type = "datetime";
            data.title.text = "Revenue vs Support Cost";
            data.subtitle = {
              text: "over months",
            };
            Highcharts.setOptions({
              colors: [
                "#00983e",
                "#ff9000",
                "#4f9da6",
                "#FF6B6B",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-bar-container", <Highcharts.Options>data);
          },
          (data: any) => {
            data.xAxis.title.enabled = false;
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.xAxis.type = "datetime";
            data.title.text = "Requests vs Answered Calls";
            data.subtitle = {
              text: "over months",
            };
            Highcharts.setOptions({
              colors: [
                "#ff3b1d",
                "#00b370",
                "#4f9da6",
                "#FF6B6B",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-bar-container", <Highcharts.Options>data);
          }
        );
      }
    
      createPieChart() {
        this.pivot.flexmonster.highcharts?.getData(
          {
            type: "pie",
            slice: {
              rows: [
                {
                  uniqueName: "Customer Satisfaction",
                },
              ],
              columns: [
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Answered Calls",
                  aggregation: "sum",
                },
              ],
            },
          },
          (data: any) => {
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.title.text = "Customer Satisfaction";
            Highcharts.setOptions({
              colors: [
                "#a9aaaa",
                "#ffa836",
                "#ff3b1d",
                "#00b370",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-pie-container", <Highcharts.Options>data);
          },
          (data: any) => {
            data.chart.style = {
              fontFamily: "SERIF TYPEFACE",
            };
            data.title = {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                textTransform: "uppercase",
              },
            };
            data.title.text = "Customer Satisfaction";
            Highcharts.setOptions({
              colors: [
                "#a9aaaa",
                "#ffa836",
                "#ff3b1d",
                "#00b370",
                "#64E572",
                "#FF9655",
                "#FFF263",
                "#6AF9C4",
              ],
            });
            Highcharts.chart("highcharts-pie-container", <Highcharts.Options>data);
          }
        );
      }
    
      onReady() {
        this.pivot.flexmonster.setReport(this.report);
      }
    
      onReportComplete() {
        this.pivot.flexmonster.off("reportcomplete");
        this.createComboChart();
        this.createBarChart();
        this.createPieChart();
      }
    }
    
    <fm-pivot #pivot [toolbar]="true" [height]="600" (ready)="onReady()" 
    [componentFolder]="'https://cdn.flexmonster.com/'"
    [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" 
    (reportcomplete)="onReportComplete()"></fm-pivot>
    
    <div style="margin-top: 50px;" id="highcharts-container"></div>
    <div style="margin-top: 30px;" id="highcharts-bar-container"></div>
    <div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-container"></div>
    

    Learn how to create a ready-to-use Angular reporting dashboard with embedded interactive features of the pivot table and charts by following the step-by-step integration with Highcharts guide. .