Not able to display multiple charts in a single HTML page

65 views
Skip to first unread message

Mayank Aggarwal

unread,
Feb 9, 2018, 1:29:04 AM2/9/18
to Google Visualization API

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);
}
Message has been deleted

R Williams

unread,
Feb 14, 2018, 8:16:34 AM2/14/18
to Google Visualization API
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

Wink Swain

unread,
Feb 28, 2018, 3:50:32 PM2/28/18
to Google Visualization API
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.
Reply all
Reply to author
Forward
0 new messages