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: "https://cdn.flexmonster.com/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: 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">Top Countries by Revenue</div>
  <fusioncharts
    [type]="mapType"
    width="100%"
    height="400"
    [dataSource]="dataSourceForMap">
  </fusioncharts>
</div>

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

<div class="demo-box">
  <div class="demo-title">Revenue per Month</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;
  font-weight: 600;
  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 the data with the charting library most effectively, thanks to our special Flexmonster Connector for FusionCharts.

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

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

Angular Pivot Table with FusionCharts

For the best experience

See our live examples

Frequently asked questions