Unable to place Chart before Table

23 views
Skip to first unread message

Carl Castillo

unread,
May 28, 2020, 6:28:25 PM5/28/20
to Google Visualization API
My chart only loads when it is in the beginning div. I want to put this chart as my second div but when I do, it doesn't recognize it and it only keeps the table div.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['table']});
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawTable);
      google.charts.setOnLoadCallback(drawChart);


      // Create the data table.
  function drawTable() { 

  var dtTop10 = new google.visualization.DataTable();dtTop10.addColumn('string','FileName');
  dtTop10.addColumn('number','Size (GB)');
  dtTop10.addRows([
['ID003.dat', 0.22],
  ['xul.dll', 0.04],
  ['c.ico', 0.02],
  ['2019 Q2 - OKR Review Presentation.pptx', 0.01],
  ['OKRs - What & Why.pptx', 0.01],
  ['icudt58.dll', 0.01],
  ['omni.ja', 0.01],
  ['ID004.dat', 0],
  ['d3dcompiler_47.dll', 0],
  ['BouncyCastle.Crypto.dll', 0]
]);

  var dtTop10table = new google.visualization.Table(document.getElementById('top10Chart_div'));
  dtTop10table.draw(dtTop10, {width: '25%', height: '25%'});
}
function drawChart() {

  var dateData = new google.visualization.DataTable();
  dateData.addColumn('string','Date');
  dateData.addColumn('number','Number of Documents');
  dateData.addRows([
['05/2020', 5635],
  ['09/2019', 120]
]);
  var dateOptions = {'title':'Date Filter Month/Year',
                       'width':400,
                       'height':300};

  var dataChartForDates = new google.visualization.PieChart(document.getElementById('dateChart_div'));
  dataChartForDates.draw(dateData, dateOptions);
}
    </script>
  </head>
  <body>
<!--Div that will hold the pie chart-->
    <div id="dateChart_div" style="width:400; height:300"></div>
    <div id="top10Chart_div"</div>
  </body>
</html>



Daniel LaLiberte

unread,
May 28, 2020, 7:19:27 PM5/28/20
to Google Visualization API
So you want your first google.charts.load call to correspond to the first google.charts.setOnLoadCallback, and similarly for the second of each, but that's not how it works.  You should probably use the 'callback' setting on each google.charts.load call to make sure each callback gets called at the right time.  But even this is risky since multiple calls of google.charts.load might conflict with each other.  Much safer to merge them into one call, with 'packages': ['table', 'corechart'].

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/048003f1-73fc-4448-86ff-94687c3c0de6%40googlegroups.com.


--
Reply all
Reply to author
Forward
0 new messages