Hi Daniel, I'm having the same problem as Tyler - I can't seem to load multiple charts separately, they appear to be overlapping each other.
This is the code I'm using: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <script type="text/javascript"> google.charts.load('43', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawGID); google.charts.setOnLoadCallback(drawGID2); // [START gid] function drawGID() { var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1eq8TDCevB7EBzAvCN6ED5OknfLxogMXk7e1LYV2dBwI/edit#gid=1962103934'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var options = { curveType: 'function', legend: { position: 'bottom' }, width: '100%', height: '600', chartArea: { height: '80%', width: '80%' }, backgroundColor: '#fbf8f3', fontName: 'national', fontSize: '14', }; var chart = new google.visualization.LineChart(document.getElementById('chart_growth')); chart.draw(data, options); } // [START gid] function drawGID2() { var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1jRP3u7xqktGLh7mVS5_5a1YGAji9FrWekE4FF7d7J84/edit#gid=1685062757'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data2 = response.getDataTable(); var options2 = { curveType: 'function', legend: { position: 'bottom' }, width: '100%', height: '600', chartArea: { height: '80%', width: '80%' }, backgroundColor: '#fbf8f3', fontName: 'national', fontSize: '14', }; var chart2 = new google.visualization.LineChart(document.getElementById('chart_index')); chart2.draw(data2, options2); } $(window).resize(function(){ drawGID(); drawGID2(); }); // [END gid] </script> And my HTML: <div class="row"> <div id="chart_growth"></div> </div> <div class="row"> <div id="chart_index"> </div> Is there something I've done wrong with my code? On Friday, May 20, 2016 at 8:01:17 AM UTC+10, Daniel LaLiberte wrote: > > Only call google.charts.load() one time. You don't need it more than once > anyway if you are loading the same package every time. > > On Thu, May 19, 2016 at 5:54 PM, Tyler Gerow <[email protected] > <javascript:>> wrote: > >> Your the man Daniel! It worked after changing the package to corechart >> as well..!! Thanks so much for the help! but now I am having the problem >> of loading multiple charts. >> >> On Thursday, May 19, 2016 at 11:35:50 AM UTC-10, Daniel LaLiberte wrote: >>> >>> The material charts will not support animation. The non-material >>> classic charts are everything else. So use >>> google.visualization.ColumnChart instead. You'll have no problem with >>> multiple charts in the same page also. >>> >>> If you want the material colors and fonts in the classic charts, you can >>> try adding theme: 'material' to your options. >>> >>> On Thu, May 19, 2016 at 5:33 PM, Tyler Gerow <[email protected]> wrote: >>> >>>> I replaced the 42. still no animation.. Where do I find the >>>> documentation for the classic charts? >>>> >>>> On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote: >>>>> >>>>> You are using the material Bar chart. You left out the call of >>>>> google.charts.Bar(), but I see you are loading the 'bar' package. >>>>> >>>>> Since you are using the gstatic loader, I thought we had fixed this >>>>> problem for 'current', but perhaps there is still a problem. Could you >>>>> replace 'current' with '42' or '43' to see if that helps? If it doesn't >>>>> help, I'll need to see your web page. >>>>> >>>>> On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <[email protected]> >>>>> wrote: >>>>> >>>>>> I'm using the gstatic loader as well I believe. >>>>>> >>>>>>> <script type="text/javascript" src=" >>>>>>> https://www.gstatic.com/charts/loader.js";></script> >>>>>>> >>>>>> -- >>>>>> 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 post to this group, send email to [email protected] >>>>>> . >>>>>> Visit this group at >>>>>> https://groups.google.com/group/google-visualization-api. >>>>>> To view this discussion on the web visit >>>>>> https://groups.google.com/d/msgid/google-visualization-api/76d1887b-9403-4160-9828-89c51ee27726%40googlegroups.com >>>>>> >>>>>> <https://groups.google.com/d/msgid/google-visualization-api/76d1887b-9403-4160-9828-89c51ee27726%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> >>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>> >>>>> >>>>> >>>>> >>>>> -- >>>>> Daniel LaLiberte >>>>> <https://plus.google.com/100631381223468223275?prsrc=2> >>>>> [email protected] 5CC, 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 post to this group, send email to [email protected]. >>>> Visit this group at >>>> https://groups.google.com/group/google-visualization-api. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/google-visualization-api/781cef74-fb9c-4999-bbb7-dd305744c737%40googlegroups.com >>>> >>>> <https://groups.google.com/d/msgid/google-visualization-api/781cef74-fb9c-4999-bbb7-dd305744c737%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> >>> >>> -- >>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >>> [email protected] 5CC, 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] >> <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at >> https://groups.google.com/group/google-visualization-api. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/1d32dd41-8879-4918-a80a-82770cb26b37%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/1d32dd41-8879-4918-a80a-82770cb26b37%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> > [email protected] <javascript:> 5CC, 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 post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7816f3d6-6e41-40cf-b0be-c0ad299938ca%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
