Get Free Trial
List of all demos

JSON/CSV based Angular Pivot Table

JSON or CSV files and get right to analysing them with your Angular pivot grid.


    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: {
          type: "csv",
          filename: "https://cdn.flexmonster.com/data/happyness.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Region",
            },
            {
              uniqueName: "Country or region",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Year",
            },
          ],
          measures: [
            {
              uniqueName: "Score",
              aggregation: "median",
              grandTotalCaption: "Average Happyness",
            },
          ],
        },
        conditions: [
          {
            formula: "AND(#value > 7.3, #value < 10)",
            format: {
              backgroundColor: "#f0c63e",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "AND(#value  > 0, #value < 4.5)",
            format: {
              backgroundColor: "#f29c8d",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
    
        formats: [
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      onOpenLocalCSV() {
        this.pivot.flexmonster.connectTo({
          type: "csv",
          browseForFile: true,
        });
      }
    
      onLoadRemoteCSV() {
        let filename = prompt(
          "Open remote CSV",
          "https://cdn.flexmonster.com/data/data.csv"
        );
        if (filename != null) {
          this.pivot.flexmonster.connectTo({
            type: "csv",
            filename: filename,
          });
        }
      }
    
      onOpenLocalJSON() {
        this.pivot.flexmonster.connectTo({
          type: "json",
          browseForFile: true,
        });
      }
    
      onLoadRemoteJSON() {
        let filename = prompt(
          "Open remote JSON",
          "https://cdn.flexmonster.com/data/data.json"
        );
        if (filename != null) {
          this.pivot.flexmonster.connectTo({
            type: "json",
            filename: filename,
          });
        }
      }
    
      customizeCellFunction(
        cell: Flexmonster.CellBuilder,
        data: Flexmonster.CellData
      ) {
        if (data.isGrandTotalColumn) {
          if ((data.value as number) < 5 && (data.value as number) >= 0) {
            cell.text = (data.value as number).toPrecision(3) + " ☹️";
          } else if ((data.value as number) >= 5 && (data.value as number) < 7) {
            cell.text = (data.value as number).toPrecision(3) + " 🙂";
          } else if ((data.value as number) >= 7 && (data.value as number) < 10) {
            cell.text = (data.value as number).toPrecision(3) + " 😃";
          }
        }
      }
    }
    
    <button (click)="onOpenLocalCSV()">Open local CSV</button>
    <button (click)="onLoadRemoteCSV()">Load remote CSV</button>
    <button (click)="onOpenLocalJSON()">Open local JSON</button>
    <button (click)="onLoadRemoteJSON()">Load remote JSON</button>
    
    <fm-pivot
      #pivot
      [toolbar]="true"
      [height]="600"
      [report]="report"
      [customizeCell]="customizeCellFunction">
    </fm-pivot>
    

    You can connect Flexmonster Pivot to your local, remote, or server-side generated JSON and CSV files and create new data visualisation with Angular in minutes.

    Use the Mapping Object to clarify how your Angular reporting tool should interpret and display the fields from the file.

    We have made Flexmonster super flexible and optimized to work with a lot of data extremely fast on the client side. If your data files are more than 1GB we suggest using one of our data source solutions – Flexmonster Data Server. It’s easy to configure the server-side tool for data pre-processing that will kick-start your web reporting with Angular.