You have a few syntax errors and typos. Always check your code in the
console or elsewhere. Here are a few things I found on the first pass.
The correct call to load the API is
google.charts.load('current', {'packages': ['corechart']});
The correct function is
google.charts.setOnLoadCallback(drawChart1);
Also your javascript contains no <script> tags. These few tips will get
you started.
On Friday, February 9, 2018 at 1:29:04 AM UTC-5, 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/54391b36-a345-4dc2-a30c-755bcb3d66ce%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
