Problem when trying to use a chart and table with Google packages

Question

I’m trying to use Google’s packages to build a page, and I’m not getting a chart and a table on the same page

This is the code for the table

<div id="table_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> //USADO PARA AMBOS GRÁFCOS

<script>
  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

  function drawTable() {
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Name');
    data2.addColumn('number', 'Salary');
    data2.addColumn('boolean', 'Full Time Employee');
    data2.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data2, {showRowNumber: true, width: '30%', height: '30%'});
  }
</script>

That’s the code for the chart

<div id="table_div"></div>
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
      google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'iPhone 16GB');
  data.addColumn('number', 'iPhone 32GB');

  data.addRows([
    [0, 100, 150],    [1, 120, 140],   [2, 110, 200],  [3, 150, 220],   [4, 100, 140]
  ]);

  var options = {
  title: 'Price variation of iPhone 6s',
      curveType: 'none',
      legend: { position: 'bottom' },
    hAxis: {
      title: 'Last 5 days'
    },
    vAxis: {
      title: 'Price in $'
    },
    series: {
      1: {curveType: 'none'}
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

On the other hand, if I use the code below I can get two graphs.

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
google.charts.setOnLoadCallback(drawTable2);

I’m thinking it’s a problem when loading the packages.

Answer 1

The correct import is:

google.load('visualization', '1', {'packages': ['corechart','table']});

To call use a function:

google.charts.setOnLoadCallback(desenhaTabelaGrafico);

Function desenhaTabelaGrafico():

 function desenhaTabelaGrafico(){
    drawTable(); 
    drawCurveTypes();
}

Remember to change the name of div in your code, the two are table_div:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div id="chart_div"></div>

Code:

function drawTable() {
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Name');
    data2.addColumn('number', 'Salary');
    data2.addColumn('boolean', 'Full Time Employee');
    data2.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data2, {showRowNumber: true, width: '30%', height: '30%'});
  }

  function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'iPhone 16GB');
  data.addColumn('number', 'iPhone 32GB');

  data.addRows([
    [0, 100, 150],    [1, 120, 140],   [2, 110, 200],  [3, 150, 220],   [4, 100, 140]
  ]);

  var options = {
  title: 'Price variation of iPhone 6s',
      curveType: 'none',
      legend: { position: 'bottom' },
    hAxis: {
      title: 'Last 5 days'
    },
    vAxis: {
      title: 'Price in $'
    },
    series: {
      1: {curveType: 'none'}
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

 function desenhaTabelaGrafico(){
    drawTable(); 
    drawCurveTypes();
}