admin管理员组文章数量:1387360
I need to show some data in my line graph in my Angular 6 app, after a certain amount of time, so lets say each 333ms to show some data. I am displaying data registered in max 30 sec, so every graph data can last maximum of 30 seconds. It has to start on a button click.
Here is some test data I created just for testing purposes:
test_data = {
'222': {
joy: 66.5057373046875,
fear: 1.0003513832343742,
anger: 2.000018799044483,
disgust: 3.004251452162862,
sadness: 4.0001135088386945,
contempt: 5.001299204188399,
surprise: 6.203749045729637
},
'238': {
joy: 97.06363677978516,
fear: 17.500137131541123,
anger: 27.00000593749519,
disgust: 6.001324078417383,
sadness: 21.000043172625737,
contempt: 21.00033742573578,
surprise: 32.62530106306076
},
'722': {
joy: 66.5057373046875,
fear: 60.000351383234374,
anger: 70.00001879904448,
disgust: 10.004251452162862,
sadness: 92.0001135088387,
contempt: 40.0012992041884,
surprise: 50.20374904572964
},
'838': {
joy: 97.06363677978516,
fear: 15.000137131541123,
anger: 64.50000593749519,
disgust: 24.501324078417383,
sadness: 31.500043172625737,
contempt: 18.50033742573578,
surprise: 6.2048268765211105
},
'1722': {
joy: 66.5057373046875,
fear: 54.000351383234374,
anger: 72.00001879904448,
disgust: 0.004251452162861824,
sadness: 80.0001135088387,
contempt: 20.0012992041884,
surprise: 20.203749045729637
},
'2838': {
joy: 95.37223815917969,
fear: 41.000168004859006,
anger: 62.00000752212509,
disgust: 33.001674098544754,
sadness: 3.000052563053032,
contempt: 44.00044780407916,
surprise: 4.204549819231033
},
'2839': {
joy: 98.75503540039062,
fear: 1.0001062582232407,
anger: 1.0000043528652895,
disgust: 1.0009740582900122,
sadness: 2.000033782198443,
contempt: 2.0002270473924,
surprise: 1.2051039338111877
}
};
Here, these values '222', '238' etc, are milliseconds where these values need to be shown in the graph. I structured this data so I have arrays like this:
joyArray = {
data: [66.5057373046875, 97.06363677978516, 66.5057373046875, 97.06363677978516, 66.5057373046875, 95.37223815917969, 98.75503540039062],
label: '',
borderColor: 'rgba(255, 217, 40, 1)',
backgroundColor: 'transparent',
fill: false
};
// push all arrays into this array to show it on the graph
this.chartData.push(this.joyArray, this.fearArray, this.angerArray, this.disgustArray, this.sadnessArray,
this.surpriseArray, this.contemptArray);
and so on, for every object property.
My graph is implemented like this:
<canvas id="chartCanvas"></canvas>
This is what it looks like:
So I need to click on a button and show these values for each frame (222ms, 238ms...), anyone has an idea how to do this using chartJS?
EDIT: changed the structure of arrays, now it is an object with data inside. Draw chart function looks like this:
drawChart() {
this.chart = new Chart('chartCanvas', {
type: 'line',
data: this.data,
options: this.options
});
}
Data object:
data = {
labels: [],
datasets: [] // datasets = this.chartData;
};
I need to show some data in my line graph in my Angular 6 app, after a certain amount of time, so lets say each 333ms to show some data. I am displaying data registered in max 30 sec, so every graph data can last maximum of 30 seconds. It has to start on a button click.
Here is some test data I created just for testing purposes:
test_data = {
'222': {
joy: 66.5057373046875,
fear: 1.0003513832343742,
anger: 2.000018799044483,
disgust: 3.004251452162862,
sadness: 4.0001135088386945,
contempt: 5.001299204188399,
surprise: 6.203749045729637
},
'238': {
joy: 97.06363677978516,
fear: 17.500137131541123,
anger: 27.00000593749519,
disgust: 6.001324078417383,
sadness: 21.000043172625737,
contempt: 21.00033742573578,
surprise: 32.62530106306076
},
'722': {
joy: 66.5057373046875,
fear: 60.000351383234374,
anger: 70.00001879904448,
disgust: 10.004251452162862,
sadness: 92.0001135088387,
contempt: 40.0012992041884,
surprise: 50.20374904572964
},
'838': {
joy: 97.06363677978516,
fear: 15.000137131541123,
anger: 64.50000593749519,
disgust: 24.501324078417383,
sadness: 31.500043172625737,
contempt: 18.50033742573578,
surprise: 6.2048268765211105
},
'1722': {
joy: 66.5057373046875,
fear: 54.000351383234374,
anger: 72.00001879904448,
disgust: 0.004251452162861824,
sadness: 80.0001135088387,
contempt: 20.0012992041884,
surprise: 20.203749045729637
},
'2838': {
joy: 95.37223815917969,
fear: 41.000168004859006,
anger: 62.00000752212509,
disgust: 33.001674098544754,
sadness: 3.000052563053032,
contempt: 44.00044780407916,
surprise: 4.204549819231033
},
'2839': {
joy: 98.75503540039062,
fear: 1.0001062582232407,
anger: 1.0000043528652895,
disgust: 1.0009740582900122,
sadness: 2.000033782198443,
contempt: 2.0002270473924,
surprise: 1.2051039338111877
}
};
Here, these values '222', '238' etc, are milliseconds where these values need to be shown in the graph. I structured this data so I have arrays like this:
joyArray = {
data: [66.5057373046875, 97.06363677978516, 66.5057373046875, 97.06363677978516, 66.5057373046875, 95.37223815917969, 98.75503540039062],
label: '',
borderColor: 'rgba(255, 217, 40, 1)',
backgroundColor: 'transparent',
fill: false
};
// push all arrays into this array to show it on the graph
this.chartData.push(this.joyArray, this.fearArray, this.angerArray, this.disgustArray, this.sadnessArray,
this.surpriseArray, this.contemptArray);
and so on, for every object property.
My graph is implemented like this:
<canvas id="chartCanvas"></canvas>
This is what it looks like:
So I need to click on a button and show these values for each frame (222ms, 238ms...), anyone has an idea how to do this using chartJS?
EDIT: changed the structure of arrays, now it is an object with data inside. Draw chart function looks like this:
drawChart() {
this.chart = new Chart('chartCanvas', {
type: 'line',
data: this.data,
options: this.options
});
}
Data object:
data = {
labels: [],
datasets: [] // datasets = this.chartData;
};
3 Answers
Reset to default 2 +50
test_data = {
'1222': {
joy: 66.5057373046875,
fear: 1.0003513832343742,
anger: 2.000018799044483,
disgust: 3.004251452162862,
sadness: 4.0001135088386945,
contempt: 5.001299204188399,
surprise: 6.203749045729637
},
'2238': {
joy: 97.06363677978516,
fear: 17.500137131541123,
anger: 27.00000593749519,
disgust: 6.001324078417383,
sadness: 21.000043172625737,
contempt: 21.00033742573578,
surprise: 32.62530106306076
},
'3722': {
joy: 66.5057373046875,
fear: 60.000351383234374,
anger: 70.00001879904448,
disgust: 10.004251452162862,
sadness: 92.0001135088387,
contempt: 40.0012992041884,
surprise: 50.20374904572964
},
'4838': {
joy: 97.06363677978516,
fear: 15.000137131541123,
anger: 64.50000593749519,
disgust: 24.501324078417383,
sadness: 31.500043172625737,
contempt: 18.50033742573578,
surprise: 6.2048268765211105
},
'5722': {
joy: 66.5057373046875,
fear: 54.000351383234374,
anger: 72.00001879904448,
disgust: 0.004251452162861824,
sadness: 80.0001135088387,
contempt: 20.0012992041884,
surprise: 20.203749045729637
},
'6838': {
joy: 95.37223815917969,
fear: 41.000168004859006,
anger: 62.00000752212509,
disgust: 33.001674098544754,
sadness: 3.000052563053032,
contempt: 44.00044780407916,
surprise: 4.204549819231033
},
'7839': {
joy: 98.75503540039062,
fear: 1.0001062582232407,
anger: 1.0000043528652895,
disgust: 1.0009740582900122,
sadness: 2.000033782198443,
contempt: 2.0002270473924,
surprise: 1.2051039338111877
}
};
var arr = Object.entries(test_data)
var options = {
type: 'line',
data: {
labels: ["joy", "fear", "anger", "disgust", "sadness", "contempt", "surprise"],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myC = new Chart(ctx, options);
arr.forEach((v) => {
setTimeout(() => {
myC.data.datasets.push({
data: [v[1].joy, v[1].fear, v[1].anger, v[1].disgust, v[1].sadness, v[1].contempt, v[1].surprise],
label: "#" + v[0] + "Milisec"
});
myC.update()
}, parseInt(v[0]))
})canvas { background-color : #eee;
}<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>I understand you want to update view with new fresh json data every xx ms in summary you need to :
- have a service which exposes a shared observable, say data$;
- the service has the method to fetch the remote data and update the shared observable above, say getRemoteData()
- that service Observable.interval() which calls the method to fetch the remote data
- have your ponent that displays the data
- have the ponent subscribe to the data observable from the service.
the next sample code illustrates how to implement it
import {takeWhile, first} from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { interval } from "rxjs";
import { PositionsModel } from "./positionsmodel";
import { MouvementService } from './mouvement.service';
@Component({
selector: 'app-mouvementview',
template: '<div *ngIf="data"> your chart </div>',
})
export class MouvementviewComponent implements OnInit {
public data: PositionsModel;
private display: boolean; // whether to display info in the ponent
// use *ngIf="display" in your html to take
// advantage of this
private alive: boolean; // used to unsubscribe from the IntervalObservable
// when OnDestroy is called.
results : string;
// Inject mouvementService
constructor(private mouvementService: MouvementService) {
this.display = false;
}
ngOnInit() {
this.mouvementService.getPositions().pipe(
first()) // only gets fired once
.subscribe((data) => {
this.data = data;
this.display = true;
this.alive = true;
});
// get our data every subsequent 200 mseconds
interval(200).pipe(
takeWhile(() => this.alive)) // only fires when ponent is alive
.subscribe(() => {
this.mouvementService.getPositions()
.subscribe(data => {
console.log(data);
this.data = data;
});
});
}
ngOnDestroy(){
this.alive = false; // switches your IntervalObservable off
}
}
You can use Chart.js's addData() function with a setTimeout method for this.
<!DOCTYPE html>
<html>
<head>
<title>Add data</title>
<script src = "https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.3/Chart.js"></script>
</head>
<body>
<div class = "container">
<canvas id="myChart"></canvas>
</div>
<script src = "script.js"></script>
</body>
</html>
script.js
let ctx = document.getElementById("myChart").getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 9, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
setTimeout(function() {
addData(myChart, "White", 7);
},3000);
function addData(chart, label, data) {
console.log(console.log(chart.data.datasets[0].data));
chart.data.labels.push(label);
chart.data.datasets[0].data.push(data);
chart.update();
}
Hope this could be helpful. You can change setTimeout to setInterval if you prefer adding data to the chart in intervals (such as every 2 secs).
本文标签： javascriptShow data dynamically in line chartChartJSStack Overflow
版权声明：本文标题：javascript - Show data dynamically in line chart - ChartJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744568298a2613185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论