List of all demos

Vue Pivot Table for MS Analysis Services

Connect Flexmonster Vue pivot grid to Microsoft Analysis Services cubes.


    <template>
      <Pivot
        height="600"
        toolbar
        v-bind:report="report"
        v-bind:shareReportConnection="{
          url: 'https://olap.flexmonster.com:9500',
        }"
        v-bind:beforetoolbarcreated="customizeToolbar"
      />
    </template>
    
    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "microsoft analysis services",
              proxyUrl: "https://olap.flexmonster.com:8085/",
              catalog: "Adventure Works DW Standard Edition",
              cube: "Adventure Works",
              binary: true,
            },
            slice: {
              rows: [
                {
                  uniqueName: "[Product].[Product Categories]",
                },
              ],
              columns: [
                {
                  uniqueName: "[Customer].[Country]",
                },
                {
                  uniqueName: "[Date].[Month of Year]",
                  caption: "Month",
                },
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "[Measures].[Internet Total Product Cost]",
                  format: "-9cs4ysg4l9dqe",
                },
                {
                  uniqueName: "[Measures].[Internet Average Sales Amount]",
                  active: false,
                  format: "-m7dk25oo2smw7",
                },
                {
                  uniqueName: "[Measures].[Gross Profit]",
                  active: false,
                  format: "-1k8oq43hkyu4b",
                },
              ],
              drills: {
                rows: [
                  {
                    tuple: ["[Product].[Product Categories].[Category].&[4]"],
                  },
                  {
                    tuple: ["[Product].[Product Categories].[Subcategory].&[28]"],
                  },
                  {
                    tuple: ["[Product].[Product Categories].[Subcategory].&[25]"],
                  },
                ],
              },
              memberProperties: [
                {
                  levelName: "[Product].[Product Categories].[Product]",
                  properties: ["List Price", "Start Date"],
                },
              ],
            },
            options: {
              showMemberProperties: true,
            },
            formats: [
              {
                name: "-m7dk25oo2smw7",
                decimalPlaces: 0,
              },
              {
                name: "-1k8oq43hkyu4b",
                decimalPlaces: 0,
              },
              {
                name: "-9cs4ysg4l9dqe",
                decimalPlaces: 2,
                currencySymbol: " $",
                positiveCurrencyFormat: "1$",
                negativeCurrencyFormat: "-1$",
              },
            ],
          },
        };
      },
      methods: {
        customizeToolbar(toolbar) {
          toolbar.showShareReportTab = true;
        },
      },
    };
    </script>
    
    #fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell,
    #fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-total {
      background-color: #a7d6ae;
    }
    
    #fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell,
    #fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header,
    #fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-total {
      background-color: #bee8c5;
    }
    
    #fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell,
    #fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header,
    #fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-total {
      background-color: #e1f7e4;
    }
    
    #fm-pivot-view .fm-grid-layout .fm-grand-total {
      background-color: #f5f5f5 !important;
    }
    
    #fm-pivot-view .fm-grid-layout span.fm-hierarchy-link {
      color: #0d0d0d !important;
    }
    

    Flexmonster Pivot table supports both tabular and multidimensional model types, and you can choose between two ways how to connect to Microsoft Analysis Services via:

  • XMLA protocol that works for multidimensional models only.
  • Flexmonster Accelerator – our special server-side proxy to increase data loading speed from the server to the browser. Works for both multidimensional and tabular models.
  • Follow the Connecting to Microsoft Analysis Services documentation to choose the best way to connect to SSAS from your Vue pivot table.