Google charts

h am trying to impliment google charts on my page to show a comparison between 2 years split by month,

to try and understand and to simplify the initial graph i used an example graph straight from the google charts docs.

this worked fine till i added my own data now i get no display, but if i veiw source the code is all in the page with the correct data,

i have filled out the dataloader with the correct data programmatically  


here is the view source

      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
			['January', 0, 0],
			['February', 0, 0],
			['March', 0, 0],
			['April', 6, 2],
			['May', 26, 3],
			['June', 0, 0],
			['July', 0, 0],
			['August', 0, 0],
			['September', 0, 0],
			['October', 0, 0],
			['November',0, 0],
			['December', 0, 0],
			['TOTAL', 32, 5]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    

Select allOpen in new window

here is the page code

      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
			['January', <%=nJan%>, <%=nJan2%>],
			['February', <%=nFeb%>, <%=nFeb2%>],
			['March', <%=nMar%>, <%=nMar2%>],
			['April', <%=nApr%>, <%=nApr2%>],
			['May', <%=nMay%>, <%=nMay2%>],
			['June', <%=nJun%>, <%=nJun2%>],
			['July', <%=nJul%>, <%=nJul2%>],
			['August', <%=nAug%>, <%=nAug2%>],
			['September', <%=nSep%>, <%=nSep2%>],
			['October', <%=nOct%>, <%=nOct2%>],
			['November',<%=nNov%>, <%=nNov2%>],
			['December', <%=nDec%>, <%=nDec2%>],
			['TOTAL', <%=nTot%>, <%=nTot2%>]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

Select allOpen in new window

any help you could give me here would be greatly appreciated