[visualization-api] Google charts not showing on page

[Chris Rowley]

i 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();
    };
    

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();
    };

any help you could give me here would be greatly appreciated 

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/766c8d10-b30e-4819-ab9e-3bbc580a32a2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.