Angular Pivot Table with FusionCharts

Flexmonster Pivot Table & Charts seamlessly integrates with FusionCharts — an interactive and responsive charting library with modern charts and data-driven maps.

Let’s have a look at this Angular pivot table example in combination with interactive FusionCharts. We used data about revenue from different traffic channels and countries to show you the visualization result in a dashboard form.

Flexmonster and FusionCharts create together an effective self-service analytic tool for Angular. Workable UI and powerful functionality, as well as fast configuration, make this integration perfect for end-users to create impressive reports and gain new insights.

Top Countries by Revenue

Use different kinds of visualization to detect data patterns and useful insights from the same data just in a few clicks. Change the pivot table slice by filtering the members and see the changes on the charts right away.

Top Traffic Sources

Revenue per Month

Edit in JSfiddle Get Free Trial

import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

import "flexmonster/lib/flexmonster.fusioncharts.js";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  @ViewChild("pivot") pivot!: FlexmonsterPivot;

  backgroundColor: string = "#fafafa";
  baseFontSize: string = "15";
  baseFontColor: string = "#888";
  chartPalette: string = "4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7";

  dataSourceForMap: Object = {};
  mapType: string = "maps/worldwithcountries";
  dataSourceForDoughnut: Object = {};
  doughnutType: string = "doughnut2d";
  dataSourceForColumn: Object = {};
  columnType: string = "mscolumn2d";

  public report: Flexmonster.Report = {
    dataSource: {
      type: "json",
      filename: "data/demos/fusioncharts-demo-data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Traffic",
        },
        {
          uniqueName: "Source",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Revenue",
          formula: 'sum("Sales") * sum("Purchase Cost")',
          individual: true,
          caption: "Revenue",
          format: "currency",
        },
        {
          uniqueName: "Conversion Rate",
          formula: 'sum("Leads") / sum("Clicks") ',
          individual: true,
          caption: "Conversion Rate",
          active: false,
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: ["Traffic.[Referral]"],
          measure: {
            uniqueName: "Revenue",
            aggregation: "none",
          },
        },
      },
      expands: {
        rows: [],
        columns: [
          {
            tuple: ["Traffic.[Organic]"],
          },
          {
            tuple: ["Traffic.[Paid]"],
          },
        ],
      },
    },
    options: {
      grid: {
        showHeaders: false,
      },
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }],
  };

  constructor() {}

  ngOnInit(): void {}

  reportComplete() {
    this.pivot.flexmonster.off("reportcomplete");
    this.createMapChart();
    this.createDoughnutChart();
    this.createColumnChart();
  }

  createMapChart() {
    this.pivot.flexmonster.fusioncharts?.getData(
      {
        type: this.mapType,
      },
      this.drawMap.bind(this),
      this.drawMap.bind(this)
    );
  }

  drawMap(chartConfig: any) {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.showLabels = "0";

    chartConfig.chart.bgColor = this.backgroundColor;

    chartConfig.chart.entityBorderColor = this.backgroundColor;
    chartConfig.chart.entityBorderThickness = "1";
    chartConfig.chart.entityFillHoverColor = "#d00000";

    chartConfig.chart.nullEntityColor = "#bbbbbb";
    chartConfig.chart.nullEntityAlpha = "50";
    chartConfig.chart.hoverOnNull = "0";

    chartConfig.chart.legendPosition = "top";

    chartConfig.colorrange = {
      minvalue: chartConfig.extradata.minValue,
      code: "#8acfc3",
      gradient: "1",
      color: [
        {
          minvalue: chartConfig.extradata.minValue,
          maxvalue: 100000,
          code: "#8acfc3",
        },
        {
          minvalue: 100000,
          maxvalue: 250000,
          code: "#4cbf8b",
        },
        {
          minvalue: 250000,
          maxvalue: 400000,
          code: "#ffcd4c",
        },
        {
          minvalue: 400000,
          maxvalue: 550000,
          code: "#faa307",
        },
        {
          minvalue: 550000,
          maxvalue: 700000,
          code: "#f48c06",
        },
        {
          minvalue: 700000,
          maxvalue: chartConfig.extradata.maxValue,
          code: "#e85d04",
        },
      ],
    };

    delete chartConfig.extradata;

    this.dataSourceForMap = chartConfig;
  }

  createDoughnutChart() {
    this.pivot.flexmonster.fusioncharts?.getData(
      {
        type: this.doughnutType,
        slice: {
          rows: [
            {
              uniqueName: "Source",
              filter: {
                exclude: ["LinkedIn", "Medium", "Bing"],
              },
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Users",
              aggregation: "sum",
            },
          ],
        },
      },
      this.drawDoughnut.bind(this),
      this.drawDoughnut.bind(this)
    );
  }

  drawDoughnut(chartConfig: any) {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.baseFontSize = this.baseFontSize;
    chartConfig.chart.baseFontColor = this.baseFontColor;
    chartConfig.chart.bgColor = this.backgroundColor;
    chartConfig.chart.palettecolors = this.chartPalette;

    chartConfig.chart.startingAngle = "-110";

    chartConfig.chart.showLegend = "0";

    chartConfig.chart.smartLineColor = this.baseFontColor;
    chartConfig.chart.smartLineAlpha = "60";

    chartConfig.chart.labelFontColor = this.baseFontColor;
    chartConfig.chart.labelFontSize = this.baseFontSize;

    chartConfig.chart.plotToolText = "Source: $label<br>Users: $dataValue";

    chartConfig.data[2].isSliced = "1";
    chartConfig.chart.enableMultiSlicing = "0";

    this.dataSourceForDoughnut = chartConfig;
  }

  createColumnChart() {
    this.pivot.flexmonster.fusioncharts?.getData(
      {
        type: this.columnType,
        slice: {
          rows: [
            {
              uniqueName: "Date.Month",
            },
          ],
          columns: [
            {
              uniqueName: "Traffic",
            },
          ],
          measures: [
            {
              uniqueName: "Sales",
              aggregation: "sum",
              format: "currency"
            },
          ],
        },
      },
      this.drawColumn.bind(this),
      this.drawColumn.bind(this)
    );
  }

  drawColumn(chartConfig: any, rawData: any) {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.baseFontSize = this.baseFontSize;
    chartConfig.chart.baseFontColor = this.baseFontColor;
    chartConfig.chart.bgColor = this.backgroundColor;
    chartConfig.chart.palettecolors = this.chartPalette;

    chartConfig.chart.xAxisName = undefined;
    chartConfig.chart.yAxisName = undefined;

    chartConfig.chart.plotFillHoverAlpha = "90";
    chartConfig.chart.plotToolText =
      "Traffic type: $seriesname<br>Month: $label<br>Revenue: $dataValue";

    chartConfig.chart.legendPosition = "right";
    chartConfig.chart.plotHighlightEffect = "fadeout|alpha=20";

    chartConfig.chart.legendCaption = "Traffic type";
    chartConfig.chart.legendCaptionBold = "1";
    chartConfig.chart.legendCaptionFontSize = "13";
    chartConfig.chart.legendCaptionFontColor = this.baseFontColor;

    chartConfig.chart.legendIconScale = "1.2";
    chartConfig.chart.legendIconSides = "500";
    chartConfig.chart.legendItemFontSize = this.baseFontSize;
    chartConfig.chart.legendItemFontColor = this.baseFontColor;

    chartConfig.chart.adjustDiv = "0";
    chartConfig.chart.yAxisMaxvalue = "35000";
    chartConfig.chart.yAxisMinValue = "0";
    chartConfig.chart.numDivLines = "4";

    chartConfig.chart.formatNumberScale = "0";

    let format: any = this.pivot.flexmonster.fusioncharts?.getNumberFormat(rawData.meta.formats[0]);
    for (let prop in format) {
      chartConfig.chart[prop] = format[prop];
    }

    this.dataSourceForColumn = chartConfig;
  }
}

<fm-pivot
  #pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [height]="440"
  [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'"
  [report]="report"
  (reportcomplete)="reportComplete()">
</fm-pivot>

<div class="demo-box">
  <div class="demo-title"><strong>Top Countries by Revenue</strong></div>
  <fusioncharts
    [type]="mapType"
    width="100%"
    height="400"
    [dataSource]="dataSourceForMap">
  </fusioncharts>
</div>

<div class="demo-box">
  <div class="demo-title"><strong>Top Traffic Sources</strong></div>
  <fusioncharts
    [type]="doughnutType"
    width="100%"
    height="450"
    [dataSource]="dataSourceForDoughnut">
  </fusioncharts>
</div>

<div class="demo-box">
  <div class="demo-title"><strong>Revenue per Month</strong></div>
  <fusioncharts
    [type]="columnType"
    width="100%"
    height="450"
    [dataSource]="dataSourceForColumn">
  </fusioncharts>
</div>

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 40px 30px 30px 30px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  margin-top: 40px;
}

.demo-title {
  font-size: 18px;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 24px;
  color: #555;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexmonsterPivotModule } from 'ng-flexmonster';
import { FusionChartsModule } from "angular-fusioncharts";

// Importing FusionCharts
import * as FusionCharts from "fusioncharts";
import * as Charts from "fusioncharts/fusioncharts.charts";
import * as FusionMaps from "fusioncharts/fusioncharts.maps";
import * as WorldwithCountries from "fusionmaps/maps/fusioncharts.worldwithcountries";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

FusionChartsModule.fcRoot(FusionCharts, Charts, FusionMaps, WorldwithCountries, FusionTheme);

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
		FlexmonsterPivotModule,
		FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How does it work? You can swiftly aggregate data from any data source with our Angular pivot grid and then visualize them with the charting library most effectively thanks to our special FusionCharts connector.

Follow our integration with FusionCharts guide to design a modern Angular data visualization dashboard with just a few lines of code.

With Highcharts With Google Charts

Angular Pivot Table with FusionCharts

See our live examples