Dashboard

This dashboard sample for healthcare data analysis shows how the pivot table can be used for real-time reporting in a dashboard view format.

Treatment Costs by Departments

With our pivot table control, you can empower any analytics application with interactive dashboards. Being a part of your BI solution, a web pivot table tool helps to reveal hidden insights in your data.

Overall Customer Satisfaction

Customer Satisfaction by Patient Status

To build a dashboard on a web page, you can add multiple instances of Flexmonster, fill them with data and create custom reports. Together, tables and charts will make up a powerful yet lightweight dashboard.

Customer Satisfaction by Average Waiting Time

Edit in JSfiddle Get Free Trial

const pivot_table_1 = new Flexmonster({
  container: "#pivot-container-1",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 385,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    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,
        },
      ],
    },
  },
});

const pivot_table_2 = new Flexmonster({
  container: "#pivot-container-2",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    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",
        },
        {
          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
      }
    ],
  },
  customizeCell: customizeCell,
});

const bar_chart = new Flexmonster({
  container: "#bar-chart-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    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,
      },
    ],
  },
});

const column_chart = new Flexmonster({
  container: "#column-chart-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 390,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    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,
      },
    ],
  },
});

const pie_chart = new Flexmonster({
  container: "#pie-chart-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 390,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    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,
      },
    ],
  },
});

function customizeCell(cell, data) {
  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>
  <div id="pivot-container-1"></div>
</div>

<div class="demo-box">
  <div class="row">
    <div class="col-6">
      <div class="demo-title">
        Overall Customer Satisfaction
      </div>
      <div id="pie-chart-container"></div>
    </div>
    <div class="col-6">
      <div class="demo-title right-text">
        Customer Satisfaction by Patient Status
      </div>
      <div id="column-chart-container"></div>
    </div>
  </div>
</div>

<div class="demo-box">
  <div class="demo-title">
    Overall Customer Satisfaction
  </div>
  <div class="row">
    <div class="col-6">
      <div id="pivot-container-2"></div>
    </div>
    <div class="col-6">
      <div id="bar-chart-container"></div>
    </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-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;
}

/* 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;
  }
}

Your dashboard could be improved even further with online data visualizations by 3rd party charting libraries.

Flexmonster can aggregate raw data, show it on the grid and then pass your processed data further to Highcharts, FusionCharts, Google Charts or all of them.

Pivot charts Classic view

Dashboard

See our live examples