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'].
On Thu, May 28, 2020 at 6:28 PM Carl Castillo <[email protected]> wrote: > 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> > > > > -- > 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-visualization-api/048003f1-73fc-4448-86ff-94687c3c0de6%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/048003f1-73fc-4448-86ff-94687c3c0de6%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> Cambridge MA -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOU574_doWuobQJ3pOuHnkqX_teebhkGBCptJdaVNx4wQ%40mail.gmail.com.
