I have a problem with my real time chart, I need to update my xaxis every 3 seconds. It works most of the time but it doesn't always update it every 3 seconds!
The loadInitalData function works great but when it calls initChart it takes about 18 seconds then it starts to duplicate some values and update the time after more than 3 seconds.
That's what I mean by duplication: enter image description here
and this is my code:
<script>
var num = 0;
var chart = null;
export default {
name: 'dashboard',
data () {
return{
limit: 1,
startLive: true,
}
},
methods:{
initChart(dataProvieded){
chart = AmCharts.makeChart("chart"+num, {
"type": "serial",
"theme": "light",
"synchronizeGrid":true,
"marginTop":0,
"marginRight": 80,
"autoMarginOffset": 60,
"dataProvider": dataProvieded,
"zoomOutButton": {
"backgroundColor": '#000000',
"backgroundAlpha": 0.15
},
"valueAxes": [{
"axisAlpha": 1,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"categoryField": "date",
})
setInterval( function(){
axios.get('/feeder/91/1').then(function(response){
chart.dataProvider.shift();
var date0 = new Date(response.data[7]);
var hours = date0.getHours();
var minutes = "0" + date0.getMinutes();
var seconds = "0" + date0.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
console.log(formattedTime);
chart.dataProvider.push( {
date: formattedTime,
value: response.data[0]
} );
chart.validateData();
}); } , 3000);
},
fetchDatafromServer(limit = 1){
return axios.get('/feeder/91/'+limit);
},
loadInitalData(limit){
var data = [];
this.fetchDatafromServer(limit).then((response)=>{
console.log('load initial data from server total: ' + response.data.length );
response.data.forEach(function(rawData){
var date0 = new Date(rawData[7]);
var h = date0.getHours();
var m = "0" + date0.getMinutes();
var s = "0" + date0.getSeconds();
var ff = h + ':' + m.substr(-2) + ':' + s.substr(-2);
console.log(ff);
data.push({date: ff, value: rawData[0] });
});
this.initChart(data);
});
}
},
created(){
console.log('loaded Dashboard');
this.loadInitalData(50);
}
}
</script>
Thank you!
Aucun commentaire:
Enregistrer un commentaire