Problem trying to use a chart and table with Google packages

Question

Problem trying to use a chart and table with Google packages

Navigation

#1 by (0 votes)

0

I'm trying to use Google packages to put together a page, and I'm not able to put 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>//USADOPARAAMBOSGRÁFCOS<script>google.charts.load('current',{'packages':['table']});google.charts.setOnLoadCallback(drawTable);functiondrawTable(){vardata2=newgoogle.visualization.DataTable();data2.addColumn('string','Name');data2.addColumn('number','Salary');data2.addColumn('boolean','FullTimeEmployee');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]]);vartable=newgoogle.visualization.Table(document.getElementById('table_div'));table.draw(data2,{showRowNumber:true,width:'30%',height:'30%'});}</script>

Thisisthecodeforthechart

<divid="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 graphics.

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

I'm finding it a problem to load the packages.

javascript google-charts

asked by anonymous 30.07.2016 / 20:45

1 answer

How to only receive gets from a given IP Problem with file transfer via socket with java

score 0 · 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, both are table_div :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><divid="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();
}