aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_elements/_charts/box-plot
diff options
context:
space:
mode:
authorSonja Galovic <galovicsonja@gmail.com>2022-04-26 22:47:39 +0200
committerSonja Galovic <galovicsonja@gmail.com>2022-04-26 22:47:39 +0200
commita8a04c45c8941afde34ec0765a0e5f4051fe1f02 (patch)
tree3ea2f30ba4f2df7c98d222f8b107087a0292c57d /frontend/src/app/_elements/_charts/box-plot
parent2c22d31667a4a5be24224651a570b1086d2ded7b (diff)
Dodat poziv back-u za deo fajla sa podacima (planirano stranicenje). Prikaz podataka iz dataseta u okviru glavne tabele. Uredjeni grafici za statistiku.
Diffstat (limited to 'frontend/src/app/_elements/_charts/box-plot')
-rw-r--r--frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts62
1 files changed, 39 insertions, 23 deletions
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index 078e7176..45e83e83 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -16,33 +16,32 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
})
export class BoxPlotComponent implements AfterViewInit {
- @Input()width: number = 800;
- @Input()height: number = 450;
+ @Input()width: number = 600;
+ @Input()height: number = 800;
@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)
- ]
- }, {
+ 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',
@@ -59,12 +58,29 @@ export class BoxPlotComponent implements AfterViewInit {
randomValues(100, 20, 100),
randomValues(100, 80, 100)
]
- }]
+ }*/]
};
ngAfterViewInit(): void {
const myChart = new Chart(this.chartRef.nativeElement, {
type: "boxplot",
- data: this.boxplotData
+ data: this.boxplotData,
+ options: {
+ /*title: {
+ display: true,
+ text: 'Predicted world population (millions) in 2050'
+ }*/
+ plugins:{
+ legend: {
+ display: false
+ },
+ },
+ scales : {
+ y : {
+ min: -50,
+ max: 200
+ }
+ }
+ }
});
}