☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

Dashboard in Vue

Create an informative dashboard view for your Vue application using a pivot grid and charts.

Treatment Costs by Departments
Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.108 (build 07/20/2025)

You can embed a powerful pivot grid into your BI tool built with Vue.js.

Overall Customer Satisfaction
Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.108 (build 07/20/2025)
Customer Satisfaction by Patient Status
Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.108 (build 07/20/2025)

The dashboard can contain several instances of Flexmonster Pivot (using different report configurations) and various charts. That gives you the flexibility to create a custom interactive Vue report with the needed visualization type.

Customer Satisfaction by Average Waiting Time
Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.108 (build 07/20/2025)
Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.108 (build 07/20/2025)

  • .vue
  • .css
<template>
  <div class="demo-box">
    <div class="demo-title">Treatment Costs by Departments</div>
    <Pivot
      componentFolder="https://cdn.flexmonster.com/"
      height="385"
      licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
      v-bind:report="pivot_1_report"
    />
  </div>

  <div class="demo-box">
    <div class="row">
      <div class="col-6">
        <div class="demo-title">Overall Customer Satisfaction</div>
        <Pivot
          componentFolder="https://cdn.flexmonster.com/"
          height="390"
          licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
          v-bind:report="pie_chart_report"
        />
      </div>
      <div class="col-6">
        <div class="demo-title right-text">Customer Satisfaction by Patient Status</div>
        <Pivot
          id="column-chart"
          componentFolder="https://cdn.flexmonster.com/"
          height="390"
          licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
          v-bind:report="column_chart_report"
        />
      </div>
    </div>
  </div>

  <div class="demo-box">
    <div class="demo-title">Overall Customer Satisfaction</div>
    <div class="row">
      <div class="col-6">
        <Pivot
          componentFolder="https://cdn.flexmonster.com/"
          height="300"
          licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
          v-bind:report="pivot_2_report"
          v-bind:customizeCell="customizeCell"
        />
      </div>
      <div class="col-6">
        <Pivot
          componentFolder="https://cdn.flexmonster.com/"
          height="300"
          licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
          v-bind:report="bar_chart_report"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

export default {
  name: "FlexmonsterDashboard",
  components: {
    Pivot,
  },
  data() {
    return {
      pivot_1_report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/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,
            },
          ],
        },
      },
      pie_chart_report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/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,
          },
        ],
      },
      column_chart_report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/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,
          },
        ],
      },
      pivot_2_report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/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,
          },
        ],
      },
      bar_chart_report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/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,
          },
        ],
      },
    };
  },
  methods: {
    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>`;
      }
    },
  },
};

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

For the dashboard, you can use not only our pivot charts but also embed other 3rd party charting libraries.

Flexmonster Vue pivot table smoothly integrates with Highcharts, FusionCharts, Google Charts, amCharts, or all of them.