Get Free Trial
List of all demos

Angular Pivot Table for MS Analysis Services

Flexmonster provides a seamless connection of your Angular pivot grid to Microsoft Analysis Services cubes.


    import { Component, OnInit, ViewChild } from "@angular/core";
    import { FlexmonsterPivot } from "ng-flexmonster";
    
    @Component({
      selector: "pivotComponent",
      templateUrl: "./pivot.component.html",
      styleUrls: ["./pivot.component.css"],
    })
    export class PivotComponent implements OnInit {
      @ViewChild("pivot") pivot!: FlexmonsterPivot;
    
      public report: Object = {
        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$",
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      customizeToolbar(toolbar: Flexmonster.Toolbar) {
        toolbar.showShareReportTab = true;
      }
    
      customizeCellFunction(
        cell: Flexmonster.CellBuilder,
        data: Flexmonster.CellData
      ) {
        if (data.level != undefined) {
          cell.addClass("fm-level-" + data.level);
        }
      }
    }
    
    <fm-pivot
      #pivot
      [toolbar]="true"
      [height]="600"
      [report]="report"
      [customizeCell]="customizeCellFunction"
      [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
      (beforetoolbarcreated)="customizeToolbar($event)">
    </fm-pivot>
    
    #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;
    }
    

    Our Angular data visualization tool can connect to OLAP cubes with XMLA protocol or via Flexmonster Accelerator — a server-side proxy that improves performance and makes it easier to analyze data with Angular and Microsoft Analysis Services.

    To learn more check the Flexmonster Accelerator guide or use our Microsoft Analysis Services connection tutorial to get straight to the data visualization with Angular.