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