/
data-chart-type-radial-series.component.ts
128 lines (111 loc) · 5.22 KB
/
data-chart-type-radial-series.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component";
import { IgxLegendComponent } from "igniteui-angular-charts/ES5/igx-legend-component";
// axis components
import { IgxCategoryAngleAxisComponent } from "igniteui-angular-charts/ES5/igx-category-angle-axis-component";
import { IgxNumericRadiusAxisComponent } from "igniteui-angular-charts/ES5/igx-numeric-radius-axis-component";
// series components:
import { IgxRadialAreaSeriesComponent } from "igniteui-angular-charts/ES5/igx-radial-area-series-component";
import { IgxRadialColumnSeriesComponent } from "igniteui-angular-charts/ES5/igx-radial-column-series-component";
import { IgxRadialLineSeriesComponent } from "igniteui-angular-charts/ES5/igx-radial-line-series-component";
import { IgxRadialPieSeriesComponent } from "igniteui-angular-charts/ES5/igx-radial-pie-series-component";
import { SampleRadialData } from "../SampleRadialData";
@Component({
selector: "app-data-chart-type-radial-series",
styleUrls: ["./data-chart-type-radial-series.component.scss"],
templateUrl: "./data-chart-type-radial-series.component.html"
})
export class DataChartTypeRadialSeriesComponent implements OnInit {
@ViewChild("chart")
public chart: IgxDataChartComponent;
@ViewChild("legend")
public legend: IgxLegendComponent;
@ViewChild("angleAxis")
public angleAxis: IgxCategoryAngleAxisComponent;
@ViewChild("radiusAxis")
public radiusAxis: IgxNumericRadiusAxisComponent;
public data: any[];
public seriesType: string;
constructor() { }
public ngOnInit() {
this.seriesType = "Pie";
this.data = SampleRadialData.create();
this.setSeries("Pie");
}
public onSeriesTypeChanged(e: any) {
const selectedSeries = e.target.value.toString();
this.seriesType = selectedSeries;
this.setSeries(selectedSeries);
}
public setSeries(seriesType: string) {
if (seriesType === "Area") {
// creating a series with mapping to data columns of financial data
const series1 = new IgxRadialAreaSeriesComponent();
series1.name = "series1";
series1.valueMemberPath = "Budget";
series1.valueAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxRadialAreaSeriesComponent();
series2.name = "series2";
series2.valueMemberPath = "Spending";
series2.valueAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.title = "Budget";
series2.title = "Spending";
this.chart.series.clear();
this.chart.series.add(series1);
this.chart.series.add(series2);
} else if (seriesType === "Pie") {
// creating a series with mapping to data columns of financial data
const series1 = new IgxRadialPieSeriesComponent();
series1.name = "series1";
series1.valueMemberPath = "Budget";
series1.valueAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxRadialPieSeriesComponent();
series2.name = "series2";
series2.valueMemberPath = "Spending";
series2.valueAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.title = "Budget";
series2.title = "Spending";
this.chart.series.clear();
this.chart.series.add(series1);
this.chart.series.add(series2);
} else if (seriesType === "Line") {
// creating a series with mapping to data columns of financial data
const series1 = new IgxRadialLineSeriesComponent();
series1.name = "series1";
series1.valueMemberPath = "Budget";
series1.valueAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxRadialLineSeriesComponent();
series2.name = "series2";
series2.valueMemberPath = "Spending";
series2.valueAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.title = "Budget";
series2.title = "Spending";
this.chart.series.clear();
this.chart.series.add(series1);
this.chart.series.add(series2);
} else if (seriesType === "Column") {
// creating a series with mapping to data columns of financial data
const series1 = new IgxRadialColumnSeriesComponent();
series1.name = "series1";
series1.valueMemberPath = "Budget";
series1.valueAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxRadialColumnSeriesComponent();
series2.name = "series2";
series2.valueMemberPath = "Spending";
series2.valueAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.title = "Budget";
series2.title = "Spending";
this.chart.series.clear();
this.chart.series.add(series1);
this.chart.series.add(series2);
}
}
}