Help embedding a google spreadsheet's single cell's content on a site.

[Philco]

I'm doing a project to create a website with a chart of donations,
like a big rising thermometer in a sidebar and then have the total
number of donations displayed in a h1 tag.

I'm using the Visualization API to create a Column Chart from a Google
Spreadsheet and embed it on a site. That works great.

Next, I want to display the contents of a single cell on the site in
an h1 tag and style it.

What's the best way to do this? Do I create a visualization.DataTable
and then style away all the tr tags?

Thanks!

[ChartMan]

you can also just use a google.visualization.Query to get the content and then place it in a standard tml table.

HTH

ChartMan

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Philco]

Thanks! Is there an online example of that or something to point me
more in that direction?

[asgallant]

I am going to assume that you already fetched your data and placed it in row 0, column 0 of a DataTable object called "data" and that the desired h1 element has the id "foo".  Getting the data from the DataTable into the h1 element is quite easy:

var element = document.getElementById('foo');

element.innerHTML = data.getValue(0, 0);

You can style the h1 element however you like, using CSS style sheets or (if you want dynamic styling) javascript.

[ChartMan]

https://scraperwiki.com/scrapers/google-query-language-demo/edit/

--

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/-/lT5tHGrBpcwJ.

[Phillip Lamplugh]

Thanks, Chartman, but that demo page gave an error when I tried to view the output.

--
╯

O-O

mmm

[Phillip Lamplugh]

I don't think I've used dataTable.

I'm using the chartWrapper to create my column chart.  The data for the h1 is on that spreadsheet but in another range.

--

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/-/lT5tHGrBpcwJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
╯

O-O

mmm

[asgallant]

Can you share your code or a link to the page, so we can take a look?

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
╯

O-O

mmm

[Phillip Lamplugh]

Sure. Here's my code for the chart. I'm just using a range for that
(A-C.) The Cell I want to display as a string is H3.

google.setOnLoadCallback(drawVisualization);

table.draw(data, {allowHtml: true, showRowNumber: true});

function drawVisualization() {
var wrap = new google.visualization.ChartWrapper({
'chartType':'ColumnChart',
'dataSourceUrl':'http://docs.google.com/spreadsheet/tq?key=0AloeFMKsy0qqdExPN0lVRHR0MGU1OWxqVFJWR1VMdHc&range=A1%3AC6&headers=-1&pub=1',
'containerId':'visualization',
});

wrap.draw();

}

>>> To post to this group, send email to google-visua...@googlegroups.com.
>>> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

>>> For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
>>
>>
>>
>>
>> --
>> ╯
>> O-O
>> mmm
>>

> --
> 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/-/mmivSZUfzmoJ.
>
> To post to this group, send email to google-visua...@googlegroups.com.
> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

There is no good way to handle this particular problem with ChartWrappers, as they only store the query URL - there is no way to get the actual data returned from the query.  You'll have to run a separate query to get that data, like this: http://jsfiddle.net/Q52Wj/, or you can query once and use a DataView to filter the columns fed to the ChartWrapper, like this: http://jsfiddle.net/Q52Wj/1/ 

[Phillip Lamplugh]

Thanks Drew!  That worked great!  I used the second option.  Seeing it all there made a lot of sense and I was able to add a few more random cells of text.

--

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/-/D5OOZEWTxqMJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
╯

O-O

mmm

[asgallant]

You're welcome.

On Monday, April 9, 2012 12:20:46 PM UTC-4, Philco wrote:

Thanks Drew!  That worked great!  I used the second option.  Seeing it all there made a lot of sense and I was able to add a few more random cells of text.

On Wed, Apr 4, 2012 at 11:12 AM, asgallant <drew_g...@abtassoc.com> wrote:

There is no good way to handle this particular problem with ChartWrappers, as they only store the query URL - there is no way to get the actual data returned from the query.  You'll have to run a separate query to get that data, like this: http://jsfiddle.net/Q52Wj/, or you can query once and use a DataView to filter the columns fed to the ChartWrapper, like this: http://jsfiddle.net/Q52Wj/1/ 

On Wednesday, April 4, 2012 10:04:28 AM UTC-4, Philco wrote:

Sure.  Here's my code for the chart.  I'm just using a range for that
(A-C.)  The Cell I want to display as a string is H3.

google.setOnLoadCallback(drawVisualization);

  table.draw(data, {allowHtml: true, showRowNumber: true});

      function drawVisualization() {
        var wrap = new google.visualization.ChartWrapper({
           'chartType':'ColumnChart',
           'dataSourceUrl':'http://docs.google.com/spreadsheet/tq?key=0AloeFMKsy0qqdExPN0lVRHR0MGU1OWxqVFJWR1VMdHc&range=A1%3AC6&headers=-1&pub=1',
           'containerId':'visualization',
           });

         wrap.draw();

      }

--

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/-/D5OOZEWTxqMJ.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
╯

O-O

mmm

[Isaac Paulsen]

I have a similar problem, I have a google spread sheet that I am using as a data source. I have url( or links) in the cells of the spread sheet. I would like to have a button on my external web site use the link that is found in the cell on the google spreadsheet. Preferably with a just some type of url, or would I have to use Javascript on my site?

I have this that returns the information about a particular cell.. https://docs.google.com/spreadsheet/tq?range=B1&key=0Ag7YUwVcZvsRdEZyZC1OZjJsbVJVOEZmWXVQQ29FT1E&gid=0&headers=-1

that is getting the value as a data source, when you past that into a browser you get back the info about the data source. and you see htat the cell value is = "v" which is = "www.woot.com" which is just an example of a url.

any help would be much appreciated.

[asgallant]

You have to use javascript to fetch the data, but once you have the URL, you can embed it in a link as the href parameter.

[Isaac Paulsen]

would you mind posting a javascript example with the link to the google doc spreadsheet like I provided?!!!

thanks for you help

[asgallant]

Here's an example: http://jsfiddle.net/asgallant/JrDkK/

That should work, but I can't test it since your spreadsheet isn't published.

[Isaac Paulsen]

Th sheet is published @ https://docs.google.com/spreadsheet/pub?key=0Ag7YUwVcZvsRdEZyZC1OZjJsbVJVOEZmWXVQQ29FT1E&single=true&gid=0&output=html

I tried to put this into my site... dose not seem to be working.... any ideas?

<a href="" id="myLink">This is the target link</a>

<script

google.load("visualization", "1", {packages:["corechart"]}); 

google.setOnLoadCallback(getURL);

function getURL () {

    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?range=B1&key=0Ag7YUwVcZvsRdEZyZC1OZjJsbVJVOEZmWXVQQ29FT1E&gid=0&headers=-1');

    query.send(function (response) {        

        if (response.isError()) {

            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

            return;

        }

        

        var data = response.getDataTable();

        document.getElementById('myLink').href = data.getValue(0, 0);

    });

}

</script>

I also have " <script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script>" place on the header of my site...

Is there a way to get the url by using this feed? https://spreadsheets.google.com/feeds/cells/0Ag7YUwVcZvsRdEZyZC1OZjJsbVJVOEZmWXVQQ29FT1E/od6/public/basic/R1C2

 I see that the url is found in the <content type='text'>http://www.woot.com/</content>" portion on the feed?

Any ideas? really trying to get this to work, I will seriously paypal you money if I can get this to work! it has been driving me crazy!

thanks 

[asgallant]

Hmmm...I can view the link you posted, but the query URL still says access denied.

Here's a version that uses the XML feed: http://jsfiddle.net/asgallant/JrDkK/2/

Note that this version uses jQuery to handle the AJAX request to fetch the XML and to parse it for the URL; you don't have to use jQuery - it can be written in other libraries or as vanilla javascript.

[Isaac Paulsen]

here is my site that I am trying to get it to run on, here is the page, http://sandscout.com/hcar2 when you click on the link it just reloads the page?

[Isaac Paulsen]

got it ! the XML feed worked! thanks! what is your paypal email so I can push you some money!

[asgallant]

You're welcome.  I appreciate the offer, but I wouldn't feel right accepting money.  If you'd like to help, pay it forward instead; give someone else a hand when he or she is stuck.

[Isaac Paulsen]

Thanks again for you help, I have another problem that is kinda strange... I modified your code to grab the text... of one of the cells, it was working find yesterday then all the sudden this morning, it stopped... code below, any ideas why it is not displaying the text any more? 

HTML

<a><font size="10"><center><b><div id="myLink3"></div></b></center></font></a>

Javascript

  $(function () {

    $.ajax({

        url: 'https://spreadsheets.google.com/feeds/cells/0Ag7YUwVcZvsRdEZyZC1OZjJsbVJVOEZmWXVQQ29FT1E/od6/public/basic/R3C2',

        dataType: 'xml',

        success: function (response) {

            $('#myLink3').text($(response).find('content').text());

        }

    });

});

[Isaac Paulsen]

himm now it is working, now must have something to do with my website hosting or google servers

[asgallant]

If you plan on pulling more data from the same spreadsheet, then it would probably be better to figure out why the query wasn't working before rather than add more single-cell data pulls.  Also, you can consolidate the code a bit by putting all the AJAX calls into a single $(function() {...}); call (this is a shortcut to create a document.ready event handler that runs the AJAX calls when the page is finished loading).