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=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'<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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/k6jooeqwx5gJ. 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.
