CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
Mayank Aggarwal
Mayank Aggarwal

Reputation: 161

Multiple charts not getting displayed in Google Charts

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);
}

Upvotes: 0

Views: 452

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

only one minor issue, have to remember javascript is case sensitive... 

setOnLoadCallback  //<-- should be lower case b in Callback

setOnLoadCallBack  //<-- NOT capital B

see following working snippet... 

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']
  ]);

  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();

  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']
  ]);

  var options = {
    title: 'Browser market shares at a specific website, 2014',
    pieHole: 0.4,
    width: 600,
    height: 600,
    fontSize: 13,
    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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<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>

Upvotes: 1

Related Questions