Dashboard in Angular

This example for healthcare data analysis shows how the Angular pivot grid 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 forms 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 number of pivot charts and grids. To do it, just add multiple instances of Flexmonster, connect them to your data, and quickly 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: "flexmonsterDashboard",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class FlexmonsterDashboard implements OnInit {
  public reportPivot1: Object = {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/dashboard-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: "https://cdn.flexmonster.com/data/dashboard-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: "https://cdn.flexmonster.com/data/dashboard-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: "https://cdn.flexmonster.com/data/dashboard-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: "https://cdn.flexmonster.com/data/dashboard-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 by integrating Flexmonster with any third-party charting library, such as Highcharts, FusionCharts, Google Charts, or any other charting library you like. Receive data with a Flexmonster chart connector, aggregate it, and pass it to the charts component for further visualization.

Pivot charts Classic view

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

Dashboard in Angular

See our live examples

Frequently asked questions