29 | [ Event ] {{ log.date | date:'mediumTime' }}:
30 | {{ log.event }} [ see details ]
32 |
33 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/src/app/common/toggle-switch/toggle-switch.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-toggle-switch',
5 | templateUrl: './toggle-switch.component.html',
6 | styleUrls: ['./toggle-switch.component.css'],
7 | standalone: false
8 | })
9 | export class ToggleSwitchComponent implements OnInit {
10 | @Input() public _id!: string;
11 | @Input() public labelOn!: string;
12 | @Input() public labelOff!: string;
13 |
14 | @Output() public clicked: EventEmitter
3 |
4 | 
5 |
6 |
21 |
5 |
6 | -
7 |
- 8 | Integration with Angular 9 | 10 |
- 11 | Docs 12 | 13 |
- 14 | Help center 15 | 16 |
- 17 | Contact us 18 | 19 |
Customizing the grid
2 | 3 |
4 |
9 |
10 | Style the grid by adding links, applying custom CSS, or formatting the cells. Check our docs for details: 5 | Customizing the grid. 6 |
7 |In this demo, the Price measure is customized.
8 |
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/examples/customizing-grid/customizing-grid.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-customizing-grid',
6 | templateUrl: './customizing-grid.component.html',
7 | styleUrls: ['./customizing-grid.component.css'],
8 | standalone: false
9 | })
10 | export class CustomizingGridComponent implements OnInit {
11 |
12 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
13 |
14 | constructor() { }
15 |
16 | ngOnInit(): void {
17 | }
18 |
19 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
20 | toolbar.showShareReportTab = true;
21 | }
22 |
23 | customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
24 | if (data.measure && data.measure.uniqueName == "Price") {
25 | let backgroundColor = "#00A45A";
26 | let textShadowColor = "#095231";
27 | let borderColor = "#009552";
28 | cell.style = {
29 | ...cell.style,
30 | "background-color": backgroundColor,
31 | "color": "white",
32 | "font-weight": "bold",
33 | "text-shadow": `0px 2px 3px ${textShadowColor}`,
34 | "border-bottom": `1px solid ${borderColor}`,
35 | "border-right": `1px solid ${borderColor}`
36 | };
37 | }
38 | }
39 |
40 | removeCustomization() {
41 | this.pivot.flexmonster.customizeCell(() => null);
42 | }
43 |
44 | applyCustomization() {
45 | this.pivot.flexmonster.customizeCell(this.customizeCellFunction);
46 | }
47 |
48 | toggleCustomization(checked: boolean) {
49 | if (checked) {
50 | this.applyCustomization();
51 | } else {
52 | this.removeCustomization();
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/examples/customizing-toolbar/customizing-toolbar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/customizing-toolbar/customizing-toolbar.component.css
--------------------------------------------------------------------------------
/src/app/examples/customizing-toolbar/customizing-toolbar.component.html:
--------------------------------------------------------------------------------
1 | Customizing the Toolbar
2 | 3 |
4 |
10 |
11 | You can add, remove, and update the Toolbar tabs.
5 |In this demo, we’ve removed all the tabs and added a custom New Tab. 6 | See our docs to learn more about the Toolbar and its customization: 7 | Customizing the Toolbar. 8 |
9 |
12 |
--------------------------------------------------------------------------------
/src/app/examples/customizing-toolbar/customizing-toolbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-customizing-toolbar',
6 | templateUrl: './customizing-toolbar.component.html',
7 | styleUrls: ['./customizing-toolbar.component.css'],
8 | standalone: false
9 | })
10 | export class CustomizingToolbarComponent implements OnInit {
11 |
12 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
13 |
14 | constructor() { }
15 |
16 | ngOnInit(): void {
17 | }
18 |
19 | showInfo() {
20 | this.pivot.flexmonster.alert({
21 | title: "Customizing Flexmonster",
22 | message:
23 | "How to customize the Toolbar: https://www.flexmonster.com/doc/customizing-toolbar/ ", 24 | type: "info", 25 | blocking: false, 26 | }); 27 | } 28 | 29 | customizeToolbar(toolbar: Flexmonster.Toolbar) { 30 | let tabs = toolbar.getTabs(); 31 | toolbar.getTabs = () => { 32 | tabs = []; 33 | // add new tab 34 | tabs.push({ 35 | id: "fm-tab-newtab", 36 | title: "New Tab", 37 | handler: () => this.showInfo(), 38 | icon: toolbar.icons.open, 39 | }); 40 | return tabs; 41 | }; 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /src/app/examples/handling-events/handling-events.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/handling-events/handling-events.component.css -------------------------------------------------------------------------------- /src/app/examples/handling-events/handling-events.component.html: -------------------------------------------------------------------------------- 1 |
Handling Flexmonster events
2 | 3 |
4 |
11 |
12 | 5 | Perform an action (for example, click on a grid cell) to trigger a 6 | Flexmonster 7 | event. 8 | Scroll down to the log output to see which events get triggered. 9 |
10 |
13 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/examples/handling-events/handling-events.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-handling-events',
6 | templateUrl: './handling-events.component.html',
7 | styleUrls: ['./handling-events.component.css'],
8 | standalone: false
9 | })
10 | export class HandlingEventsComponent implements OnInit {
11 |
12 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
13 | @ViewChild('logsContainer')
14 | logsContainer!: ElementRefLog Output
26 |
27 |
35 |
38 |
28 |
34 | Pivot Table Demo
2 |
3 |
11 | Flexmonster is a fast and powerful JavaScript pivot grid for data visualization and reporting.
4 |With Flexmonster, you can create reports based on many data sources, including JSON, CSV, MongoDB, and SQL 5 | databases. 6 | Our component is easy to customize and configure, so it can be seamlessly integrated into any project. 7 |
8 |Visit our documentation for step-by-step guidance on 9 | Flexmonster.
10 |
12 |
16 |
--------------------------------------------------------------------------------
/src/app/examples/pivot-table-demo/pivot-table-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FlexmonsterPivotModule } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-pivot-table-demo',
6 | templateUrl: './pivot-table-demo.component.html',
7 | styleUrls: ['./pivot-table-demo.component.css'],
8 | imports: [FlexmonsterPivotModule],
9 | standalone: true
10 | })
11 | export class PivotTableDemoComponent implements OnInit {
12 |
13 | constructor() { }
14 |
15 | ngOnInit(): void {
16 | }
17 |
18 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
19 | toolbar.showShareReportTab = true;
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/examples/updating-data/updating-data.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/updating-data/updating-data.component.css
--------------------------------------------------------------------------------
/src/app/examples/updating-data/updating-data.component.html:
--------------------------------------------------------------------------------
1 | Updating the data in Flexmonster
2 | 3 |
4 |
12 |
13 |
14 |
15 | 5 | This demo shows how to refresh the data at runtime and keep the slice, options, and formatting the same. 6 |
7 |Try it yourself: configure the component as you wish and click the UPDATE DATA button.
8 |Learn more about updating the data 9 | in our documentation. 10 |
11 |
16 |
--------------------------------------------------------------------------------
/src/app/examples/updating-data/updating-data.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-updating-data',
6 | templateUrl: './updating-data.component.html',
7 | styleUrls: ['./updating-data.component.css'],
8 | standalone: false
9 | })
10 | export class UpdatingDataComponent implements OnInit {
11 |
12 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
13 |
14 | public data: Object[] = [
15 | {
16 | Category: "Accessories",
17 | Size: "262 oz",
18 | Color: "red",
19 | Destination: "Australia",
20 | "Business Type": "Specialty Bike Shop",
21 | Country: "Australia",
22 | Price: 100,
23 | Quantity: 225,
24 | Discount: 23,
25 | },
26 | {
27 | Category: "Components",
28 | Size: "235 oz",
29 | Color: "green",
30 | Destination: "Australia",
31 | "Business Type": "Warehouse",
32 | Country: "Australia",
33 | Price: 200,
34 | Quantity: 1950,
35 | Discount: 51,
36 | },
37 | ];
38 |
39 | constructor() { }
40 |
41 | ngOnInit(): void {
42 | }
43 |
44 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
45 | toolbar.showShareReportTab = true;
46 | }
47 |
48 | onReady() {
49 | // Connect Flexmonster to the data
50 | this.pivot.flexmonster.connectTo({ data: this.data });
51 | }
52 |
53 | updateTheData() {
54 | // If the data got updated, for example:
55 | this.data = [
56 | {
57 | Category: "Accessories",
58 | Size: "262 oz",
59 | Color: "red",
60 | Destination: "Australia",
61 | "Business Type": "Specialty Bike Shop",
62 | Country: "Australia",
63 | Price: Math.floor(Math.random() * Math.floor(1000)),
64 | Quantity: 225,
65 | Discount: 23,
66 | },
67 | {
68 | Category: "Components",
69 | Size: "307 oz",
70 | Color: "white",
71 | Destination: "United Kingdom",
72 | "Business Type": "Warehouse",
73 | Country: "Canada",
74 | Price: Math.floor(Math.random() * Math.floor(1000)),
75 | Quantity: 8212,
76 | Discount: 55,
77 | },
78 | ];
79 | // then the data needs to be updated in Flexmonster as well
80 | // this can be done via Flexmonster's updateData() API call:
81 | this.pivot.flexmonster.updateData({ data: this.data });
82 | }
83 |
84 | }
85 |
--------------------------------------------------------------------------------
/src/app/examples/using-api-calls/using-api-calls.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/using-api-calls/using-api-calls.component.css
--------------------------------------------------------------------------------
/src/app/examples/using-api-calls/using-api-calls.component.html:
--------------------------------------------------------------------------------
1 | Using Flexmonster API calls
2 | 3 |
4 |
10 |
11 | 5 | Flexmonster provides API calls 6 | for interacting with the component. 7 | As an example, we've added the toggle buttons below. Use them to switch between the views or make Flexmonster read-only. 8 |
9 |
12 |
14 |
15 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/app/examples/using-api-calls/using-api-calls.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | @Component({
5 | selector: 'app-using-api-calls',
6 | templateUrl: './using-api-calls.component.html',
7 | styleUrls: ['./using-api-calls.component.css'],
8 | standalone: false
9 | })
10 | export class UsingApiCallsComponent implements OnInit {
11 |
12 | @ViewChild('pivot')
13 | pivot!: FlexmonsterPivot;
14 |
15 | constructor() { }
16 |
17 | ngOnInit(): void {
18 | }
19 |
20 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
21 | toolbar.showShareReportTab = true;
22 | }
23 |
24 | toggleView(checked: boolean) {
25 | if (checked) {
26 | this.showGrid();
27 | } else {
28 | this.showChart();
29 | }
30 | }
31 |
32 | toggleMode(checked: boolean) {
33 | if (checked) {
34 | this.interactive();
35 | } else {
36 | this.readOnly();
37 | }
38 | }
39 |
40 | showChart() {
41 | this.pivot.flexmonster.showCharts("column");
42 | }
43 |
44 | showGrid() {
45 | this.pivot.flexmonster.showGrid();
46 | }
47 |
48 | readOnly() {
49 | this.pivot.flexmonster.setOptions({
50 | readOnly: true
51 | });
52 | this.pivot.flexmonster.refresh();
53 | }
54 |
55 | interactive() {
56 | this.pivot.flexmonster.setOptions({
57 | readOnly: false
58 | });
59 | this.pivot.flexmonster.refresh();
60 | }
61 |
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts/with-amcharts.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/with-amcharts/with-amcharts.component.css
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts/with-amcharts.component.html:
--------------------------------------------------------------------------------
1 | Integrating with amCharts
2 | 3 |
4 |
8 |
9 | Extend Flexmonster’s visualization functionality by integrating with the amCharts library: 5 | Integration with amCharts. 6 |
7 |
10 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts/with-amcharts.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, OnInit } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | // amCharts imports
5 | import * as am5 from "@amcharts/amcharts5";
6 | import * as am5xy from "@amcharts/amcharts5/xy";
7 | import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
8 |
9 | // Importing Flexmonster Connector for amCharts
10 | import "flexmonster/lib/flexmonster.amcharts.js";
11 |
12 | @Component({
13 | selector: 'app-with-amcharts',
14 | templateUrl: './with-amcharts.component.html',
15 | styleUrls: ['./with-amcharts.component.css'],
16 | standalone: false
17 | })
18 | export class WithAmchartsComponent implements OnInit {
19 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
20 |
21 | private flexmonster!: Flexmonster.Pivot;
22 | private root!: am5.Root;
23 |
24 | public report: Flexmonster.Report = {
25 | dataSource: {
26 | filename: 'https://cdn.flexmonster.com/data/data.csv'
27 | },
28 | slice: {
29 | rows: [{
30 | uniqueName: 'Country'
31 | }],
32 | columns: [{
33 | uniqueName: '[Measures]'
34 | }],
35 | measures: [{
36 | uniqueName: 'Price',
37 | aggregation: 'sum'
38 | }]
39 | }
40 | };
41 |
42 | constructor() { }
43 |
44 | ngOnInit(): void {
45 | }
46 |
47 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
48 | toolbar.showShareReportTab = true;
49 | }
50 |
51 | drawChart() {
52 | this.pivot.flexmonster.amcharts?.getData(
53 | {},
54 | this.createChart.bind(this),
55 | this.updateChart.bind(this)
56 | );
57 | }
58 |
59 | onReportComplete() {
60 | this.pivot.flexmonster.off("reportcomplete");
61 | this.drawChart();
62 | }
63 |
64 | createChart = (chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
65 |
66 | /* Create root element and chart instance */
67 | this.root = am5.Root.new("amcharts-container");
68 | let chart = this.root.container.children.push(am5xy.XYChart.new(this.root, {
69 | }));
70 |
71 | /* Apply amCharts theme */
72 | this.root.setThemes([
73 | am5themes_Animated.new(this.root),
74 | ]);
75 |
76 | /* Apply number format from Flexmonster */
77 | this.root.numberFormatter.set("numberFormat", this.pivot.flexmonster.amcharts?.getNumberFormatPattern((rawData.meta as any).formats[0]));
78 |
79 | /* Create and configure Y axis */
80 | let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(this.root, {
81 | categoryField: this.pivot.flexmonster.amcharts?.getCategoryName(rawData)!,
82 | renderer: am5xy.AxisRendererY.new(this.root, {
83 | cellStartLocation: 0.1,
84 | cellEndLocation: 0.9
85 | })
86 | }));
87 |
88 | /* Create and configure X axis */
89 | let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(this.root, {
90 | renderer: am5xy.AxisRendererX.new(this.root, {}),
91 | }));
92 |
93 | xAxis.set("numberFormatter", am5.NumberFormatter.new(this.root, {
94 | "numberFormat": "#a"
95 | }));
96 |
97 | /* Create and configure series for a bar chart */
98 | let series = chart.series.push(am5xy.ColumnSeries.new(this.root, {
99 | name: this.pivot.flexmonster.amcharts?.getMeasureNameByIndex(rawData, 0),
100 | xAxis: xAxis,
101 | yAxis: yAxis as any,
102 | sequencedInterpolation: true,
103 | valueXField: this.pivot.flexmonster.amcharts?.getMeasureNameByIndex(rawData, 0),
104 | categoryYField: this.pivot.flexmonster.amcharts?.getCategoryName(rawData),
105 | tooltip: am5.Tooltip.new(this.root, {
106 | labelText: '{name}: [bold]{valueX}[/]'
107 | })
108 | }));
109 |
110 | chart.set("cursor", am5xy.XYCursor.new(this.root, {
111 | behavior: "none",
112 | xAxis: xAxis,
113 | yAxis: yAxis
114 | }));
115 |
116 | /* Add data processed by Flexmonster to the chart */
117 | yAxis.data.setAll(chartData.data);
118 | series.data.setAll(chartData.data);
119 |
120 | /* Create initial animation */
121 | series.appear(1000);
122 | chart.appear(1000, 100);
123 | }
124 |
125 | updateChart(chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) {
126 | this.root.dispose();
127 | this.createChart(chartData, rawData)
128 | }
129 |
130 | ngOnDestroy() {
131 | // Clean up this.chart when the component is removed
132 | if (this.root) {
133 | this.root.dispose();
134 | }
135 | }
136 |
137 | }
138 |
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts4/with-amcharts4.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/with-amcharts4/with-amcharts4.component.css
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts4/with-amcharts4.component.html:
--------------------------------------------------------------------------------
1 | Integrating with amCharts
2 | 3 |
4 |
8 |
9 | Extend Flexmonster’s visualization functionality by integrating with the amCharts library: 5 | Integration with amCharts. 6 |
7 |
10 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/app/examples/with-amcharts4/with-amcharts4.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, OnInit } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 |
4 | // Importing amCharts
5 | import * as am4core from '@amcharts/amcharts4/core';
6 | import * as am4charts from '@amcharts/amcharts4/charts';
7 | import am4themes_animated from '@amcharts/amcharts4/themes/animated';
8 |
9 | // Importing Flexmonster Connector for amCharts
10 | import "flexmonster/lib/flexmonster.amcharts.js";
11 |
12 | @Component({
13 | selector: 'app-with-amcharts4',
14 | templateUrl: './with-amcharts4.component.html',
15 | styleUrls: ['./with-amcharts4.component.css'],
16 | standalone: false
17 | })
18 | export class WithAmcharts4Component implements OnInit {
19 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
20 |
21 | chart!: am4charts.PieChart;
22 |
23 | public report: Flexmonster.Report = {
24 | dataSource: {
25 | filename: 'https://cdn.flexmonster.com/data/data.csv'
26 | },
27 | slice: {
28 | rows: [{
29 | uniqueName: 'Country'
30 | }],
31 | columns: [{
32 | uniqueName: '[Measures]'
33 | }],
34 | measures: [{
35 | uniqueName: 'Price',
36 | aggregation: 'sum'
37 | }]
38 | }
39 | };
40 |
41 | constructor() { }
42 |
43 | ngOnInit(): void {
44 | }
45 |
46 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
47 | toolbar.showShareReportTab = true;
48 | }
49 |
50 | drawChart() {
51 | this.pivot.flexmonster.amcharts?.getData(
52 | {},
53 | this.createChart.bind(this),
54 | this.updateChart.bind(this)
55 | );
56 | }
57 |
58 | onReportComplete() {
59 | this.pivot.flexmonster.off("reportcomplete");
60 | this.drawChart();
61 | }
62 |
63 | createChart(chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) {
64 |
65 | /* Apply amCharts theme */
66 | am4core.useTheme(am4themes_animated);
67 |
68 | /* Create chart instance */
69 | let chart = am4core.create("amcharts-container", am4charts.PieChart);
70 |
71 | /* Add data processed by Flexmonster to the chart */
72 | chart.data = chartData.data;
73 |
74 | /* Set an inner radius to transform a pie chart into a donut chart */
75 | chart.innerRadius = am4core.percent(50);
76 |
77 | /* Create and configure series for a pie chart */
78 | var pieSeries = chart.series.push(new am4charts.PieSeries());
79 | pieSeries.dataFields.category = this.pivot.flexmonster.amcharts?.getCategoryName(rawData);
80 | pieSeries.dataFields.value = this.pivot.flexmonster.amcharts?.getMeasureNameByIndex(rawData, 0);
81 | pieSeries.slices.template.stroke = am4core.color("#fff");
82 | pieSeries.slices.template.strokeWidth = 2;
83 | pieSeries.slices.template.strokeOpacity = 1;
84 |
85 | /* Create initial animation */
86 | pieSeries.hiddenState.properties.opacity = 1;
87 | pieSeries.hiddenState.properties.endAngle = -90;
88 | pieSeries.hiddenState.properties.startAngle = -90;
89 |
90 | this.chart = chart;
91 | }
92 |
93 | updateChart(chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) {
94 | this.chart.dispose();
95 | this.createChart(chartData, rawData)
96 | }
97 |
98 | ngOnDestroy() {
99 | // Clean up this.chart when the component is removed
100 | if (this.chart) {
101 | this.chart.dispose();
102 | }
103 | }
104 |
105 | }
106 |
--------------------------------------------------------------------------------
/src/app/examples/with-highcharts/with-highcharts.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flexmonster/pivot-angular/11a21cb3df58cc26e8f52f3d0bd387ab50be2200/src/app/examples/with-highcharts/with-highcharts.component.css
--------------------------------------------------------------------------------
/src/app/examples/with-highcharts/with-highcharts.component.html:
--------------------------------------------------------------------------------
1 | Integrating with Highcharts
2 | 3 |
4 |
9 |
10 | Integrate Flexmonster with Highcharts and see your data from a new perspective: 5 | Integration with Highcharts. 7 |
8 |
11 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/examples/with-highcharts/with-highcharts.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { FlexmonsterPivot } from 'ngx-flexmonster';
3 | // Importing Highcharts
4 | import * as Highcharts from 'highcharts';
5 | // Importing Flexmonster Connector for Highcharts
6 | import "flexmonster/lib/flexmonster.highcharts.js";
7 |
8 | @Component({
9 | selector: 'app-with-highcharts',
10 | templateUrl: './with-highcharts.component.html',
11 | styleUrls: ['./with-highcharts.component.css'],
12 | standalone: false
13 | })
14 | export class WithHighchartsComponent implements OnInit {
15 |
16 | @ViewChild('pivot') pivot!: FlexmonsterPivot;
17 |
18 | constructor() { }
19 |
20 | ngOnInit(): void {
21 | }
22 |
23 | customizeToolbar(toolbar: Flexmonster.Toolbar) {
24 | toolbar.showShareReportTab = true;
25 | }
26 |
27 | drawChart() {
28 | this.pivot.flexmonster.highcharts?.getData(
29 | {
30 | type: "spline"
31 | },
32 | (data: Flexmonster.GetDataValueObject) => {
33 | Highcharts.chart('highcharts-container',