diff options
author | TAMARA JERINIC <tamara.jerinic@gmail.com> | 2022-04-19 21:27:47 +0200 |
---|---|---|
committer | TAMARA JERINIC <tamara.jerinic@gmail.com> | 2022-04-19 21:42:25 +0200 |
commit | 2c68a5c7926bfb62902ef9ad4b705d675c2293f7 (patch) | |
tree | 00380afb18456bd6aeb20c2f33ff3dd3eace883d /frontend/src/app/_elements/line-chart | |
parent | d1528c6739ff702efa8963dc8e2f6e097e97eb0b (diff) |
Dodate ispravljena komponenta za kreiranje grafika i dodata komponenta za njegov prikaz.
Diffstat (limited to 'frontend/src/app/_elements/line-chart')
-rw-r--r-- | frontend/src/app/_elements/line-chart/line-chart.component.html | 8 | ||||
-rw-r--r-- | frontend/src/app/_elements/line-chart/line-chart.component.ts | 70 |
2 files changed, 28 insertions, 50 deletions
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html index 8607aac5..c8f406f4 100644 --- a/frontend/src/app/_elements/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/line-chart/line-chart.component.html @@ -1,9 +1,5 @@ <div class="chart-wrapper"> - <canvas baseChart - [datasets]="lineChartData" - [labels]="lineChartLabels" - [options]="lineChartOptions" - [legend]="lineChartLegend" - [plugins]="lineChartPlugins"> + <canvas id="myChart"> + </canvas> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts index 7a06ecf5..68663861 100644 --- a/frontend/src/app/_elements/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts @@ -1,57 +1,39 @@ -import { Component, OnInit } from '@angular/core'; -import { ChartOptions } from 'chart.js'; +import { Component, OnInit,Input } from '@angular/core'; import { BaseChartDirective } from 'ng2-charts'; - +import {Chart} from 'chart.js'; @Component({ selector: 'app-line-chart', templateUrl: './line-chart.component.html', styleUrls: ['./line-chart.component.css'] }) -export class LineChartComponent implements OnInit { +export class LineChartComponent implements OnInit { + @Input() dataAcc=[] ; + @Input() dataEpoch=[]; constructor() { } ngOnInit(): void { - } - lineChartData:Array<any> = [ - {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, - {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}, - {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'} - ]; - lineChartLabels: BaseChartDirective["labels"] = ['January', 'February', 'March', 'April', 'May', 'June']; - lineChartOptions = { - responsive: true, - }; - lineChartColors:Array<any> = [ - { // grey - backgroundColor: 'rgba(148,159,177,0.2)', - borderColor: 'rgba(148,159,177,1)', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' + var myChart=new Chart("myChart", + { + type: 'line', + data: { + labels:this.dataEpoch, + datasets: [{ + label: 'Vrednost', + data: this.dataAcc, + borderWidth: 1 + }] }, - { // dark grey - backgroundColor: 'rgba(77,83,96,0.2)', - borderColor: 'rgba(77,83,96,1)', - pointBackgroundColor: 'rgba(77,83,96,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(77,83,96,1)' - }, - { // grey - backgroundColor: 'rgba(148,159,177,0.2)', - borderColor: 'rgba(148,159,177,1)', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' + options: { + scales: { + y: { + beginAtZero: true + } + } } - ]; - lineChartLegend = true; - lineChartPlugins = []; - lineChartType = 'line'; - + } + ); + + } } - - +
\ No newline at end of file |