Get Free Trial
List of all demos

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

    var pivot_table_1 = new Flexmonster({
      container: "#pivot-container-1",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      width: "100%",
      height: 378,
      report: {
        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
            }
          ]
        },
      }
    });
    
    var pivot_table_2 = new Flexmonster({
      container: "#pivot-container-2",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      width: "100%",
      customizeCell: customizeCell,
      height: 300,
      report: {
        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
            }
          ]
        }
      }
    });
    var bar_chart = new Flexmonster({
      container: "#bar-chart-container",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      height: 300,
      report: {
        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
          }
        ]
      }
    });
    var column_chart = new Flexmonster({
      container: "#column-chart-container",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      height: 392,
      report: {
        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
          }
        ]
      }
    });
    var pie_chart = new Flexmonster({
      container: "#pie-chart-container",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      height: 392,
      report: {
        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
          }
        ]
      }
    });
    
    function customizeCell(cell, data) {
      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>
      <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>
    
    /* 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;
      }
    }
    

    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.