Get Free Trial
List of all demos

Dashboard in Angular

This Angular pivot grid example for healthcare data analysis shows how the pivot table can be used simultaneously with charts for real-time reporting in a dashboard view format.

Treatment Costs by Departments

By analyzing the same data in chart and grid form concurrently, you can gain more insights and empower your Angular reporting tool. Combine different types of visualization into a dashboard to reveal new analysis capabilities.

Overall Customer Satisfaction
Customer Satisfaction by Patient Status

You can create a dashboard with any amount of pivot charts and grids. To do it, just add multiple instances of Flexmonster, connect them to your data, and fastly create custom reports in your Angular data visualization tool.

Customer Satisfaction by Average Waiting Time

    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("pivot1") pivot1!: FlexmonsterPivot;
      @ViewChild("pivot2") pivot2!: FlexmonsterPivot;
      @ViewChild("pieChart") pieChart!: FlexmonsterPivot;
      @ViewChild("columnChart") columnChart!: FlexmonsterPivot;
      @ViewChild("barChart") barChart!: FlexmonsterPivot;
    
      public reportPivot1: Object = {
        dataSource: {
          filename: "data/dashboad-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Division",
            },
          ],
          columns: [
            {
              uniqueName: "Patient Status",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Treatment Cost",
              aggregation: "sum",
              format: "currency",
            },
          ],
        },
        conditions: [
          {
            formula: "#value < 6000",
            measure: "Treatment Cost",
            aggregation: "sum",
            format: {
              backgroundColor: "#00A45A",
              color: "#fff",
              fontFamily: "Arial",
              fontSize: "12px",
            },
            isTotal: false,
          },
          {
            formula: "#value > 12000",
            measure: "Treatment Cost",
            aggregation: "sum",
            format: {
              backgroundColor: "#df3800",
              color: "#fff",
              fontFamily: "Arial",
              fontSize: "12px",
            },
            isTotal: false,
          },
        ],
        options: {
          configuratorButton: false,
          drillThrough: false,
          timePattern: "m'h' ss'min'",
        },
        formats: [
          {
            name: "currency",
            currencySymbol: "$",
          },
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
        tableSizes: {
          columns: [
            {
              tuple: [],
              measure: {
                uniqueName: "Treatment Cost",
                aggregation: "sum",
              },
              width: 175,
            },
            {
              tuple: ["patient status.[inpatient]"],
              measure: {
                uniqueName: "Treatment Cost",
                aggregation: "sum",
              },
              width: 183,
            },
            {
              tuple: ["patient status.[outpatient]"],
              measure: {
                uniqueName: "Treatment Cost",
                aggregation: "sum",
              },
              width: 185,
            },
          ],
        },
      };
    
      public reportPivot2: Object = {
        dataSource: {
          filename: "data/dashboad-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Satisfaction",
            },
          ],
          columns: [
            {
              uniqueName: "Patient Status",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Average Waiting Time",
              formula: 'average("Waiting Time")',
              caption: "Waiting Time",
            },
            {
              uniqueName: "Treatment Cost",
              aggregation: "sum",
              active: false,
              format: "currency",
            },
          ],
          drillThrough: ["Satisfaction", "Patient Status", "Waiting Time"],
          sorting: {
            column: {
              type: "asc",
              tuple: [],
              measure: {
                uniqueName: "Average Waiting Time",
              },
            },
          },
        },
        conditions: [
          {
            formula: "#value < 50",
            measure: "Average Waiting Time",
            isTotal: true,
            format: {
              backgroundColor: "#00A45A",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "#value > 102",
            measure: "Average Waiting Time",
            isTotal: true,
            format: {
              backgroundColor: "#df3800",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
        options: {
          configuratorButton: false,
          grid: {
            showHeaders: false,
            showFilter: false,
            dragging: false,
          },
        },
        formats: [
          {
            name: "currency",
            currencySymbol: "$",
          },
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
        tableSizes: {
          columns: [
            {
              tuple: ["patient status.[inpatient]"],
              measure: {
                uniqueName: "Average Waiting Time",
                aggregation: "none",
              },
              width: 72,
            },
            {
              tuple: ["patient status.[outpatient]"],
              measure: {
                uniqueName: "Average Waiting Time",
                aggregation: "none",
              },
              width: 79,
            },
            {
              tuple: [],
              measure: {
                uniqueName: "Average Waiting Time",
                aggregation: "none",
              },
              width: 149,
            },
          ],
        },
      };
    
      public reportPieChart: Object = {
        dataSource: {
          filename: "data/dashboad-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Satisfaction",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Satisfaction Percentage",
              formula: 'count("Patient Status") / 200',
              caption: "Satisfaction Percentage",
              format: "satisfaction_perc",
            },
          ],
          drillThrough: [
            "Satisfaction",
            "Patient Status",
            "Waiting Time",
            "Gender",
            "Division",
          ],
        },
        options: {
          viewType: "charts",
          configuratorButton: false,
          chart: {
            type: "pie",
            showFilter: false,
            showLegend: false,
            showMeasures: false,
          },
        },
        formats: [
          {
            name: "currency",
            currencySymbol: "$",
          },
          {
            name: "",
            decimalPlaces: 2,
          },
          {
            name: "satisfaction_perc",
            isPercent: true,
          },
        ],
      };
    
      public reportColumnChart: Object = {
        dataSource: {
          filename: "data/dashboad-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Satisfaction",
            },
          ],
          columns: [
            {
              uniqueName: "Patient Status",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Satisfaction Percentage",
              formula: 'count("Patient Status") / 200',
              caption: "Satisfaction Percentage",
              format: "satisfaction_perc",
            },
          ],
          drillThrough: [
            "Satisfaction",
            "Patient Status",
            "Waiting Time",
            "Gender",
            "Division",
          ],
        },
        options: {
          viewType: "charts",
          configuratorButton: false,
          chart: {
            type: "stacked_column",
            showFilter: false,
            showMeasures: false,
          },
        },
        formats: [
          {
            name: "",
            decimalPlaces: 2,
          },
          {
            name: "satisfaction_perc",
            isPercent: true,
          },
        ],
      };
    
      public reportBarChart: Object = {
        dataSource: {
          filename: "data/dashboad-demo-data.json",
        },
        slice: {
          rows: [
            {
              uniqueName: "Division",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Waiting Time",
              aggregation: "average",
            },
            {
              uniqueName: "Treatment Cost",
              aggregation: "sum",
              active: false,
              format: "currency",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Waiting Time",
                aggregation: "average",
              },
            },
          },
        },
        options: {
          viewType: "charts",
          configuratorButton: false,
          chart: {
            type: "bar_h",
            showFilter: false,
            showMeasures: false,
          },
        },
        formats: [
          {
            name: "currency",
            currencySymbol: "$",
          },
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      customizeToolbar(toolbar: Flexmonster.Toolbar) {
        toolbar.showShareReportTab = true;
      }
    
      onReady() {
        this.pivot1.flexmonster.setReport(this.reportPivot1);
        this.pivot2.flexmonster.setReport(this.reportPivot1);
        this.pieChart.flexmonster.setReport(this.reportPieChart);
        this.columnChart.flexmonster.setReport(this.reportColumnChart);
        this.barChart.flexmonster.setReport(this.reportBarChart);
      }
    
      customizeCellFunction(
        cell: Flexmonster.CellBuilder,
        data: Flexmonster.CellData
      ) {
        if (data.hierarchy) {
          if (data.type == "header") {
            if (data.hierarchy.caption == "Satisfaction" && data.member) {
              var name = data.member.caption;
              var face =
                '<img class="flag" style="width:23px; height:23px;" src="https://www.flexmonster.com/fm_uploads/2020/01/' +
                name +
                'Emoji.png">';
              cell.text =
                '<div style="display:flex; align-items:center; font-size:12px; position:relative; bottom: 3px; left:2px;">' +
                face +
                data.member.caption +
                "<" +
                "/div>";
            }
          }
        }
      }
    }
    
    <div class="demo-box">
       <div class="demo-title">
          Treatment Costs by Departments
       </div>
       <fm-pivot #pivot1 [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [componentFolder]="'https://cdn.flexmonster.com/'" 
       [height]="378" (ready)="onReady()"></fm-pivot>
    </div>
    <div class="demo-box">
       <div class="row">
          <div class="col-6">
             <div class="demo-title">
                Overall Customer Satisfaction
             </div>
             <fm-pivot #pieChart [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [componentFolder]="'https://cdn.flexmonster.com/'" 
             [height]="392" (ready)="onReady()"></fm-pivot>
          </div>
          <div class="col-6">
             <div class="demo-title right-text">
                Customer Satisfaction by Patient Status
             </div>
             <fm-pivot #columnChart [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [componentFolder]="'https://cdn.flexmonster.com/'" 
             [height]="392" (ready)="onReady()"></fm-pivot>
          </div>
       </div>
    </div>
    <div class="demo-box">
       <div class="demo-title">
          Overall Customer Satisfaction
       </div>
       <div class="row">
          <div class="col-6">
             <fm-pivot #pivot2 [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [componentFolder]="'https://cdn.flexmonster.com/'" [toolbar]="true" 
             [height]="300" (ready)="onReady()" [customizeCell]="customizeCellFunction"></fm-pivot>
          </div>
          <div class="col-6">
             <fm-pivot #barChart [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [componentFolder]="'https://cdn.flexmonster.com/'" 
             [height]="300" (ready)="onReady()"></fm-pivot>
          </div>
       </div>
    </div>
    
    /* Charts Style  */
    #fm-pivot-view .fm-axis>.fm-refLine {
      stroke-dasharray: 4px;
    }
    
    #fm-pivot-view .fm-axis-dividers>.fm-refLine {
      stroke: none;
    }
    
    #fm-pivot-view .fm-arc path {
      stroke-width: 1.5px !important;
    }
    
    #fm-pivot-view .fm-barStack path {
      stroke-width: 1px !important;
    }
    
    /* General colors (e.g., in pie chart) */
    .fm-charts-color-1 {
      fill: #00a45a !important;
    }
    
    .fm-charts-color-2 {
      fill: #7e41ff !important;
    }
    
    .fm-charts-color-3 {
      fill: #df3800 !important;
    }
    
    .fm-charts-color-4 {
      fill: #ffb800 !important;
    }
    
    .fm-charts-color-5 {
      fill: #00a45a !important;
    }
    
    .fm-charts-color-6 {
      fill: #6F5674 !important;
    }
    
    .fm-charts-color-7 {
      fill: #64343F !important;
    }
    
    /* Changing colors of bars in stacked bar chart */
    #column-chart-container .fm-charts-color-1 {
      fill: #00a45a !important;
    }
    
    #column-chart-container .fm-charts-color-2 {
      fill: #df3800 !important;
    }
    
    #column-chart-container .fm-charts-color-3 {
      fill: none;
    }
    
    div #fm-chart-legend div table tr td #lst1 li span#fm-icon-display.fm-ui-element {
      background-color: #df3800 !important;
    }
    
    /* Headers Style  */
    
    #fm-pivot-view .fm-x.fm-axis.fm-title {
      font-size: 14px;
    }
    
    /* Hiding text labels from charts  */
    
    text#fm-yAxis-label {
      visibility: hidden !important;
    }
    
    text#fm-xAxis-label {
      visibility: hidden !important;
    }
    
    text.fm-x.fm-axis.fm-title {
      visibility: hidden !important;
    }
    
    /* other */
    
    .demo-box {
      background-color: #fafafa;
      position: relative;
      padding: 30px;
      margin-bottom: 20px;
      border: 1px solid #e9e9e9;
    }
    
    .demo-title {
      font-size: 18px;
      margin-bottom: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    
    .right-text {
      text-align: right;
    }
    
    .description-blocks {
      margin: 30px 0 30px 0;
    }
    
    .col-6 {
      float: left;
      width: calc(50% - 10px);
      margin-right: 20px;
    }
    
    .col-6:last-child {
      margin: 0;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    @media only screen and (max-width:800px) {
      .col-6 {
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
      }
    
      .demo-title.right-text {
        text-align: left;
      }
    }
    

    You can also create a customized Angular dashboard integrating Flexmonster with any third-party charting library such as Highcharts, FusionCharts, Google Charts, or any other charting library you like. Receive data with Flexmonster Pivot Table connector, aggregate it and pass to the charts component for further visualization.