We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Dashboard in Vue

Create an informative dashboard view for your Vue application using 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 the custom interactive live Vue report with the needed visualization type.

Customer Satisfaction by Average Waiting Time

    <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: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          pivot_1_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,
                },
              ],
            },
          },
          pie_chart_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,
              },
            ],
          },
          column_chart_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,
              },
            ],
          },
          pivot_2_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,
              },
            ],
          },
          bar_chart_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,
              },
            ],
          },
        };
      },
      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.