Sorry, that was supposed to be: You should NOT use document.write (in this case).
- VizBoy. On Sun, Dec 14, 2008 at 5:15 PM, VizBoy <[email protected]> wrote: > Hi, > > You should use document.write. > > If you prepared the divs in advance (and I think you did) by having <div > id="table1_div> </div> <div id="table2_div> </div> and so on in your HTML, > then no document.write is necessary. > just > var table1 = new > google.visualization.Table(document.getElementById(container_id)); > like you did. > I think it's confused because you're writing a div with the same id as one > that already exists and that's forbidden in HTML. > > Regards, > VizBoy. > > > On Fri, Dec 12, 2008 at 3:51 PM, Pragan <[email protected]> wrote: > >> >> Hi Mr.Viz, >> >> Thanks for the reply. I understand the problems you had mentioned. Can >> you please guide me in creating the "container_id" for the divs? I >> tried to pass this as a parameter in the draw() function like this >> >> function draw(response, container_id) { >> if (response.isError()) { >> alert("Error in query") >> } >> var Data1 = response.getDataTable(); >> document.write('<div id="'+container_id+'"></div>') >> var table1 = new google.visualization.Table >> (document.getElementById(container_id)); >> table1.draw(Data1, {}); >> } >> >> then I did what you had suggested: >> query.send(function() { draw('table1_div'); }); >> .... >> .. >> query.send(function() { draw('table2_div'); }); >> ... >> and in the html part I have >> <body> >> <div id="table1_div" ></div><br /> >> <div id="table2_div" ></div><br /> >> </body> >> </html> >> >> I can do some javascript but not that much. Please let me know if I >> got anything wrong. >> >> thanks >> pragan. >> >> On Dec 10, 5:03 am, VizGuy <[email protected]> wrote: >> > Hi Pragan, >> > >> > When you use query.setQuery(...) you simply modify the query, but you >> don't >> > execute it or send it anywhere. >> > Only when you call query.send(draw); is the query really sent to the >> server >> > and executed. >> > So calling setQuery(...) many times in a row is just like setting a >> variable >> > a few times in a row: >> > var a = 4; >> > a = 3; >> > a = 2; >> > >> > Of course only the last value will be saved. This is the reason why your >> > code behaved the way it did. >> > Anyway, to have the desired effect you must use "send" in between the >> calls. >> > BUT it is not good to use send() again on the same query object because >> the >> > query obejct is in charge of accepting the incoming response, and it >> will >> > probably fail to process the response from the previous send() when that >> > returns. >> > What you should do is create a new query object and send() it. >> > >> > Also, I noticed that your current draw function always writes to >> table1_div. >> > This isn't good because the data drawn will overwrite itself. >> > If you want to draw this in four separate divs, i suggest modifying your >> > draw() function to accept a container_id parameter and inside it write >> > new google.visualization.Table(document.getElementById(container_id)); >> > instead of what you currently have: >> > new google.visualization.Table(document.getElementById('table1_div')); >> > Then you should add these new divs to the html body. Then you can write >> code >> > like the following: >> > >> > var url = ' >> http://spreadsheets.google.com/pub?range=b2:q2&headers=-2&key=pCECuvK... >> > 'var query = new google.visualization.Query(url); >> > query.setQuery(...) >> > query.send(function() { draw('table1_div'); }); >> > query = new google.visualization.Query(url); >> > query.setQuery(...) >> > query.send(function() { draw('table2_div'); }); >> > query = new google.visualization.Query(url); >> > query.setQuery(...) >> > query.send(function() { draw('table3_div'); }); >> > ... >> > >> > Hope this helps, >> > VizGuy >> > >> > On Tue, Dec 9, 2008 at 8:47 PM, Pragan <[email protected]> wrote: >> > >> > > Hi Mr.Viz, >> > >> > > I got the answer for this question from one of your reply in other >> > > post. >> > >> > > I have got a different quesiton and I guess I can explain it clearly. >> > > Please help me out. >> > >> > > In the below code, I am trying to use "query.setQuery" for 4 times >> > > for showing different cells but its just showing the output only for >> > > the last one i.e query.setQuery('select N,F'); and not for the ones >> > > above this. I would like to know how we can do this or if we can do >> > > this. I tried doing this by copying the query with query.setQuery('') >> > > and the draw(response) function for four times and that works fine but >> > > I feel its kind of redundancy. IS there any thing that I am missing >> > > here. Waiting for your reply!. If you would like to run this program, >> > > please copy paste it and it should work. >> > >> > > <html> >> > > <head> >> > > <script type="text/javascript" src="http://www.google.com/jsapi";></ >> > > script> >> > > <script type="text/javascript"> >> > > google.load('visualization', '1', {packages: >> ["table"]}); >> > > google.setOnLoadCallback(initialize); >> > > function initialize() { >> > > var query = new google.visualization.Query( >> > > 'http://spreadsheets.google.com/pub? >> > >> > > >> range=b2:q2&headers=-2&key=pCECuvKSpwpNJZB_pXSUdcg&gid=0&single=true&output=html'); >> > > query.setQuery('select B,C,D,E,Q'); >> > > query.setQuery('select B,F,Q'); >> > > query.setQuery('select F,Q'); >> > > query.setQuery('select N,F'); >> > > query.send(draw); >> > >> > > } >> > > function draw(response) { >> > > if (response.isError()) { >> > > alert("Error in query") >> > > } >> > > var Data1 = response.getDataTable(); >> > > var table1 = new google.visualization.Table >> > > (document.getElementById('table1_div')); >> > > table1.draw(Data1, {}); >> > > } >> > > </script> >> > > </head> >> > > <body> >> > > <div id="table1_div" ></div><br /> >> > > </body> >> > > </html> >> > >> > > On Dec 3, 2:54 pm, Pragan <[email protected]> wrote: >> > > > hi, >> > >> > > > Please check the below example. In this example, I can get the data >> > > > from the spreadsheet for the range I have specified(a12:B12). >> > >> > > > seMy question is: As I have the complete data set for this row 12, >> I >> > > > want to display the value from C12 in one place, E12 in other place >> > > > and so on in my website. >> > >> > > > I will be able to do this if I keep adding more queries for each >> cell >> > > > like this: >> > > > var query = new google.visualization.Query('http:// >> > > > spreadsheets.google.com/pub? >> > > > range=c12&headers=-1&key=pCECuvKSpwpOhprF4JsyUQA&gid=0'); >> > > > or >> > > > var query = new google.visualization.Query('http:// >> > > > spreadsheets.google.com/pub? >> > > > range=E12&headers=-1&key=pCECuvKSpwpOhprF4JsyUQA&gid=0'); >> > >> > > > so I want to know if I can achieve the above case as I have the >> entire >> > > > row through my one query(using range). >> > > > I am ready to use any other scripting language(like php) to make >> this >> > > > happen..but I want to know if its going to be more straight forward >> > > > and easy way than I think. >> > >> > > > thanksPragan >> > >> > > > Example: >> > > > <html> >> > > > <head> >> > >> > > > <style type=text/css> >> > > > .google-visualization-table-td-right {color:#ff0000;font- >> > > > weight:bold;} >> > > > </style> >> > > > <script type="text/javascript" src="http://www.google.com/jsapi >> "></ >> > > > script> >> > > > <script type="text/javascript"> >> > > > google.load('visualization', '1', {packages: ['table']}); >> > > > google.setOnLoadCallback(drawTable); >> > > > google.load("visualization", "1", >> > > {packages:["annotatedtimeline"]}); >> > > > google.setOnLoadCallback(drawChart); >> > >> > > > function drawChart() { >> > > > var query = new google.visualization.Query('http:// >> > > > spreadsheets.google.com/pub? >> > > > range=a12:Q12&headers=-1&key=pCECuvKSpwpOhprF4JsyUQA&gid=0'); >> > > > query.send(error); >> > > > } >> > > > function error(response) { >> > > > if (response.isError()) { >> > > > alert('Error in query: ' + response.getMessage() + ' ' + >> > > > response.getDetailedMessage()); >> > > > return; >> > > > } >> > > > var data = response.getDataTable(); >> > > > var table_excel = new google.visualization.Table >> > > > (document.getElementById('table_div')); >> > > > table_excel.draw(data, {showRowNumber: false}); >> > >> > > > } >> > > > function drawTable() { >> > > > var data = new google.visualization.DataTable(); >> > > > } >> > >> > > > </script> >> > > > </head> >> > > > <body> >> > > > <div id="table_div"></div> >> > > > </body> >> > > > </html> >> > >> > > > On Dec 2, 4:56 pm,Pragan<[email protected]> wrote: >> > >> > > > > Hi, >> > >> > > > > thanks again. I guess you got me right. I will post an example in >> > > > > sometime and then ask my question with better explanation. >> > >> > > > > thankspragan. >> > >> > > > > On Dec 2, 4:38 pm, VizGuy <[email protected]> wrote: >> > >> > > > > > So if I get you right, you will send a query to a range.Then you >> KNOW >> > > that >> > > > > > your data table has 2 columns, and x rows. >> > > > > > It should be quite simple to map a cell in the spreadsheet to a >> cell >> > > in the >> > > > > > data table. >> > >> > > > > > Am I missing anything? >> > >> > > > > > VizGuy >> > >> > > > > > On Tue, Dec 2, 2008 at 9:47 PM,Pragan<[email protected]> >> wrote: >> > >> > > > > > > Hi, >> > >> > > > > > > > 2. You can query for the whole range, and then use only the >> cells >> > > you >> > > > > > > > want. This might end up as a lower latency approach, as the >> size >> > > is still >> > > > > > > > small, and you save a round trip. >> > >> > > > > > > Thanks for the clarification. I can go with the second >> approach, >> > > but >> > > > > > > how we can just show the required cell after getting the data? >> For >> > > > > > > example, if my query for a range(c2:Q2) is giving the whole >> row >> > > with >> > > > > > > data then how can I just display D2 in one place and R2 in >> other >> > > > > > > place? >> > >> > > > > > > Thanks again. >> > > > > > >Pragan. >> > >> > > > > > > On Dec 2, 12:56 pm, VizGuy <[email protected]> wrote: >> > > > > > > > If you are not using a gadget, but writing your own js, you >> can >> > > do one of >> > > > > > > > two things:1. To send two queries to the same spreadsheet, >> each >> > > to a >> > > > > > > single >> > > > > > > > cell (or any other range). >> > > > > > > > 2. You can query for the whole range, and then use only the >> cells >> > > you >> > > > > > > > want. This might end up as a lower latency approach, as the >> size >> > > is still >> > > > > > > > small, and you save a round trip. >> > > > > > > > There is no way to specify more than one range in the >> request. >> > >> > > > > > > > VizGuy >> > >> > > > > > > > On Tue, Dec 2, 2008 at 7:10 PM,Pragan<[email protected]> >> > > wrote: >> > >> > > > > > > > > Hi, >> > >> > > > > > > > > I am using visualization api by having spreadsheet as data >> > > source. I >> > > > > > > > > am able to get the output for the range I define. For >> example, >> > > if I >> > > > > > > > > just want to show the data from A1-Q1 or A1-Q20, then I >> specify >> > > the >> > > > > > > > > range and it >> > > > > > > > > works fine. Same way I am able to define the individual >> cell >> > > like A5 >> > > > > > > > > or B8. >> > >> > > > > > > > > My question is : In a page, if I want to show data from A5 >> in >> > > one >> > > > > > > > > place and in other place if I want to show B10 then how >> > > > > > > > > can I do it without repeating the query again? Is there >> any way >> > > to >> > > > > > > > > store all the data(complete data from that sheet) in our >> local >> > > db like >> > > > > > > > > mysql >> > > > > > > > > and then show the specific value based on the query? Or >> Can we >> > > store >> > > > > > > > > the complete data in an array format and then show the >> required >> > > values >> > > > > > > > > by calling the element? >> > > > > > > > > If the above methods are possible, how to do it?? >> > >> > > > > > > > > Please let me know, if there is any other simple or easy >> > > solution. >> > >> > > > > > > > > thanks >> > > > > > > > >pragan. >> >> >> > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
