lundi 31 juillet 2017

Real time chart in javascript

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