Flexmonster Pivot Charts for Angular is a great way to visualize aggregated data from the grid and get a different perspective on it.
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: Flexmonster.Report = {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/pivot-charts-demo-data.json",
},
options: {
viewType: "charts",
chart: {
type: "column",
},
},
slice: {
rows: [
{
uniqueName: "Order Date.Month",
},
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
query: {
top: 5,
},
},
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
},
formats: [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}]
};
constructor() {}
ngOnInit(): void {}
showGrid() {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
reportFilters: [
{
uniqueName: "Order Date.Year",
},
{
uniqueName: "Order Date.Month",
},
{
uniqueName: "Order Date.Day",
},
],
rows: [
{
uniqueName: "Payment Type",
},
],
columns: [
{
uniqueName: "[Measures]",
},
{
uniqueName: "Referring Site",
},
],
measures: [
{
uniqueName: "Revenue",
formula: 'sum("Amount") * sum("Price")',
individual: true,
caption: "Revenue",
format: "currency",
},
],
};
pivotReport.conditions = [
{
formula: "#value < 45000",
measure: "Revenue",
format: {
backgroundColor: "#df3800",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "#value > 400000",
measure: "Revenue",
format: {
backgroundColor: "#00a45a",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px",
},
},
];
pivotReport.options = {
viewType: "grid",
};
pivotReport.formats = [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}];
this.pivot.flexmonster.setReport(pivotReport);
}
showColumnChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Month",
},
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
query: {
top: 5,
},
},
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster.setReport(pivotReport);
}
showLineChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year",
},
],
columns: [
{
uniqueName: "[Measures]",
},
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
query: {
top: 2,
},
},
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
sorting: {
row: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
},
},
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster?.setReport(pivotReport);
}
showStackedColumn(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Payment Type",
filter: {
measure: {
uniqueName: "Orders",
},
query: {
top: 3,
},
},
},
],
columns: [
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders",
},
query: {
top: 3,
},
},
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
},
},
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster.setReport(pivotReport);
}
showBarChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
query: {
top: 6,
},
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
{
uniqueName: "Payment Type",
filter: {
members: ["payment type.[debit card]", "payment type.[invoice]"],
},
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster.setReport(pivotReport);
}
showPieChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Revenue",
},
query: {
top: 5,
},
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
formula: 'sum("Amount") * sum("Price")',
individual: true,
format: "currency",
caption: "Revenue",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster.setReport(pivotReport);
}
showScatterChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year",
},
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum",
},
query: {
top: 3,
},
},
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
this.pivot.flexmonster.setReport(pivotReport);
}
showColumnLineChart(type: string) {
let pivotReport = this.pivot.flexmonster?.getReport() as Flexmonster.Report;
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
{
uniqueName: "Revenue",
formula: 'sum("Amount") * sum("Price")',
individual: true,
caption: "Revenue",
format: "currency",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: type,
},
};
pivotReport.formats = [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}]
this.pivot.flexmonster.setReport(pivotReport);
}
}
<button (click)="showGrid()">Grid</button>
<button (click)="showColumnChart('column')">Column</button>
<button (click)="showBarChart('bar_h')">Bar</button>
<button (click)="showLineChart('line')">Line</button>
<button (click)="showScatterChart('scatter')">Scatter</button>
<button (click)="showPieChart('pie')">Pie</button>
<button (click)="showColumnLineChart('column_line')">Combo</button>
<button (click)="showStackedColumn('stacked_column')">Stacked</button>
<fm-pivot
#pivot
[height]="500"
[componentFolder]="'https://cdn.flexmonster.com/'"
[report]="report">
</fm-pivot>
#fm-pivot-view .fm-chart .fm-circle {
r: 8;
}
/* Chart style */
.fm-charts-color-1 {
fill: rgb(0, 164, 90) !important;
}
.fm-charts-color-2 {
fill: rgb(223, 56, 0) !important;
}
.fm-charts-color-3 {
fill: rgb(255, 184, 0) !important;
}
.fm-charts-color-4 {
fill: rgb(109, 59, 216) !important;
}
.fm-charts-color-5 {
fill: rgb(0, 117, 255) !important;
}
#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
opacity: 70% !important;
}
#fm-yAxis-label,
#fm-xAxis > text,
#fm-yAxis > text {
display: none;
}
Our drillable Angular pivot charts have the same functionality as the pivot grid: you can expand and collapse the data, filter the members, and change the chart configurations on the fly.
The charts also have customizable tooltips and legend information to give a better user experience.
Our Angular reporting component has the following chart types:
Switch between different chart types and the pivot table view via UI or using API calls to see the data from another angle and gain even more insights.