We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
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: "currency",
                },
                {
                  uniqueName: "[Measures].[Internet Average Sales Amount]",
                  active: false,
                  format: "currency",
                },
                {
                  uniqueName: "[Measures].[Gross Profit]",
                  active: false,
                  format: "currency",
                },
              ],
              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: "",
                thousandsSeparator: ",",
                decimalSeparator: ".",
                decimalPlaces: 2,
              },
              {
                name: "currency",
                currencySymbol: "$",
              },
            ],
          },
        };
      },
      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.