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 <[email protected]> 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 > 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/ > > > > > > > > On Tuesday, March 6, 2012 10:09:08 AM UTC-5, boooeee wrote: > > > 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'<https://docs.google.com/spreadsheet/tq?key=0AvrH1ED8jrhgdHNDM0hDUkZ5c...>); > > > // 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'<https://docs.google.com/spreadsheet/tq?key=0AvrH1ED8jrhgdHNDM0hDUkZ5c...>); > > > // 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.
