Get Free Trial
List of all demos

Vue Pivot Table for MS Analysis Services

Connect Flexmonster Vue pivot grid to Microsoft Analysis Services cubes.


    <template>
    	<Pivot
    		toolbar
    		height="600"
    		v-bind:shareReportConnection="{
    			url: 'https://olap.flexmonster.com:9500'
    		}"
    		v-bind:beforetoolbarcreated="customizeToolbar"
    		v-bind:report="report"
    	/>
    </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.