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

Edit in JSfiddle Get Free Trial

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  public reportPivot1: Object = {
    dataSource: {
      type: "json",
      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: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }],
    tableSizes: {
      columns: [
        {
          tuple: [],
          measure: {
            uniqueName: "Treatment Cost",
            aggregation: "sum",
          },
          width: 180,
        },
        {
          tuple: ["patient status.[inpatient]"],
          measure: {
            uniqueName: "Treatment Cost",
            aggregation: "sum",
          },
          width: 180,
        },
        {
          tuple: ["patient status.[outpatient]"],
          measure: {
            uniqueName: "Treatment Cost",
            aggregation: "sum",
          },
          width: 180,
        },
      ],
    },
  };

  public reportPivot2: Object = {
    dataSource: {
      type: "json",
      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",
          format: "time_format"
        },
        {
          uniqueName: "Treatment Cost",
          aggregation: "sum",
          active: false,
          format: "currency",
        },
      ],
      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,
      drillThrough: false,
      grid: {
        showHeaders: false,
        showFilter: false,
        dragging: false,
      },
    },
    formats: [{
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
      }, {
        name: "currency",
        currencySymbol: "$",
      },
      {
        name: "time_format",
        thousandsSeparator: ",",
        decimalSeparator: ":",
        decimalPlaces: 0,
        nullValue: "",
        currencySymbol: "min",
        positiveCurrencyFormat: "1min",
        textAlign: "right",
        isPercent: false
      }
    ],
  };

  public reportPieChart: Object = {
    dataSource: {
      type: "json",
      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",
        },
      ],
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      drillThrough: 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: {
      type: "json",
      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",
        },
      ],
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      drillThrough: false,
      chart: {
        type: "stacked_column",
        showFilter: false,
        showMeasures: false,
      },
    },
    formats: [
      {
        name: "",
        decimalPlaces: 2,
      },
      {
        name: "satisfaction_perc",
        isPercent: true,
      },
    ],
  };

  public reportBarChart: Object = {
    dataSource: {
      type: "json",
      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,
      drillThrough: false,
      chart: {
        type: "bar_h",
        showFilter: false,
        showMeasures: false,
      },
    },
    formats: [
      {
        name: "currency",
        currencySymbol: "$",
      },
      {
        name: "",
        decimalPlaces: 2,
      },
    ],
  };

  constructor() {}

  ngOnInit(): void {}

  customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
    if (data.type === "header" && data.hierarchy?.caption === "Satisfaction" && data.member) {
      let name = data.member.caption;
      let face = `<img class="flag" style="width:23px; height:23px;" 
src="https://www.flexmonster.com/base/assets/img/demos/${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
    [componentFolder]="'https://cdn.flexmonster.com/'"
    [height]="385"
    [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
    [report]="reportPivot1">
  </fm-pivot>
</div>

<div class="demo-box">
  <div class="row">
    <div class="col-6">
      <div class="demo-title">Overall Customer Satisfaction</div>
      <fm-pivot
        [componentFolder]="'https://cdn.flexmonster.com/'"
        [height]="390"
        [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
        [report]="reportPieChart">
      </fm-pivot>
    </div>
    <div class="col-6">
      <div class="demo-title right-text">
        Customer Satisfaction by Patient Status
      </div>
      <fm-pivot
        id="column-chart"
        [componentFolder]="'https://cdn.flexmonster.com/'"
        [height]="390"
        [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
        [report]="reportColumnChart">
      </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
        [componentFolder]="'https://cdn.flexmonster.com/'"
        [height]="300"
        [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
        [report]="reportPivot2"
        [customizeCell]="customizeCellFunction">
      </fm-pivot>
    </div>
    <div class="col-6">
      <fm-pivot
        [componentFolder]="'https://cdn.flexmonster.com/'"
        [height]="300"
        [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
        [report]="reportBarChart">
      </fm-pivot>
    </div>
  </div>
</div>

/* Chart styles */
#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 columns in a stacked column chart */
#column-chart .fm-charts-color-1 {
  fill: #00a45a !important;
}

#column-chart .fm-charts-color-2 {
  fill: #df3800 !important;
}

#column-chart .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;
}

/* Header styles */
#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.

Pivot charts Classic view

Dashboard in Angular

See our live examples