Google Blogoscoped

Forum

Dynamic Google Charting API  (View post)

Reto Meier [PersonRank 10]

Thursday, December 6, 2007
16 years ago17,827 views

Google just announced a cool API that lets you create graphs dynamically and in real time just by specifying a url string.

http://blog.radioactiveyak.com/2007/12/google-powered-dynamic-charting.html

Above 1 comments were made in the forum before this was blogged,

Philipp Lenssen [PersonRank 10]

16 years ago #

Update to the post: I've now replaced the chart generator at http://www.coverbrowser.com/a-z with Google's API... it did do all that was needed...

Adam Hevenor [PersonRank 0]

16 years ago #

You should check out the open flash charts

http://teethgrinder.co.uk/open-flash-chart/

Matthew Claypotch [PersonRank 1]

16 years ago #

can anybody say sparklines? http://chart.apis.google.com/chart?cht=lc&chco=ff0000,0000ff&chs=64x16&chd=s:FOETHECat,KATYPSNXJ

Matt Geldon [PersonRank 1]

16 years ago #

When you post this on a forum using the [IMG] tag, it does not recognize it as a picture. Any way around this?

Stephen Tordoff [PersonRank 10]

16 years ago #

[put at-character here]Matt

Read the rules – http://blogoscoped.com/forum/rules.php

Philipp Lenssen [PersonRank 10]

16 years ago #

Stephen, Matt did post the image URL, so it could have turned into an image but didn't, and I think that's what he's getting at. The URL doesn't contain any easy indicators that this is an image file (e.g. a .png extension) so it won't be auto-linked here at the time. As Google is delivering the right content type header (image/png) for the URL, what could be done is to check that header for every URL, but that would be a little time consuming for the server... maybe I can tweak the script tho.

Raghu Kanadam [PersonRank 0]

16 years ago #

Is this a move to counter flex. Flex's charting api looks most powerful while the rest of what flex can provide has already been handled by ajax/2.0/ et all. more options to stay with crawl-able HTML ?

Matt Geldon [PersonRank 1]

16 years ago #

Thanks Philipp. Someone should create a PHP class that loads the image and outputs it as imageX.png. It doesn't need the PHP image, only load as bin and output, or am I missing something?!

Ionut Alex. Chitu [PersonRank 10]

16 years ago #

<<Is this a move to counter flex.>>

I don't think Google wants to counter anything. They were using this internally anyway and they thought this might be useful to the public.

Philipp Lenssen [PersonRank 10]

16 years ago #

Matt, yes in PHP you can do this like e.g. as below... I'm using a snippet from CoverBrowser code... no need for GD image [indention won't show fully correctly here in the forum]:

class classAbout
{
....
public function showCoverTypesChart(...)
{
   ....
   $cacheFile = 'image/covertypes.png';

   if (!file_exists($cacheFile) ||!fileIsFromToday($cacheFile)) {
   $img = file_get_contents($this->getCoverTypesChartUrl());
   file_put_contents($cacheFile, $img);
   }

   echo '<p><img src="/' . $cacheFile . '" alt="" /></p>';
}

private function getCoverTypesChartUrl()
{
   // database stuff to set $sValues and $sLabels

   $sUrl = 'http: //chart.apis.google.com/chart?cht=p3&chd=t:' .
   $sValues . '&chs=480x150&chl=' . $sLabels . '&chco=89AF00,EA893B,89728D,54728D,' .
   'D9D300,8BAFC6,66AF00';

   return $sUrl;
}
....
}

...

function fileIsFromToday($path)
{
   $timestamp = fileMtime($path);
   return getIsoDay() == getIsoDay($timestamp);
}

... result is e.g. in the middle of here http://www.coverbrowser.com/about

Ionut Alex. Chitu [PersonRank 10]

16 years ago #

<< The "user" is the webpage that links to the chart. We would like to make sure that all users get their charts fast and reliably. Therefore we may temporarily block users (websites) that exceed the limit. A chart request is not counted if the chart image is cached by the browser or by a proxy. >>

http://groups.google.com/group/google-chart-api/msg/b53c39a571fda6c8

Franz Enzenhofer [PersonRank 1]

16 years ago #

hi alex

well, is it the webpage or the website? gets the whole domain / whole website blocked, or is it just a single page thats get blocked if the 50000 views are used?

and this means, that a scirpt that fakes the refferer could easily damage a site that uses this charts.

Philipp Lenssen [PersonRank 10]

16 years ago #

> The "user" is the webpage that links to the chart.

Yes, that's how I understood it, which means they check the referrer, which in turn means that if you get 60,000 visits from Digg over the course of a day, the included chart will break. Unless of course you copy the binary to your own server, which isn't as luxurious anymore, but still a nice service for some sites. Digg user caching won't help because it will be 60,000 actual fresh browsers who don't have this cached yet.

Maybe the best thing for blogs is to use an internal caching service that maps the URLs and handles the binary copying behind the scenes. But you don't wanna trigger the script anytime, like the PHP, as it may cause a bottleneck, so maybe you can link to a static file which triggers a 404 the first time, and the 404 script will then generate the static image...? Then I could link to e.g. ...

blogoscoped.com/chart/?cht=
p3&chd=t:90,49&chs=350x150&chl=Foo|Bar

... and it would automatically deliver the image from Google.

Ionut Alex. Chitu [PersonRank 10]

16 years ago #

It's not very clear, but for the moment I don't think the limit is enforced.

Ionut Alex. Chitu [PersonRank 10]

16 years ago #

Another way to cache stuff is using iGoogle gadgets: http://code.google.com/apis/gadgets/docs/publish.html

<< The_IG_FetchContent(), _IG_FetchXmlContent() and_IG_Get... functions cache your content for approximately 1-2 hours by default. You can use the refreshInterval parameter with these functions to refresh the cache more often. >>

Philipp Lenssen [PersonRank 10]

16 years ago #

http://chart.apis.google.com/chart?cht=p3&chs=640x255&chd=t:82,18&chl=Looks%20like%20Pac-man|Does%20not%20look%20like%20Pac-man&chco=FFFF00,000000&chtt=Percentage%20of%20chart%20which%20looks%20like%20Pac-man
http://chart.apis.google.com/chart?cht=lc&chs=100x125&chd=s:AUYZZZYYXWmyzzzymUXZZZZZZUYZZZZZYUA
http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chd=t:5,5,5,9,12|5,30,25,28,28|13,23,21,18,15,13,15,18,21,23|18,18,27,29,27,18,9,5,7,10|35,33,30,27,25,27,30,32,35,35,35|24,27,29,27,18,9,5,5,8,5,45|47,45,42,39,37,39,42,44,47,47,47|24,27,29,27,18,9,5,5,8,5,45|51,51|4,27|51,53,51,49,51|29,32,35,32,29|54,60|26,26|57,57|4,33
http://chart.apis.google.com/chart?cht=p&chs=200x125&chd=s:DZD&chco=ffffff,ffff00,ffffff&chf=bg,s,ffffff

[Via http://programming.reddit.com/info/62bm4/comments/]

Also via Reddit:

<<11.2 If you choose to submit your Content to Google, you give Google a worldwide, royalty-free, and non-exclusive license to reproduce, adapt, modify, translate, publish, publicly perform, publicly display and distribute this Content.

11.3 You agree that Google, in its sole discretion, may use your trade names, trademarks, service marks, logos, domain names and other distinctive brand features in presentations, marketing materials, customer lists, financial reports and Web site listings (including links to your website) for the purpose of advertising or publicizing your use of the Services.>>

(Not that I particularly mind either term...)

Stephen Tordoff [PersonRank 10]

16 years ago #

Apologies Matt, didn't realise you had tried to post the image. I also should have realised that they aren't standard image URLs.

I meant to post in more detail in my first post, but was a little rushed at the time

follower [PersonRank 1]

16 years ago #

Just testing something... :-)

http://chart.apis.google.com/chart?cht=p3&chd=t:90,49&chs=350x150&chl=Foo|Bar&.png

moeffju [PersonRank 0]

16 years ago #

Just testing something else...

http://chart.apis.google.com/chart?cht=p3&amp;chd=t:90,49&amp;chs=350x150&amp;chl=Foo|Bar#.png

Stephen Tordoff [PersonRank 10]

16 years ago #

This site serves a nice introduction to the Chart API for people who fin dto Google docs slightly itimidating.
http://publicobject.com/2007/12/use-google-chart-api.html

This is how it describes the API:
http://chart.apis.google.com/chart?cht=p&chd=s:DCF&chl=Easy|Awesome|Fun&chs=270x150#.png

olivier [PersonRank 1]

16 years ago #

Another free alternative : http://www.chartall.com/
It is based on .net apis, restriction to windows PCs then...

Roger Browne [PersonRank 10]

16 years ago #

These charts look very polished. I'm guessing Google is going to use these URLs with their docs and spreadsheets. The knew that people would be able to hack the URLs anyway, so they earned some karma by publishing the interface officially.

Plus, they get some good testing before it gets integrated with their docs and spreadsheets.

Philipp Lenssen [PersonRank 10]

16 years ago #

> The knew that people would be able to hack the URLs anyway

Though they could disallow hotlinking by disallowing any other domain in the referrer than *.google.com, and they can also add hash signatures in the URLs. Like they still do with the nice little clock they're putting on top of search results for queries like [time in san francisco]. Come to think of... this is weird... that clock URL actually DOES use the structure of the Google Chart API. Check this:

http://www.google.com/chart?chs=40x30&chc=localtime&cht=cf&chd=s:Im&sig=QN1Niknu9hMgh_svq6DVYY3Ds7s

(but it doesn't seem to work without the signature, even if you map the URL to chart.apis.google.com...)

Dataland [PersonRank 1]

16 years ago #

Google has released an open web API that provides a drop-dead simple means of adding graphs and charts to web pages. I really do find their implementation to be extremely elegant and powerful. Here are some sample charts and their usage urls. Good stuff!

Pingback: http://dataland.wordpress.com/2007/12/07/google-charting/

George R [PersonRank 10]

16 years ago #

You can display the clock with google translate (language tools).
I haven't tried combining it with other charts.

http://translate.google.com/translate?u=http%3A%2F%2Fwww.google.com%2Fchart%3Fchs%3D40x30%26chc%3Dlocaltime%26cht%3Dcf%26chd%3Ds%3AIm%26sig%3DQN1Niknu9hMgh_svq6DVYY3Ds7s&langpair=es%7Cen&hl=en&ie=UTF-8

Perhaps when the link in Philipp's comment makes it to the google cache you can show it that way.

George R [PersonRank 10]

16 years ago #

I just checked.
You can display the clock directly.
The signature does not seem to care about the referrer.
The signature may encode the time to display.
The signature seems to prevent making changes to the chart parameters.

Perhaps we can make a library of all 720=12*60 clock signatures.
We should be able to do this in one hour by checking all time zones.

Mr. K [PersonRank 0]

16 years ago #

Google will make money from these by collecting data about users from 3rd party sites that use the service... Basically think about an image used for statistics purposes. It's a bit of cheese to trap the mouse that's privacy.

Philipp Lenssen [PersonRank 10]

16 years ago #

> We should be able to do this in one hour by
> checking all time zones.

But then wouldn't you need to store all those signatures in some database, meaning there would be a lot of overhead?

Ionut Alex. Chitu [PersonRank 10]

16 years ago #

<<Google will make money from these by collecting data about users from 3rd party sites that use the service...>>

Why would they need that? They already have AdSense and Analytics, which are much more popular. This is a little toy that has nothing to do with money (like Google Sets or Related Links).

Roger Browne [PersonRank 10]

16 years ago #

I wonder if PageRank flows through hotlinked dynamic images. Not that Google needs help with their PageRank at this time...

Russ [PersonRank 0]

16 years ago #

Now we can create the best pie chart ever whenever we want:
http://chart.apis.google.com/chart?cht=p3&chd=t:85,15&chs=1000x300&chl=Percentage%20that%20Resembles%20Pacman|Percentage%20that%20Does%20Not%20Resemble%20Pacman

Adam [PersonRank 0]

16 years ago #

We've actually written a wrapper class for the Google Chart API:

http://www.talkphp.com/showthread.php?t=1704

George R [PersonRank 10]

16 years ago #

>> We should be able to do this in one hour by
>> checking all time zones.
>
>But then wouldn't you need to store all those signatures in some >database, meaning there would be a lot of overhead?

There are only 1440 signatures (12 hours * 60 minutes * 2 colors).
That is not very many for a database. You could use grep. If you are restricted in the software that can run on your server, you could make one redirection file per image. If you do not care about copyright or bandwidth, you could save the images and serve them yourself.

The time is encoded in the chart data field, "chd=s:HM", where H and M are encodings of the hour and minutes. In the M field the code "e" is skipped and minutes > 29 are off by one.

I assume the signature is generated by a hash function that google uses elsewhere. I have been able to make some limited changes to the url without invalidating the signature.

janem [PersonRank 0]

16 years ago #

Nice post. You can create a piechart using the google api through this easy to use interface.

http://www.slists.com/gc/piechart.htm

Anton Shevchuk [PersonRank 1]

16 years ago #

Online Chart Builder based on Google Charts API:
   http://charts.hohli.com

Haochi [PersonRank 10]

16 years ago #

Googler Dion Almaer also built a chart maker.
http://almaer.com/chartmaker/

DPic [PersonRank 10]

16 years ago #

It would really help if this was built into GDocs

Forum home

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!