List of all demos

Dashboard in React

This dashboard example for healthcare data analysis explains how the pivot table for React can be used 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 improve the dashboard for your React application even more with online data visualizations: use 3rd party charting libraries and add a little bit of eccentricity.

Customer Satisfaction by Average Waiting Time

    import React from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <div className="demo-box">
              <div className="demo-title">Treatment Costs by Departments</div>
              <FlexmonsterReact.Pivot
                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,
                      },
                    ],
                  },
                }}
              />
            </div>
    
            <div className="demo-box">
              <div className="row">
                <div className="col-6">
                  <div className="demo-title">Overall Customer Satisfaction</div>
                  <FlexmonsterReact.Pivot
                    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,
                        },
                      ],
                    }}
                  />
                </div>
                <div className="col-6">
                  <div className="demo-title right-text">
                    Customer Satisfaction by Patient Status
                  </div>
                  <div id="column-chart">
                    <FlexmonsterReact.Pivot
                      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,
                          },
                        ],
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
    
            <div className="demo-box">
              <div className="demo-title">Overall Customer Satisfaction</div>
              <div className="row">
                <div className="col-6">
                  <FlexmonsterReact.Pivot
                    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",
                            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,
                        },
                      ],
                    }}
                    customizeCell={this.customizeCellFunction}
                  />
                </div>
                <div className="col-6">
                  <FlexmonsterReact.Pivot
                    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,
                        },
                      ],
                    }}
                  />
                </div>
              </div>
            </div>
          </>
        );
      }
    
      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>`;
        }
      };
    }
    
    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-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;
      }
    }
    

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