Home/ Questions/Q 7973015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:59:46+00:00

I am trying to put two Google charts on a single web-page but can

  • 0

I am trying to put two Google charts on a single web-page but can only get it to plot the first one and not the other. Can anyone look and see what I am doing wrong?

I am using two different divs for plotting, which I thought was the important step. I tried also using two different functions for the different plots but still could not get it to work.

I would be very thankful for useful suggestions.

thanks!!

Ayesha

<!--To change this template, choose Tools | Templates and open the template in the editor.-->
<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', {'packages':['annotatedtimeline']});
        google.setOnLoadCallback(drawChart1);
        function drawChart1() {

            var data1 = new google.visualization.DataTable();
            data1.addColumn('date', 'Date');
            data1.addColumn('number', 'Sold Pencils');
            data1.addColumn('string', 'title1');
            data1.addColumn('string', 'text1');
            data1.addColumn('number', 'Sold Pens');
            data1.addColumn('string', 'title2');
            data1.addColumn('string', 'text2');
            data1.addRows([
                [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
                [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
                [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
                [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
                [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
                [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
            ]);

            var chart1 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
            chart1.draw(data1, {displayAnnotations: true});

            var data2 = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2004',  1000,      400],
                ['2005',  1170,      460],
                ['2006',  660,       1120],
                ['2007',  1030,      540]
            ]);

            var options = {
                title: 'Company Performance',
                vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
            };

            var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
            chart2.draw(data2, options);

        }
    </script>
</head>

<body>
    <p> Testing Google line chart tool </p>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div1' style='width: 700px; height: 240px;'></div>

    <br> <br> <br> 

    <p> Testing another chart </p>
    <div id='chart_div2' style='width: 700px; height: 240px;'></div>

</body>
</html>

Ayesha

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Include corechart when loading the packages.

    google.load('visualization', '1', 
{'packages':['annotatedtimeline','corechart']});

    See here: http://jsfiddle.net/Ng7ne/

    • 0