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

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

Open in new window


any help you could give me here would be greatly appreciated
Bobbie RowleyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971MultitechnicianCommented:
i used an example graph straight from the google charts docs

Could you point out that page?
Bobbie RowleyAuthor Commented:
Dual-Y charts

https://developers.google.com/chart/interactive/docs/gallery/columnchart#creating-material-column-charts

This worked  as is, when i added my data it stopped showing on the page but in view source it is there with my data added, i am assuming this is because i am adding the data through variables instead of through a JSON array.. but it worked with hard coded data  i thought variables would be the same to hard coded data to the graph
NorieAnalyst Assistant Commented:
Bobbie

How/when are you populating the data?

Where's the header row for the data?

When I add in a dummy header row like this then a graph is rendered.
        var data = google.visualization.arrayToDataTable([
			['Month', 'Parsecs', 'Magnitude'],
			['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]
        ]);

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bobbie RowleyAuthor Commented:
Thank you, that is it...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
SQL SERVER 2017

From novice to tech pro — start learning today.