title: Javascript: setInterval for multiple chart updates
body: <p>I'm trying to display three Google Chart Gauges on a page to represent data from three temperature sensors.  I have a JS function <code>GetCurrentTemperature</code> that returns the three temperature values in an array.  I want the gauges to update at regular intervals.  I've had this working fine with a single gauge, but when I try and use <code>setInterval</code> for the three charts, they're not updating.  The code I'm using is listed below.</p>
  
  <pre><code>function drawTemperatureGauges() {
  
  var currentTemp = GetCurrentTemperature();
  var gaugeCount = currentTemp.length;
  
  var options = {
      width: 200, 
      height: 200,
      redFrom: 65,         
      redTo: 80,
      yellowFrom: 50, 
      yellowTo: 65,
      minorTicks: 5,
      max: 80
  };
  
  for(var i=0; i&lt;gaugeCount; i++) {
  
      var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp', currentTemp[i] ]
      ]);
  
      var divName = 'gauge'.concat(i+1).concat('_div');
      var chart = new google.visualization.Gauge(document.getElementById(divName));
  
      chart.draw(data, options);
  
      setInterval(function() {
          var cTemp = GetCurrentTemperature();
          data.setValue(0, 1, cTemp[i]);
          chart.draw(data, options);
      }, 2000);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I assume it's because I'm using <code>i</code> inside the anonymous <code>setInterval</code> function. I've looked at posts related to closures and also ones that specify the use of <code>let</code> rather than <code>var</code> but I still can't work out what syntax I need.</p>
  
  <p>Any pointers greatly appreciated</p>
  
  <p>Bbz</p>