Loop data in a Google chart

Question

I want to create a loop, in my google chart, i have 200 points in the chart, and it moves 1 point to the right per second,but i want to repeat the chart when it reach all points. here is my code of the chart:

 function drawChart5() {
      var options = {
     'backgroundColor': 'transparent',
      width: 1200,
      height: 240,
      animation: {
        duration: 1000,
        easing: 'in',
      },
      hAxis: {viewWindow: {min:0, max:200}}
    };

    var chart = new google.visualization.AreaChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');

    var MAX = 100;
    var x=0;
    var f=20;
    var T= 1/f;
    var PI = Math.PI;
    var DT=T/MAX;
    for (var i = 0; i < 2*MAX; i++) 
    {
      x=(Math.sin((2*PI)*f*i*DT));
       data.addRow([i.toString(), x]);
        console.log(x)   
    }

    function drawChart() {     
      google.visualization.events.addListener(chart, 'ready',
          function() {            
          });
      chart.draw(data, options);
    }
      setInterval(function() 
       {
          options.hAxis.viewWindow.min += 1;
      options.hAxis.viewWindow.max += 1;

                  chart.draw(data,options)
                },2 000);

    drawChart();
  }

This is the chart

Answer 1

I would achieve the effect you are going for like this:

Use a DataView instead of a DataTable, and use DataView.setColumns() to create a calculated column that runs the formula defined above. As far as I can tell, the algorithm you use to calculate your values is deterministic , so all you need to run your calculations is the x-value and you can determine the y-value for any given position.

With this method, you'll never have to populate a DataTable yourself, because the chart uses your function to calculate the y-value on demand. Whatever range your chart displays, it will calculate the values it needs when the chart is drawn.