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 [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/d31852dd-ac99-456a-97da-c666695fa48d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
