bowtie78 Posted August 21, 2014 Share Posted August 21, 2014 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 More sharing options...
dsonesuk Posted August 21, 2014 Share Posted August 21, 2014 You can't have two functions with same name, change name of one, and for that one change reference to call that function to the same amended name. Link to comment Share on other sites More sharing options...
bowtie78 Posted August 22, 2014 Author Share Posted August 22, 2014 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 More sharing options...
dsonesuk Posted August 22, 2014 Share Posted August 22, 2014 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 More sharing options...
bowtie78 Posted August 22, 2014 Author Share Posted August 22, 2014 It is working beautifully! Thank you again dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now