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>
On Mar 5, 6:49 am, asgallant <[email protected]> wrote:
> 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.
>
>
>
>
>
>
>
> On Sunday, March 4, 2012 6:19:39 PM UTC-5, boooeee wrote:
>
> > 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.
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
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.
