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);
}
}
[/file_snippet_language]
[/file_snippet]
[file_snippet extension=".html"]
[file_snippet_language language="html"]
<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.