On help on Javascript to run Google Chart

[saycheeseins]

Hi There,

I knew this is such a simple question but I can’t figure it out so far.

I’m trying to use HTML to run Google Chart. I have a list of thing to loop and return data to draw the water fall chart in Google Chart. However, it’s NOT working.

To test the code, then, I just copy the sample from Google with static data. It works nicely. Then I tried to change to be array to test how to loop the array and draw the chart. I CANNOT make it working. Since the list of thing might use the same concept of looping to fill dataTable. Following is javascript I test it.

var name = ['M','T','W','TH','F']; var x1 = [28,38,55,77,66]; var x2 = [28,38,55,77,66]; var y1 = [38,55,77,66,22]; var y2 = [38,55,77,66,22]; var results = []; var i = 0;

  for (i=0; i<name.length; i++) {
    
  	results.push([
      name[i],
      x1[i],
      x2[i],
      y1[i],
      y2[i]
    ]); 
  }
  
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable(results);

    var options = {
      legend: 'none',
      bar: { groupWidth: '100%' }, // Remove space between bars.
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
      }
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Anyone can help on this ? If it’s working, I will replace with list in array. Thank you for help !

[saycheeseins]

by the way, this is original code from Google.

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 28, 28, 38, 38],
      ['Tue', 38, 38, 55, 55],
      ['Wed', 55, 55, 77, 77],
      ['Thu', 77, 77, 66, 66],
      ['Fri', 66, 66, 22, 22]
      // Treat the first row as data.
    ], true);