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 Connector for Highcharts. 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

Edit in JSfiddle Get Free Trial

import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

import "flexmonster/lib/flexmonster.highcharts.js";
import * as Highcharts from 'highcharts';


@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  @ViewChild("pivot") pivot!: FlexmonsterPivot;

  public report: Object = {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/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,
    },
  };

  constructor() {}

  ngOnInit(): void {}

  onReportComplete() {
    this.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.pivot.flexmonster.highcharts?.getData(
      {
        type: "line",
      },
      this.drawLineChart,
      this.updateLineChart
    );
  }

  drawLineChart(chartData: any) {
    chartData.xAxis.title.enabled = false;
    chartData.xAxis.type = "datetime";
    Highcharts.chart("highcharts-container", <Highcharts.Options>chartData);
  }

  updateLineChart(chartData: any) {
    this.drawLineChart(chartData);
  }

  createColumnChart() {
    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",
            },
          ],
        },
      },
      this.drawColumnChart,
      this.updateColumnChart
    );
  }

  drawColumnChart(chartData: any, rawData: any) {
    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", <Highcharts.Options>chartData);
  }

  updateColumnChart(chartData: any) {
    // Here you can add your own logic for updating the chart
  }

  createPieChart() {
    this.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: any) {
    Highcharts.chart("highcharts-pie-container", <Highcharts.Options>chartData);
  }

  updatePieChart(chartData: any) {
    // Here you can add your own logic for updating the chart
  }
}

<fm-pivot
  #pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [height]="300"
  [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
  [report]="report"
  (reportcomplete)="onReportComplete()">
</fm-pivot>

<div class="demo-box">
  <div class="demo-title">Requests vs Answered Calls</div>
  <div id="highcharts-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Revenue vs Support Cost</div>
  <div id="highcharts-column-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Customer Satisfaction</div>
  <div id="highcharts-pie-container"></div>
</div>

.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;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #555;
}

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.

With amCharts With FusionCharts

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

Angular Pivot Table with Highcharts

For the best experience

See our live examples

Frequently asked questions