Using Visualization on Blogger - Pages and Sidebar Gadgets

[boooeee]

On blogger, I have a standalone page that uses a google visualization
dashboard (a category picker bound to two line charts). The data
source is a google spreadsheet.

I want to add a sidebar gadget (HTML/Javascript) to my blog which
shows a smaller LineChart that queries the same google spreadsheet.

I was able to add the sidebar gadget, but once I add it, the dashboard
on the standalone page no longer loads. Is there any way to do this
so that both work? I can provide the code I'm using if needed.

[asgallant]

We can help more if you share the code/link to the page.  I suspect the problem is one (or more) of 5 different (but related) issues.

[boooeee]

Sure thing.

Here is the code on the Stand Alone Page:

<span style="font-family: Verdana, sans-serif; font-size: x-
small;">(may take a few seconds to load)</span><br />
<title>
The Ticker
</title>
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});

</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/tq?
key=0AvrH1ED8jrhgdHNDM0hDUkZ5cldoRTJtV0FDVUREbEE&headers=-1');

// Apply query language.
query.setQuery('SELECT C, B, D, F, H, J, K ORDER BY A');

// Send the query with a callback function.
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();

// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'state': {'selectedValues':['Bobcats']},
'options': {
'filterColumnLabel': 'Team',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});

// Define a GPF Line Chart
var gpf = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1',
'options': {
'width': 850,
'height': 600,
'chartArea': {'left': 40, 'top': 35, 'width':"80%",
'height': "80%"},
'series': [{'lineWidth':3},{'lineWidth':1},{'lineWidth':
1}],
'hAxis': {'slantedText':false, 'maxAlternation':1},
'title': '2011-2012 NBA Season - Generic Points Favored',
'curveType': 'function'
},
// Instruct the piechart to use colums 0 (Name) and 3
(Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [1, 2, 3, 4]}
});

// Define a GOU Line Chart
var gou = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart2',
'options': {
'width': 850,
'height': 600,
'chartArea': {'left': 40, 'top': 35, 'width':"80%",
'height': "80%"},
'series': [{'lineWidth':3},{'lineWidth':1}],
'hAxis':{'slantedText':false, 'maxAlternation':1},
'title': 'Team Generic Over/Under (GOU) Compared to League
Average (AOU)',
'curveType': 'function'
},
// Instruct the piechart to use colums 0 (Name) and 3
(Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [1, 5, 6]}
});

// Create a dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and
the category
// picker will drive both charts.
bind([categoryPicker], [gpf,gou]).
// Draw the entire dashboard.
draw(data);
}


google.setOnLoadCallback(drawVisualization);

</script>
<span style="font-family: Verdana, sans-serif;"><a href="http://
bettingmarketanalytics.blogspot.com/p/about-ticker.html"
target="_blank">what is this?</a></span><br />
<br />
<div id="dashboard">
<div id="control2">
</div>
<div id="chart1">
</div>
<div id="chart2">
</div>
</div>


And here is the code for the Sidebar Gadget. Whenever I add this
Gadget to my blog, it works, but then the Stand Alone page above stops
working.

<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});

</script>
<script type="text/javascript">
function drawTicker() {
// Create and populate the data table.
var tquery = new google.visualization.Query(
'https://docs.google.com/spreadsheet/tq?
key=0AvrH1ED8jrhgdHNDM0hDUkZ5cldoRTJtV0FDVUREbEE&headers=-1');

// Apply query language.
tquery.setQuery('SELECT B, D, F, H WHERE C =
"Clippers" ORDER BY A');

// Send the query with a callback function.
tquery.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' '
+ response.getDetailedMessage());
return;
}
var tdata = response.getDataTable();


// Create and draw the visualization.
new
google.visualization.LineChart(document.getElementById('visualization')).
draw(tdata, {curveType: "function",
width: 260, height: 180,
title: "The Clippers",
legend: {position: "none"},
chartArea: {left: 25, top: 25, width:"80%",
height: "80%"},
hAxis:{slantedText: false, maxAlternation: 1},
series: [{color: 'blue', lineWidth: 3},
{lineWidth: 1}, {lineWidth: 1}]}
);
}


google.setOnLoadCallback(drawTicker);

</script>

<div id="visualization"></div>

[asgallant]

How do you include the widget in your page?  Is that HTML/js code inserted directly into the HTML of the main page, or is it an iframe/object, something else?  I suspect that the JS code for both is in a common scope (which would be the case if you included both scripts in the same page); if so you have three potential problems:

1) you call google.load twice (call it only once, with all required packages listed as array elements)

2) you call google.setOnLoadCallback twice, which may be causing problems.  I'm not exactly sure how the API handles having multiple callback functions declared, it could run both or the second could override the first.  In either case, it is generally better to have only 1 callback to be safe.

3) you have two 'handleQueryResponse' functions.  If they are in common scope, the declaration of the second overrides the declaration of the first, which would prevent the first from ever being called.  Give them different names and they will be called correctly.

Roughly, the fix would look like this: http://jsfiddle.net/nerAg/

[boooeee]

Thanks! It appears that number 3 was the problem (identical
handleQueryResponse functions). Renamed them as you indicated and
things look great now.

On Mar 6, 8:17 am, asgallant <drew_gall...@abtassoc.com> wrote:
> How do you include the widget in your page?  Is that HTML/js code inserted
> directly into the HTML of the main page, or is it an iframe/object,
> something else?  I suspect that the JS code for both is in a common scope
> (which would be the case if you included both scripts in the same page); if
> so you have three potential problems:
>
> 1) you call google.load twice (call it only once, with all required
> packages listed as array elements)

> 2) you call google.setOnLoadCallback twice, which *may* be causing

> > key=0AvrH1ED8jrhgdHNDM0hDUkZ5cldoRTJtV0FDVUREbEE&headers=-1'<https://docs.google.com/spreadsheet/tq?key=0AvrH1ED8jrhgdHNDM0hDUkZ5c...>);

> > key=0AvrH1ED8jrhgdHNDM0hDUkZ5cldoRTJtV0FDVUREbEE&headers=-1'<https://docs.google.com/spreadsheet/tq?key=0AvrH1ED8jrhgdHNDM0hDUkZ5c...>);