Two different google charts on one page

Question

I initially had a columnchart on page1 and a linechart on page2. They both display fine when on their own page. When I try combine the two on one page, they both display but they both are columncharts. I'm not sure what I am doing wrong. This is my code so far:

google.load('visualization', '1.0', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

function drawchart() {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');
  for (var i = 0; i < chartdatax.length; i++) {
      chartData.addRow([parseFloat(chartdatax[i]),
      parseFloat(chartdatay[i])]);
  };

   var options = {
       height: 500,
       hAxis: {
          title: 'Arm C.G',
          gridlines: {
            count: 10
        }
        },
        vAxis: {
          title: 'Weight',
          gridlines: {
            count: 10
        }
        },
      chartArea: {top:40, width: "70%", height: "75%"},
      animation:{
        duration: 1000,
        easing: 'out',
        startup: true,
      },
      legend: { position: 'none' },
      pointSize: 5
    };

   myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));

    myLineChart.draw(chartData, options);

}

function drawchart2(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
if (status !== google.maps.ElevationStatus.OK) {
 // Show the error code inside the chartDiv.
 chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
    status;
    return;
}

var chart = new google.visualization.ColumnChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < elevations.length; i++) {
data.addRow(['', elevations[i].elevation]);
}


chart.draw(data, {
  height: 200,
  legend: 'none',
  titleY: 'Elevation (m)'
 });

}

WhiteHat WhiteHat · Accepted Answer · 2016-02-01T12:57:35

The code you have looks like it should work...
Would need to see where drawchart2 is called, the HTML elements, and any other code to be sure...

In this example, I add callback function drawcharts to start drawing...

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawcharts});

function drawcharts() {
  drawchart();
  drawchart2();
}

function drawchart() {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');


  for (var i = 0; i < 10; i++) {
    chartData.addRow([
      parseFloat(i),
      parseFloat(i * 1.5)
    ]);
  };


  var options = {
    height: 500,
    hAxis: {
      title: 'Arm C.G',
      gridlines: {
        count: 10
      }
    },
    vAxis: {
      title: 'Weight',
      gridlines: {
        count: 10
      }
    },
    chartArea: {top:40, width: "70%", height: "75%"},
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true,
    },
    legend: {position: 'none'},
    pointSize: 5
  };

  myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));
  myLineChart.draw(chartData, options);
}

function drawchart2(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  var chart = new google.visualization.ColumnChart(chartDiv);
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');

  for (var i = 0; i < 10; i++) {
    data.addRow([
      '',
      i * 100
    ]);
  }

  chart.draw(data, {
    height: 200,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart1"></div>
<div id="elevation_chart"></div>

Two different google charts on one page

1 Answers