Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+
Get Free Trial
Get Free Trial
  1. Pivot Table demo
Data Sources
  1. MS Analysis Services
  2. Elasticsearch
  3. JSON and CSV
Views
  1. One million rows
  2. Pivot charts
  3. Dashboard
  4. Classic (tabular) view
  5. Flat table
Integration
  1. With amCharts
  2. With Highcharts
  3. With FusionCharts
  4. With Google Charts
Other
  1. Themes
  2. Localization
  3. Heat map
  4. Custom cells
  5. Live data update
  1. More examples

Dashboard in Vue

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

Treatment Costs by Departments

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

Overall Customer Satisfaction
Customer Satisfaction by Patient Status

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

Edit in JSfiddle Get Free Trial 
    <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/dashboard-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/dashboard-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/dashboard-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/dashboard-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/dashboard-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.

    See our live examples

    Pivot charts Classic view
    Prev Next

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    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.