funky-framadate-front/src/app/poll-graphic/poll-graphic.component.ts

75 lines
2.0 KiB
TypeScript
Raw Normal View History

import { Component, OnInit } from "@angular/core";
import { Chart } from "chart.js";
2019-10-23 10:45:30 +02:00
@Component({
selector: "framadate-poll-graphic",
templateUrl: "./poll-graphic.component.html",
styleUrls: ["./poll-graphic.component.scss"]
2019-10-23 10:45:30 +02:00
})
export class PollGraphicComponent implements OnInit {
isColorblind: boolean;
lineChart: Chart;
pollData: any;
2019-10-23 10:45:30 +02:00
constructor() {}
2019-10-23 15:39:16 +02:00
ngOnInit() {
2019-10-23 15:39:16 +02:00
//const data = this.formatDataAnswers();
2019-10-23 10:45:30 +02:00
this.isColorblind = false;
2019-11-18 10:19:28 +01:00
this.pollData = new Chart(document.getElementById("graph"), {
type: 'horizontalBar',
data: {
2019-11-18 10:19:28 +01:00
labels: ["Je 17 août 8h00", "Je 17 août 8h00", "Je 17 août 8h00"],
datasets: [{
type: "horizontalBar",
stack: "Yes",
backgroundColor: "#429a00",
data: [30, 31, 32, 33, 34, 35, 36],
}, {
type: "horizontalBar",
stack: "Yes",
backgroundColor: "#f5a623",
data: [15, 16, 17, 18, 19, 20, 21],
}, {
type: "horizontalBar",
stack: "No",
backgroundColor: "#cd0000",
data: [20, 21, 22, 23, 24, 25, 26],
}]
},
options: {
2019-11-18 10:19:28 +01:00
legend:{display:false},
scales: {
xAxes: [{
gridLines: {drawBorder:false, display:false},
display:false,
stacked: true,
ticks: {
beginAtZero: true,
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
gridLines: {drawBorder: true, display: false},
display:true,
stacked: true,
}]
},
}
2019-11-18 10:19:28 +01:00
});
}
setColorblind() {
this.isColorblind = !this.isColorblind;
}
2019-11-18 10:19:28 +01:00
formatDataAnswers(){
}
2019-11-18 10:19:28 +01:00
2019-10-23 10:45:30 +02:00
}