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 Google Charts — a simple and powerful web service for data visualization. Using these two Angular data visualization tools together, you can achieve the best results in developing your reporting software.
Dashboard visualizations are a perfect instrument to assist in making data-driven decisions. With the help of Angular reporting libraries, end-users can get a complete overview of all information, highlight essential insights, and consider all metrics in comparison and at different levels by expanding and collapsing the data.
The entire process is straightforward: add the components to the web page, connect the pivot to the data source to aggregate it, and then pass everything to the charts via a special Google Charts connector. Just a few steps and you receive a powerful Angular reporting application.
import { Component, OnInit, ViewChild } from "@angular/core"; import { FlexmonsterPivot } from "ng-flexmonster"; import "flexmonster/lib/flexmonster.googlecharts.js"; declare let google: any; @Component({ selector: "pivotComponent", templateUrl: "./pivot.component.html", styleUrls: ["./pivot.component.css"], }) export class PivotComponent implements OnInit { @ViewChild("pivot") pivot!: FlexmonsterPivot; colors: string[] = [ "#4cbf8b", "#e8734c", "#ffcd4c", "#9875e3", "#4c9eff", "#8acfc3", "#cd97e6", "#f1d34c", "#65d2e7", ]; pivotTableReportComplete = false; googleChartsLoaded = false; public report: Flexmonster.Report = { dataSource: { type: "json", filename: "data/demos/googlecharts-demo-data.json", }, slice: { rows: [ { uniqueName: "Date.Month", }, ], columns: [ { uniqueName: "[Measures]", }, ], measures: [ { uniqueName: "Income", formula: 'sum("Sales") * sum("Unit Price")', individual: true, caption: "Income", format: "currency", }, { uniqueName: "Sales", active: false, format: "currency", }, { uniqueName: "Expenses", format: "currency", }, { uniqueName: "Profit", formula: 'sum("Income") - sum("Expenses")', individual: true, caption: "Profit", format: "currency", }, ], }, formats: [ { name: "", thousandsSeparator: ",", decimalSeparator: ".", decimalPlaces: 2, }, { name: "currency", currencySymbol: "$", }, ], options: { grid: { showHeaders: false, }, showAggregationLabels: false, }, }; constructor() {} ngOnInit(): void { google.charts.load("current", { packages: ["corechart", "bar"], }); google.charts.setOnLoadCallback(() => this.onGoogleChartsLoaded()); } onReportComplete() { this.pivot.flexmonster.off("reportcomplete"); this.pivotTableReportComplete = true; this.createColumnChart(); this.createPieChart(); } onGoogleChartsLoaded() { this.googleChartsLoaded = true; if (this.pivotTableReportComplete) { this.createColumnChart(); this.createPieChart(); } } createColumnChart() { if (this.googleChartsLoaded) { this.pivot.flexmonster.googlecharts!.getData( { type: "column", }, this.drawColumnChart.bind(this), this.drawColumnChart.bind(this) ); } } drawColumnChart(_data: any) { let data = google.visualization.arrayToDataTable(_data.data); let formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: "$", }); for (let i = 0; i < data.getNumberOfColumns(); i++) { if (data.getColumnType(i) === "number") { formatter.format(data, i); } } let options = { fontName: "SERIF TYPEFACE", chartArea: { height: "100%", }, height: 300, colors: this.colors, }; const columnChartContainer = document.getElementById("googlechart-column-container"); const chart = new google.charts.Bar(columnChartContainer); chart.draw(data, options); } createPieChart() { if (this.googleChartsLoaded) { this.pivot.flexmonster.googlecharts!.getData( { type: "pie", slice: { rows: [ { uniqueName: "Country", filter: { measure: { uniqueName: "Sales", }, query: { top: 5, }, }, }, ], columns: [ { uniqueName: "[Measures]", }, ], measures: [ { uniqueName: "Sales", }, ], }, }, this.drawPieChart.bind(this), this.drawPieChart.bind(this) ); } } drawPieChart(_data: any) { let data = google.visualization.arrayToDataTable(_data.data); let options = { legend: { position: "bottom", }, height: 300, pieSliceText: "none", // Remove text from pie slices pieHole: 0.35, chartArea: { height: "85%", top: 0, }, pieSliceBorderColor: "none", colors: this.colors, }; const pieChartContainer = document.getElementById("googlechart-pie-container"); const chart = new google.visualization.PieChart(pieChartContainer); chart.draw(data, options); } }
<fm-pivot #pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="350" [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" (reportcomplete)="onReportComplete()" [report]="report"> </fm-pivot> <div class="demo-box"> <div class="demo-title"><strong>Income, Expenses, and Profit</strong></div> <div id="googlechart-column-container"></div> </div> <div class="demo-box"> <div class="demo-title"><strong>Top 5 Countries by Sales</strong></div> <div id="googlechart-pie-container"></div> </div>
.demo-box { background-color: #fafafa; position: relative; padding: 20px 20px 20px 20px; border: 1px solid #e9e9e9; margin-bottom: 20px; } .demo-title { font-size: 18px; margin-bottom: 30px; white-space: nowrap; text-overflow: ellipsis; color: #555; } #pivot { margin-bottom: 20px; } /** For the background color of Google Charts * (for material design charts, it can't be changed via options, only via CSS) */ #googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) { fill: #fafafa !important; } #googlechart-pie-container > div > div:nth-child(1) > div > svg > rect { fill: #fafafa !important; } /* For text on xAxis of the column chart */ #googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) { color: #555; fill: rgb(117, 117, 117); font-family: Roboto; font-size: 12px; } #googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text { color: #555; fill: rgb(117, 117, 117); font-family: Roboto; font-size: 12px; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexmonster & Google Charts Demo</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Loading Google Charts --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <app-root></app-root> </body> </html>
Dashboards with Flexmonster and Google Charts allow end-users to feel the full power of real-time Angular web analytics as charts instantly react to any changes on the grid.
With our integration with the Google Charts guide, you can quickly configure a dashboard with Flexmonster and Google Charts and embed it into your Angular data visualisation project.