score:0
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 component that displays the data
- have the component 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 component
// 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 component is alive
.subscribe(() => {
this.mouvementservice.getpositions()
.subscribe(data => {
console.log(data);
this.data = data;
});
});
}
ngondestroy(){
this.alive = false; // switches your intervalobservable off
}
}
score:0
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.com/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).
score:2
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.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
</body>
Source: stackoverflow.com
Related Query
- Show data dynamically in line chart - ChartJS
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs random colors for each part of pie chart with data dynamically from database
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to dynamically set ChartJs line chart width based on dataset size?
- How to show data values in top of bar chart and line chart in chart.js 3
- chartjs show 24 hours in line chart
- assigning line chart data in chartjs
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- How to show the chartjs bar chart data values labels as text?
- Real-time line chart with ChartJS using Ajax data
- ChartJS dynamic line chart ghosting back to old data when hovered on
- dynamically update Chart.js draw line chart dataset data
- How to add data dynamically to primevue Line chart from vuejs3?
- Dynamically loaded chart data not showing Chartjs React
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How to dynamically update data of line chart used with chart Js?
- Show label for every data point in line chart
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- Add data to line chart js dynamically with multiple lines
- Chartjs sample line chart setup doesn't show dataLabels
- Show and plot zero values on ChartJS line graph when no data
- Dynamically update values of a chartjs chart
- Chartjs Bar Chart showing old data when hovering
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Chart.js how to show cursor pointer for labels & legends in line chart
- Display line chart with connected dots using chartJS
More Query from same tag
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- How to share same background color for multiple dataset in a chart?
- Change List<Object> into List<List<int>> using LINQ
- Building Chart.js master - generated .js gives errors
- Stacked bar chart results in misaligned bars
- Chart.js : sparser clickable data points
- How to differentiate the data of one topic or another coming from Mercure hub if the client is suscribed to two topics
- Chart.js v3 after using of zoom plugin instance persist in memory
- Chart.js on Angular with @types/chart.js
- Display ellipsis for null or empty values in the bar chart using Chart.js
- Chart.js x-axis label duplicating on hover
- pie chart inside donut chart using chart js
- Chartjs: make square legends
- ChartJs, How can I get different color fills between my two datasets in a line graph?
- ChartJS: How to set fixed Y axis max and min
- animation of a graph of an equation javascript
- Chart.js - draw an arbitrary point with tooltip
- Remove zero values from tooltip
- How to get values inside a chart without clicking
- How can I scale my dataset values as a percentage of the index in chart.js?
- ChartJS 2.6 - Bar chart fixed height scrollable-X
- Can you remove the xAxes border line and keep the ticks only?
- Charts.js - Bubble chart with two word axis
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- Dynamic chart codeigniter
- Error with Chartjs radar pointLabels color Scriptable
- Timeline on Y axis, with chart.js
- chart.js npm module not working
- Set labels from array
- Put JSON data into chart.js pie chart