Have you tried putting the scripts over each chart so it reloads everytime? 

i.e 

<script type="text/javascript" 
src="https://www.gstatic.com/chart/loader.js";></script>
<script type="text/javascript" src="multichart.js"></script>



chart 1



<script type="text/javascript" 
src="https://www.gstatic.com/chart/loader.js";></script>
<script type="text/javascript" src="multichart.js"></script>


chart 2 


On Friday, February 9, 2018 at 6:29:04 AM UTC, Mayank Aggarwal wrote:
>
> I am a newbie to Javascript and HTML and I'm learning how to use Google 
> Charts for a project. I'm trying to display two charts side by side in the 
> same HTML page. But nothing is getting displayed on the page. I'm attaching 
> both the HTML and Javascript code. Can someone point out what the issue is?
>
> HTML:
>
>
> <!DOCTYPE html><html><head><title>MultiCharts</title><script 
> type="text/javascript" 
> src="https://www.gstatic.com/chart/loader.js";></script><script 
> type="text/javascript" src="multichart.js"></script></head><body>
> <table class="columns">
>     <tr>
>         <td>
>             <div id="chart1" style="border: 1px solid #ccc"></div>
>         </td>
>         <td>
>             <div id="chart2" style="border: 1px solid #ccc"></div>
>         </td>
>     </tr></table>
> </body></html>
>
> Javascript:
>
>
> google.charts.load('current', {packages: ['corechart']});
>
> google.charts.setOnLoadCallBack(drawChart1);
> google.charts.setOnLoadCallBack(drawChart2);
> function drawChart1(){
>     var data = new google.visualization.DataTable();
>             data.addColumn('string', 'Browser');
>             data.addColumn('number', 'Percentage');
>             data.addColumn({type:'string', role:'tooltip'});
>             data.addRows([
>                 ['Firefox', 45.0, '45% people use Firefox'],
>                 ['IE', 26.8, '26.8% people use Internet Explorer'],
>                 ['Chrome', 12.8, '12.7% people use Chrome'],
>                 ['Safari', 8.5, '8.5% people use Safari'],
>                 ['Opera', 6.2, '6.2% people use Opera'],
>                 ['Others', 0.7, '0.7% people use other browsers']
>                 ]);
>
>             //pieHole used for donut chart (value between 0 and 1). Skip for 
> regular pie chart
>             var options = {
>                 'title' : 'Browser market shares at a specific website, 2014',
>                 width:600,
>                 height:600};
>
>             var chart = new 
> google.visualization.BarChart(document.getElementById('chart1'));
>             chart.draw(data, options);}
> function drawChart2(){
>     var data = new google.visualization.DataTable();
>
>             // var firefox_ptage = 45;
>             data.addColumn('string', 'Browser');
>             data.addColumn('number', 'Percentage');
>             data.addColumn({type:'string', role:'tooltip'});
>             data.addRows([
>                 ['Firefox', 45.0, '45% people use Firefox'],
>                 //['Firefox', firefox_ptage, firefox_ptage + '% people use 
> Firefox'],
>                 ['IE', 26.8, '26.8% people use Internet Explorer'],
>                 ['Chrome', 12.8, '12.7% people use Chrome'],
>                 ['Safari', 8.5, '8.5% people use Safari'],
>                 ['Opera', 6.2, '6.2% people use Opera'],
>                 ['Others', 0.7, '0.7% people use other browsers']
>                 ]);
>
>             //pieHole used for donut chart (value between 0 and 1). Skip for 
> regular pie chart
>             var options = {
>                 title : 'Browser market shares at a specific website, 2014',
>                 pieHole:0.4,
>                 width:600,
>                 height:600,
>                 fontSize:13,
>                 //is3D : true,
>                 pieSliceText:'label',
>                 slices:{
>                     0: {color:'Indigo'},
>                     1: {color:'BurlyWood'},
>                     2: {color:'Coral'},
>                     3: {color:'DarkGoldenRod', offset:0.1},
>                     4: {color:'IndianRed', offset:0.2},
>                     5: {color:'Aqua'}
>                 }};
>
>                 var chart = new 
> google.visualization.PieChart(document.getElementById('chart2'));
>                 chart.draw(data, options);}
>
>

-- 
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-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
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/489b04c7-9d82-4de7-bb89-5732110ab4a0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to