Angular Pivot Table with Google Charts

Flexmonster Pivot Table & Charts seamlessly integrates with Google Charts — a simple and powerful web service for data visualization. Using these two Angular data visualization tools together, you can achieve the best results in developing your reporting software.

Dashboard visualizations are a perfect instrument to assist in making data-driven decisions. With the help of Angular reporting libraries, end-users can get a complete overview of all information, highlight essential insights, and consider all metrics in comparison and at different levels by expanding and collapsing the data.

Income, Expenses, and Profit

The entire process is straightforward: add the components to the web page, connect the pivot to the data source to aggregate it, and then pass everything to the charts via a special Google Charts connector. Just a few steps and you receive a powerful Angular reporting application.

Top 5 Countries by Sales

Edit in JSfiddle Get Free Trial

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

import "flexmonster/lib/flexmonster.googlecharts.js";

declare let google: any;

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

  colors: string[] = [
    "#4cbf8b",
    "#e8734c",
    "#ffcd4c",
    "#9875e3",
    "#4c9eff",
    "#8acfc3",
    "#cd97e6",
    "#f1d34c",
    "#65d2e7",
  ];

  pivotTableReportComplete = false;
  googleChartsLoaded = false;

  public report: Flexmonster.Report = {
    dataSource: {
      type: "json",
      filename: "data/demos/googlecharts-demo-data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Income",
          formula: 'sum("Sales") * sum("Unit Price")',
          individual: true,
          caption: "Income",
          format: "currency",
        },
        {
          uniqueName: "Sales",
          active: false,
          format: "currency",
        },
        {
          uniqueName: "Expenses",
          format: "currency",
        },
        {
          uniqueName: "Profit",
          formula: 'sum("Income") - sum("Expenses")',
          individual: true,
          caption: "Profit",
          format: "currency",
        },
      ],
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
      },
      {
        name: "currency",
        currencySymbol: "$",
      },
    ],
    options: {
      grid: {
        showHeaders: false,
      },
      showAggregationLabels: false,
    },
  };

  constructor() {}

  ngOnInit(): void {
    google.charts.load("current", {
      packages: ["corechart", "bar"],
    });
    google.charts.setOnLoadCallback(() => this.onGoogleChartsLoaded());
  }

  onReportComplete() {
    this.pivot.flexmonster.off("reportcomplete");
    this.pivotTableReportComplete = true;
    this.createColumnChart();
    this.createPieChart();
  }

  onGoogleChartsLoaded() {
    this.googleChartsLoaded = true;
    if (this.pivotTableReportComplete) {
      this.createColumnChart();
      this.createPieChart();
    }
  }

  createColumnChart() {
    if (this.googleChartsLoaded) {
      this.pivot.flexmonster.googlecharts!.getData(
        {
          type: "column",
        },
        this.drawColumnChart.bind(this),
        this.drawColumnChart.bind(this)
      );
    }
  }

  drawColumnChart(_data: any) {
    let data = google.visualization.arrayToDataTable(_data.data);

    let formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      prefix: "$",
    });

    for (let i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnType(i) === "number") {
        formatter.format(data, i);
      }
    }

    let options = {
      fontName: "SERIF TYPEFACE",
      chartArea: {
        height: "100%",
      },
      height: 300,
      colors: this.colors,
    };

    const columnChartContainer = document.getElementById("googlechart-column-container");
    const chart = new google.charts.Bar(columnChartContainer);
    chart.draw(data, options);
  }

  createPieChart() {
    if (this.googleChartsLoaded) {
      this.pivot.flexmonster.googlecharts!.getData(
        {
          type: "pie",
          slice: {
            rows: [
              {
                uniqueName: "Country",
                filter: {
                  measure: {
                    uniqueName: "Sales",
                  },
                  query: {
                    top: 5,
                  },
                },
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Sales",
              },
            ],
          },
        },
        this.drawPieChart.bind(this),
        this.drawPieChart.bind(this)
      );
    }
  }

  drawPieChart(_data: any) {
    let data = google.visualization.arrayToDataTable(_data.data);

    let options = {
      legend: {
        position: "bottom",
      },
      height: 300,
      pieSliceText: "none", // Remove text from pie slices
      pieHole: 0.35,
      chartArea: {
        height: "85%",
        top: 0,
      },
      pieSliceBorderColor: "none",
      colors: this.colors,
    };

    const pieChartContainer = document.getElementById("googlechart-pie-container");
    const chart = new google.visualization.PieChart(pieChartContainer);
    chart.draw(data, options);
  }
}

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

<div class="demo-box">
  <div class="demo-title"><strong>Income, Expenses, and Profit</strong></div>
  <div id="googlechart-column-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title"><strong>Top 5 Countries by Sales</strong></div>
  <div id="googlechart-pie-container"></div>
</div>

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 20px 20px 20px 20px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
}

.demo-title {
  font-size: 18px;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555;
}

#pivot {
  margin-bottom: 20px;
}

/** For the background color of Google Charts 
 * (for material design charts, it can't be changed via options, only via CSS)
 */
#googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) {
  fill: #fafafa !important;
}

#googlechart-pie-container > div > div:nth-child(1) > div > svg > rect {
  fill: #fafafa !important;
}

/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

#googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Flexmonster & Google Charts Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Loading Google Charts -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

Dashboards with Flexmonster and Google Charts allow end-users to feel the full power of real-time Angular web analytics as charts instantly react to any changes on the grid.

With our integration with the Google Charts guide, you can quickly configure a dashboard with Flexmonster and Google Charts and embed it into your Angular data visualisation project.

With FusionCharts Themes

Angular Pivot Table with Google Charts

See our live examples