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";
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
@ViewChild("pivot") pivot!: FlexmonsterPivot;
public report: Object = {
dataSource: {
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",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum",
},
},
},
},
options: {
showHeaders: false,
},
};
constructor() {}
ngOnInit(): void {}
customizeToolbar(toolbar: Flexmonster.Toolbar) {
toolbar.showShareReportTab = true;
}
createComboChart() {
this.pivot.flexmonster.highcharts?.getData(
{
type: "line",
},
(data: any) => {
data.xAxis.title.enabled = false;
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.xAxis.type = "datetime";
data.title.text = "Requests vs Answered Calls";
data.subtitle = {
text: "over months",
};
Highcharts.setOptions({
colors: [
"#ff3b1d",
"#00b370",
"#4f9da6",
"#FF6B6B",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-container", <Highcharts.Options>data);
},
(data: any) => {
data.xAxis.title.enabled = false;
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.xAxis.type = "datetime";
data.title.text = "Requests vs Answered Calls";
data.subtitle = {
text: "over months",
};
Highcharts.setOptions({
colors: [
"#ff3b1d",
"#00b370",
"#4f9da6",
"#FF6B6B",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-container", <Highcharts.Options>data);
}
);
}
createBarChart() {
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",
},
],
},
},
(data: any) => {
data.xAxis.title.enabled = false;
data.legend = {
enabled: false,
};
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.xAxis.type = "datetime";
data.title.text = "Revenue vs Support Cost";
data.subtitle = {
text: "over months",
};
Highcharts.setOptions({
colors: [
"#00983e",
"#ff9000",
"#4f9da6",
"#FF6B6B",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-bar-container", <Highcharts.Options>data);
},
(data: any) => {
data.xAxis.title.enabled = false;
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.xAxis.type = "datetime";
data.title.text = "Requests vs Answered Calls";
data.subtitle = {
text: "over months",
};
Highcharts.setOptions({
colors: [
"#ff3b1d",
"#00b370",
"#4f9da6",
"#FF6B6B",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-bar-container", <Highcharts.Options>data);
}
);
}
createPieChart() {
this.pivot.flexmonster.highcharts?.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
],
},
},
(data: any) => {
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.title.text = "Customer Satisfaction";
Highcharts.setOptions({
colors: [
"#a9aaaa",
"#ffa836",
"#ff3b1d",
"#00b370",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-pie-container", <Highcharts.Options>data);
},
(data: any) => {
data.chart.style = {
fontFamily: "SERIF TYPEFACE",
};
data.title = {
style: {
fontSize: "16px",
fontWeight: "bold",
textTransform: "uppercase",
},
};
data.title.text = "Customer Satisfaction";
Highcharts.setOptions({
colors: [
"#a9aaaa",
"#ffa836",
"#ff3b1d",
"#00b370",
"#64E572",
"#FF9655",
"#FFF263",
"#6AF9C4",
],
});
Highcharts.chart("highcharts-pie-container", <Highcharts.Options>data);
}
);
}
onReady() {
this.pivot.flexmonster.setReport(this.report);
}
onReportComplete() {
this.pivot.flexmonster.off("reportcomplete");
this.createComboChart();
this.createBarChart();
this.createPieChart();
}
}
<fm-pivot #pivot [toolbar]="true" [height]="600" (ready)="onReady()" [componentFolder]="'https://cdn.flexmonster.com/'" [licenseFilePath]="'https://cdn.flexmonster.com/jsfiddle.charts.key'" (reportcomplete)="onReportComplete()"></fm-pivot> <div style="margin-top: 50px;" id="highcharts-container"></div> <div style="margin-top: 30px;" id="highcharts-bar-container"></div> <div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-container"></div>
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. .