Flexmonster Pivot Table & Charts seamlessly integrates with Highcharts — a flexible and easy-to-use software library for charting.
This Angular pivot table and charts dashboard represents the data of the customer support service visualizing all the critical productivity metrics and KPIs.
The best way to achieve effective reporting is to use dashboards with different types of visualization. Flexmonster and Highcharts integrate very easily and quickly with Angular and form a super convenient stack to create perfect Angular data visualization software.
Pivot the data in your Angular data grid and catch all the updates on the charts immediately, thanks to our special Highchart connector. Compare all the metrics and KPIs and analyze the details by drilling through the data on the grid or charts.
import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";
import "flexmonster/lib/flexmonster.highcharts.js";
import * as Highcharts from 'highcharts';
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
@ViewChild("pivot") pivot!: FlexmonsterPivot;
public report: Object = {
dataSource: {
type: "json",
filename: "data/demos/highcharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Requests",
aggregation: "sum",
},
{
uniqueName: "Answered Calls",
aggregation: "sum",
{
uniqueName: "Revenue",
aggregation: "sum",
format: "currency",
active: false
},
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum",
},
},
},
},
formats: [{
name: "",
thousandsSeparator: ","
},
{
name: "currency",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
}
],
options: {
showHeaders: false,
},
};
constructor() {}
ngOnInit(): void {}
onReportComplete() {
this.pivot.flexmonster.off("reportcomplete");
this.setGlobalChartsOptions();
this.createLineChart();
this.createColumnChart();
this.createPieChart();
}
setGlobalChartsOptions() {
Highcharts.setOptions({
colors: [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
],
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: "#fafafa",
backgroundColor: "#fafafa",
style: {
fontFamily: "Serif Typeface",
},
},
});
}
createLineChart() {
this.pivot.flexmonster.highcharts?.getData(
{
type: "line",
},
this.drawLineChart,
this.updateLineChart
);
}
drawLineChart(chartData: any) {
chartData.xAxis.title.enabled = false;
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-container", <Highcharts.Options>chartData);
}
updateLineChart(chartData: any) {
this.drawLineChart(chartData);
}
createColumnChart() {
this.pivot.flexmonster.highcharts?.getData(
{
type: "column",
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
aggregation: "sum",
},
{
uniqueName: "Support Cost",
aggregation: "sum",
},
],
},
},
this.drawColumnChart,
this.updateColumnChart
);
}
drawColumnChart(chartData: any, rawData: any) {
let currencyFormat = rawData.meta.formats.find(format => format.name == "currency");
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false,
};
if (chartData.yAxis == undefined) chartData.yAxis = {};
for (let i = 0; i < chartData.yAxis.length; i++) {
chartData.yAxis[i].labels = {
format: pivot.highcharts.getAxisFormat(currencyFormat)
}
}
for (let i = 0; i < chartData.series.length; i++) {
chartData.series[i].tooltip = {
pointFormat: '{series.name}: <b>' + pivot.highcharts.getPointYFormat(currencyFormat) + '</b><br/>'
}
}
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-column-container", <Highcharts.Options>chartData);
}
updateColumnChart(chartData: any) {
// Here you can add your own logic for updating the chart
}
createPieChart() {
this.pivot.flexmonster.highcharts?.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
],
},
},
this.drawPieChart,
this.updatePieChart
);
}
drawPieChart(chartData: any) {
Highcharts.chart("highcharts-pie-container", <Highcharts.Options>chartData);
}
updatePieChart(chartData: any) {
// Here you can add your own logic for updating the chart
}
}
<fm-pivot #pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="300" [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" [report]="report" (reportcomplete)="onReportComplete()"> </fm-pivot> <div class="demo-box"> <div class="demo-title">Requests vs Answered Calls</div> <div id="highcharts-container"></div> </div> <div class="demo-box"> <div class="demo-title">Revenue vs Support Cost</div> <div id="highcharts-column-container"></div> </div> <div class="demo-box"> <div class="demo-title">Customer Satisfaction</div> <div id="highcharts-pie-container"></div> </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;
color: #555;
}
Learn how to create a ready-to-use Angular reporting dashboard with embedded interactive features of the pivot table and charts by following the step-by-step integration with Highcharts guide.