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
|
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Chart, LinearScale, CategoryScale } from 'chart.js';
import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';
function randomValues(count: number, min: number, max: number) {
const delta = max - min;
return Array.from({ length: count }).map(() => Math.random() * delta + min);
}
Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
@Component({
selector: 'app-box-plot',
templateUrl: './box-plot.component.html',
styleUrls: ['./box-plot.component.css']
})
export class BoxPlotComponent implements AfterViewInit {
@Input()width?: number;
@Input()height?: number;
@ViewChild('boxplot') chartRef!: ElementRef;
constructor() { }
boxplotData = {
// define label tree
labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'rgba(0, 65, 101, 1.0)',
borderColor: '#0063AB',
borderWidth: 1,
outlierColor: '#999999',
scaleFontColor: '#0063AB',
padding: 10,
itemRadius: 0,
data: [
randomValues(100, 0, 100),
/*randomValues(100, 0, 20),
randomValues(100, 20, 70),
randomValues(100, 60, 100),
randomValues(40, 50, 100),
randomValues(100, 60, 120),
randomValues(100, 80, 100)*/
]}/*, {
label: 'Dataset 2',
backgroundColor: 'rgba(0,0,255,0.5)',
borderColor: 'blue',
borderWidth: 1,
outlierColor: '#999999',
padding: 10,
itemRadius: 0,
data: [
randomValues(100, 60, 100),
randomValues(100, 0, 100),
randomValues(100, 0, 20),
randomValues(100, 20, 70),
randomValues(40, 60, 120),
randomValues(100, 20, 100),
randomValues(100, 80, 100)
]
}*/]
};
ngAfterViewInit(): void {
const myChart = new Chart(this.chartRef.nativeElement, {
type: "boxplot",
data: this.boxplotData,
options: {
/*title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}*/
plugins:{
legend: {
display: false
},
},
scales : {
x: {
ticks: {
color: 'rgba(0, 65, 101, 1.0)'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
},
y : {
min: -50,
max: 200,
ticks: {
color: 'rgba(0, 65, 101, 1.0)'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
}
}
}
});
}
}
|
