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
|
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 = 800;
@Input()height: number = 450;
@ViewChild('boxplot') chartRef!: ElementRef;
constructor() { }
boxplotData = {
// define label tree
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'rgba(255,0,0,0.5)',
borderColor: 'red',
borderWidth: 1,
outlierColor: '#999999',
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
});
}
}
|
