Reset Interval breaks my continuos flow of the graph

Question

I am trying to create flowing stacked area chart using d3.js. I have the graph working with a specific range. I am hitting the service every 10ms and getting all data and then triggering an event to start the graph. However my graph works only works for 30mins after that I am trying to reset the interval. When I am trying to do that it there is a jerk in the graph and somehow it breaks. I am not sure if I am doing it the right way. Here is code to look at.

  var numbers = [];  
    var values = []; 
    var flag = false;
    var fd;
    var td;

    //Calling the dates service
    d3.json('/api/dates', function(error,data) {
      var dates = data;
      if(data != null){
      fd = new Date(data.start);
      td = new Date(data.end);
      var cnt = 0;
      var startGraph = function(){   
        if (fd > td) {
          console.log(" start Date is greater than end Date");
          clearInterval(interval);
          flag = true;
          $('.wrapper').trigger('newPoint');
          return; 
        }
        var fdt = fd.toISOString(); 
        var tdt = new Date(fd.setMinutes(fd.getMinutes() + 30)).toISOString();

        //Calling service to get the values for stacked area chart
        d3.json("/api/service?start=" +fdt+ "&end=" +tdt, function(error,result) {
          if(result != null){
              numbers = numbers.concat(flightInfo.numbers);
              values[values.length] = flightInfo.values;
          }
        });
          cnt++;
      }
      function pushPoint(){
          var cnt=0;
          var interval = setInterval(function(){
            if(cnt!=values.length)
            {
            tick(values[cnt]);
            cnt++;}
            else
            clearInterval(interval);
          },400);        
      }

      //Calling the Processing Dates API to pull the data for area chart
      var interval = setInterval(startGraph,10); 
      }
    });

   $(document).ready(function () {
   stackGraph(); // this is another js file
   var cnt=0;
    //Pushing new point
      $('.wrapper').on('newPoint', function(){
        if(flag){
           if(cnt!=values.length){
            tick(values[cnt]);
            cnt++;
          }
        }   
      });
    });

I would implement a websocket to be given the data when there is a change rather than requesting (polling) for the data, you're putting a lot of load on both the server and the client.. — Pogrindis, Jun 22 '16 at 16:29

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Is there actually a line break on the line with your return statement here?

$('.background').trigger('newPoint');
return  //is there actually a line break here?
setTimeout(startGraph,10);

If so, you aren't going to execute the next line.

Why doesn't a Javascript return statement work when the return value is on a new line?

edited May 23 '17 at 10:29

Community

1
1

answered Jun 22 '16 at 17:27

Jamil R Khan

386
1
9

In your snippet, you have `return` and `setTimeout(startGraph,10);` on different lines. Are both of those actually on the same line? – Jamil R Khan Jun 22 '16 at 20:17
No they are not, they are on different lines – hhhh4 Jun 22 '16 at 20:53
So, `setTimeout(startGraph, 10)` will never get called. I suspect what you want to do is: `interval = setTimeout(startGraph, 10); return;` Unless you _want_ to stop things after 30 minutes? – Jamil R Khan Jun 22 '16 at 20:56
I am actually trying to grab all the data from this api with this interval being called every 10ms. Once I get all the data it enters the if block and then triggers event.With this approach after 30-40 mins my graph stop because it is out of data I want to call the interval again and start the graph so is this the right way of doing it ? – hhhh4 Jun 22 '16 at 21:01
Well, I'd think it's probably not appropriate to call the api 100 times a second. Call it once a second, you'll probably be fine, If you want to make it _seem_ smoother than that, you can always break down rendering the the last seconds worth of data in chunks. It would probably be helpful to post a bit more code, as it's not clear what you are actually planning on doing after 30-40 minutes. – Jamil R Khan Jun 22 '16 at 21:14
I have posted more code. I am having an api which gives me specified dates. I have pass these dates to my second api call to get the data needed for graph. If I have June 22 - June24, I will have to pass June 22 5:00 Pm - June 26 5:20 PM to my second api call I will have to pass these dates till I reach June 24 . Once I reach the end date I will have start the process again. In this code I am able to run the graph till I reach the end date. After that my graph stops. I have tried to call the newpoint on the graph every 2.5 secs but that way my graph does not start till 40 mins – hhhh4 Jun 22 '16 at 21:55

Reset Interval breaks my continuos flow of the graph

1 Answers1