Dashboard in React

This dashboard example for healthcare data analysis explains how the pivot table for React can be used to create a dashboard view.

Treatment Costs by Departments

To create a dashboard on your web page, add multiple instances of Flexmonster, fill them with data, and create custom reports. With both tables and charts, you'll receive a robust yet lightweight dashboard.

Overall Customer Satisfaction

Customer Satisfaction by Patient Status

You can further improve the dashboard for your React application with online data visualizations: use 3rd party charting libraries and add a little bit of eccentricity.

Customer Satisfaction by Average Waiting Time

Edit in JSfiddle Get Free Trial

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const dataSource = {
    type: "json",
    filename: "https://cdn.flexmonster.com/data/dashboard-demo-data.json"
  };

  const reportTreatmentCosts = {
    dataSource: dataSource,
    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 reportOverallSatisfaction = {
    dataSource: dataSource,
    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: "",
        decimalPlaces: 2
      },
      {
        name: "satisfaction_perc",
        isPercent: true
      }
    ]
  };

  const reportSatisfactionByStatus = {
    dataSource: dataSource,
    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 reportSatisfactionByWaitingTime = {
    dataSource: dataSource,
    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
      }
    ]
  };

  const reportSatisfactionByWaitingTimeDepartment = {
    dataSource: dataSource,
    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 customizeCellFunction = (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>`;
    }
  };

  return (
    <>
      <div className="demo-box">
        <div className="demo-title">Treatment Costs by Departments</div>
        <FlexmonsterReact.Pivot
          height={385}
          report={reportTreatmentCosts}
          licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
        />
      </div>

      <div className="demo-box">
        <div className="row">
          <div className="col-6">
            <div className="demo-title">Overall Customer Satisfaction</div>
            <FlexmonsterReact.Pivot
              height={390}
              report={reportOverallSatisfaction}
              licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
            />
          </div>
          <div className="col-6">
            <div className="demo-title right-text">
              Customer Satisfaction by Patient Status
            </div>
            <div id="column-chart">
              <FlexmonsterReact.Pivot
                height={390}
                report={reportSatisfactionByStatus}
                licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
              />
            </div>
          </div>
        </div>
      </div>

      <div className="demo-box">
        <div className="demo-title">
          Customer Satisfaction by Average Waiting Time
        </div>
        <div className="row">
          <div className="col-6">
            <FlexmonsterReact.Pivot
              height={300}
              report={reportSatisfactionByWaitingTime}
              customizeCell={customizeCellFunction}
              licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
            />
          </div>
          <div className="col-6">
            <FlexmonsterReact.Pivot
              height={300}
              report={reportSatisfactionByWaitingTimeDepartment}
              licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
            />
          </div>
        </div>
      </div>
    </>
  );
}

export default PivotTableDemo;

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

.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;
  }
}

Flexmonster can aggregate raw data and display it on the grid, while a special Flexmonster Connector will pass your processed data further to Highcharts, FusionCharts, Google Charts, amCharts, or all of them.

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 React

See our live examples

Frequently asked questions