Reset Interval breaks my continuos flow of the graph

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;
      $('.background').trigger('newPoint');
      return 
      setTimeout(startGraph,10);
    }
    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); 
  }
});