0

Estou tentando usar os pacotes da Google para montar uma página, e não estou conseguindo colocar um gráfico e uma tabela na mesma página

Esse é o código pra tabela

<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>

Esse é o código para o gráfico

<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>

Por outro lado, se eu usar o código abaixo eu consigo obter dois gráficos.

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

Estou achando que é algum problema na hora de carregar os pacotes.

1 Resposta 1

0

A importação correta é:

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

Para chamar use uma função:

google.charts.setOnLoadCallback(desenhaTabelaGrafico);

Função desenhaTabelaGrafico():

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

Lembre-se de mudar o nome da div no seu código, as duas estão 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>

Código:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .