Re: [visualization-api] Newbie trying to get multiple charts on one page
323 views
Skip to first unread message
MC Get Vizzy
Jul 8, 2012, 3:04:30 AM7/8/12
to google-visua...@googlegroups.com
You can't set two "on load" callbacks.
You need to do something like
google.setOnLoadCallback(drawVisualizations);
function drawVisualizations() {
drawVisualization();
drawVisualization2();
}
I hope that helps!
MC Get Vizzy
On Fri, Jul 6, 2012 at 8:03 PM, Dustin Powers <blackha...@gmail.com> wrote:
I am brand new to google charts and trying to get two stacked column bar charts on the same page. Below is the html, the first chart is rendering fine but I cannot seem to get a second one on the page. any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Sprocket Dashboard
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Account', 'Open WOs', 'Open PMs'],
['AFV 51',1163,1161]
])
// Create and draw the visualization.
var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{'isStacked': true, title:"Open WOs and PMs by location",
width:1200, height:600,
hAxis: {title: "Site"}}
);
}
function drawVisualization2() {
// Create and populate the data table.
var data2 = google.Visualization.arrayToDataTable([
['Account', 'Closed WOs MTD', 'Closed PMs MTD'],
['AFV 51',64,61]
])
// Create and draw the Visualization.
var chart2= new google.Visualization.ColumnChart(document.getElementById('Visualization2')).
draw(data2,
{'isStacked': true, title:"Open WOs and PMs by location",
width:1200, height:600,
hAxis: {title: "Site2"}}
);
}
google.setOnLoadCallback(drawVisualization);
google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body style="font-family: Calibri;border: 0 none;">
<div id="visualization" style="width: 1200px; height: 600px;"></div>
<br><br><br><br><br>
<div id="visualization2" style="width: 1200px; height: 600px;"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/TC-dYIWyGuYJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
Jul 9, 2012, 12:02:41 PM7/9/12
to google-visua...@googlegroups.com
It actually works with two callbacks, though I generally suggest doing as Vizzy says. The problem (as stated in the other thread), lies in the capital V's in "Visualization".
To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages