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
-~----------~----~----~----~------~----~------~--~---
