Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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.
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.
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.