Jump to content

How do I place 2 google charts to the same webpage

bowtie78

By bowtie78
in HTML/XHTML

 Share

Recommended Posts

bowtie78 Newbie

bowtie78

Posted
Posted

Hello all,

 

I am wondering if it is possible to add 2 google column charts on the same webpage. When I add two or more html chart codes into their own respective boxes, they show up in the editor page but only one shows up on the published page. There is little information on this out there and I am almost at my wits end, so I have come to ask the experts. The first code is

 

<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart);function drawChart() {

var data = google.visualization.arrayToDataTable([ ['Year', '2013', '2014'], ['Medical', 58, 82], ['Trauma', 24, 9], ['Fire Rehab', 1, 0], ['No Transports', 8, 48] ]);

var options = { title: 'Anna Rescue Squad 1st Quarter Run Volume', hAxis: {title: '', titleTextStyle: {color: 'red'}} };

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);

}google.load('visualization', '1',{'packages':['annotatedtimeline','corechart']}); </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body></html>

 

 

The second code which is google's default is the following

 

 

<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);google.setOnLoadCallback(drawChart);function drawChart() {

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

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

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);

} </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body></html>

 

Any suggestions is much appreciated!

 

 

Link to comment
Share on other sites
bowtie78 Newbie

bowtie78

Posted
  • Author
Posted

dsonesuk, once again I appreciate the help but I believe I missed something. The changes that I have made are below:

 

 

google.setOnLoadCallback(drawChart1);function drawChart1() {

I added a 1 to change the function name but it still doesn't display after being published. I also changed the google default to my needs and here is what the code looks like now:

 

<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart1);function drawChart1() {

var data = google.visualization.arrayToDataTable([ ['Year', '2013', '2014'], ['Medical', 58, 82], ['Trauma', 24, 9], ['Fire Rehab', 1, 0], ['No Transports', 8, 48] ]);

var options = { title: 'Anna Rescue Squad 2nd Quarter Run Volume', hAxis: {title: '', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);

}google.load('visualization', '1',{'packages':['annotatedtimeline','corechart']}); </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You need different id ref as well else one will overwrite the other.

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Untitled Document</title>        <script type="text/javascript" src="https://www.google.com/jsapi"></script>        <script type="text/javascript">            google.setOnLoadCallback(drawChart);            function drawChart() {                var data = google.visualization.arrayToDataTable([                    ['Year', '2013', '2014'],                    ['Medical', 58, 82],                    ['Trauma', 24, 9],                    ['Fire Rehab', 1, 0],                    ['No Transports', 8, 48]                ]);                var options = {                    title: 'Anna Rescue Squad 1st Quarter Run Volume',                    hAxis: {title: '', titleTextStyle: {color: 'red'}}                };                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));                chart.draw(data, options);            }            google.load('visualization', '1',                    {'packages': ['annotatedtimeline', 'corechart']});            google.load("visualization", "1", {packages: ["corechart"]});            google.setOnLoadCallback(drawChart2);            function drawChart2() {                var data = google.visualization.arrayToDataTable([                    ['Year', 'Sales', 'Expenses'],                    ['2004', 1000, 400],                    ['2005', 1170, 460],                    ['2006', 660, 1120],                    ['2007', 1030, 540]                ]);                var options = {                    title: 'Company Performance',                    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}                };                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));                chart.draw(data, options);            }        </script>    </head>    <body>        <div id="chart_div" style="width: 900px; height: 500px;"></div>        <div id="chart_div2" style="width: 900px; height: 500px;"></div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...