Hi,
Your mistake is that you duplicated the code, but this code contains two
sets of static functions, that override each other (draw, and initialize).
In addition, you load the api twice, which is harmless, but unneeded.
Here is the correct code, with a single api load, and unique function names.
<html>
<head>
<title>
Cinematics_mod-twopiecharts
</title>
<style type="text/css">
.header {
color: purple;
background-color: #abc;
font-size: 40px;
text-align: center;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi
"></script>
<!-- Code for first chart -->
<script type="text/javascript">
google.load("visualization", "1",
{packages: ["piechart"]});
google.setOnLoadCallback(initialize);
function initialize() {
// The URL here is the URL of the spreadsheet.
// This points to a modified version of the sample spreadsheet in
MetaSea docs.
var query = new google.visualization.Query(
'
http://spreadsheets.google.com/pub?key=pyY_PYKkvEXsBI2djBtNvLQ&output=html&gid=0&single=true&range=a1:f7'<http://spreadsheets.google.com/pub?key=pyY_PYKkvEXsBI2djBtNvLQ&output=html&gid=0&single=true&range=a1:f7%27>
);
// This tells which columns of the spreadsheet to display
query.setQuery('select A,B');
query.send(draw1);
var query = new google.visualization.Query(
'
http://spreadsheets.google.com/pub?key=pyY_PYKkvEXsBI2djBtNvLQ&output=html&gid=0&single=true&range=a1:f7'<http://spreadsheets.google.com/pub?key=pyY_PYKkvEXsBI2djBtNvLQ&output=html&gid=0&single=true&range=a1:f7%27>
);
// This tells which columns of the spreadsheet to display
query.setQuery('select A,F');
query.send(draw2);
}
function draw1(response) {
if (response.isError()) {
alert("Error in query")
}
var ticketsData1 = response.getDataTable();
var chart1 = new google.visualization.PieChart(
document.getElementById('chart1_div'));
chart1.draw(ticketsData1, {width: 500, height: 350, 'legend':
'right',
is3D: true, title: 'London ticket sales'});
}
function draw2(response) {
if (response.isError()) {
alert("Error in query")
}
var ticketsData2 = response.getDataTable();
var chart2 = new google.visualization.PieChart(
document.getElementById('chart2_div'));
chart2.draw(ticketsData2, {width: 500, height: 350, 'legend':
'right',
is3D: true, title: 'Tokyo ticket sales'});
}
</script>
</head>
<body>
<div class="header">Cinematics sample - modified</div>
<br />
<hr /><br />
div for chart1 below:<br />
<div id="chart1_div" ></div><br />
<hr /><br />
div for chart2 below:<br />
<div id="chart2_div" ></div><br />
<hr /><br />
</body>
</html>
On Sun, Nov 9, 2008 at 12:39 PM, Ken <[EMAIL PROTECTED]> wrote:
>
> I'm trying to figure out how to use more than one instance of the same
> type of visualization on a single page. I've tried this using code
> adapted from the 'Full HTML Page Example' with only partial success.
>
> I'm trying to display two piecharts, each pulling data from different
> columns in the same Google Docs spreadsheet. The closest I've come so
> far, by simply repeating the javascript, does display two piecharts,
> drawn from the data I want, but with the chart title duplicated. (See
> http://www.metasea.com/hed/samplemod6.html -- the title for the first
> chart should be 'London ticket sales.')
>
> For some reason, the code for the first chart seems to be ignored in
> the browser (the div containing it is blank) while the code for second
> chart is being executed *twice.* What's even more puzzling to me is
> that the code that *does* display pulls data from the different
> spreadsheet columns, exactly as I want, yet repeats the chart title.
>
> I've tried consolidating the javascript in ways that seem plausible to
> me -- although I'm no javascript expert, so I might have missed
> something -- but the result is no charts displaying at all.
>
> Anyone have insights as to what I'm doing wrong?
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to google-visualization-api@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
