Tag: API

Categories
Development

Google Visualization Pie Chart

Haven’t played around with the Google Visualization API in a little bit, so I was quite pleasantly surprised to learn of some very nice new features and improved documentation since my last encounter. Mind you, it was very impressive to me 18 or so months ago, but now has gotten better in so many ways.

First off,  the getting started examples are great and can get anyone with basic web skills making static or interactive charts in no time. The Code Playground is also very useful to play around with, making changes and seeing the result on the fly is very convenient.

The new pie chart is great. It’s improved appearance and tool tips are very welcomed. It has a much more polished look to them.

Here’s an example I threw together in just a few minutes.

Categories
Development

Google Font API & Font Directory

I’m very excited that Google announced some high quality open source web fonts. The lack of safe web fonts has always been a pain at times, and the CSS3 font-face is still tricky when dealing with copyrights.

Currently it appears that they’re offering 18 fonts for use. While not a ton of fonts, it is a welcome addition.

Using the Google Font API couldn’t be easier! They offer a great getting started page. Hopefully more fonts will be added soon, and site won’t go too overboard incorporating the new fonts either.

Categories
Development

Yahoo! Term Extraction Web Service

Just finished up using one of my favorite and what seems to be little well known web service, the Term Extraction from the folks a Yahoo! You feed it some content and it returns a list of significant words from the content. This simple service can be incredibly useful.

For instance I recently used this service to scan an article on a site and using the words that it returns, as tags to pull relevant photos from Flickr to go along with the article. So in this case I used it to pull tags from a body of text, very cool. You can also use YQL to make calls to it as well.

Categories
Development

Using YUI Get Utility to consume Flickr API

I wanted to pull photos from a Flickr account onto a site. The Flickr API is awesome and there’s a ton of libraries out there for using it. Unfortunately, cURL isn’t currently installed on the server, so the PHP libraries won’t work for this case.

So I figured I’d give the YUI Get Utility a try. The Get Utility provides a mechanism for attaching script and css resources – including cross-domain resources – to the DOM after the page has loaded. And this has worked really well.

Here’s what I did:

  1. Included the following YUI scripts: 
    <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
<script src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js" type="text/javascript"><!--mce:1--></script>
  2. Then fetch the Flickr feed in JSON format using the Get Utility.var 
    objTransaction = YAHOO.util.Get.script(<url goes here>);

    Be sure that the Flickr REST call is set to output to JSON so that the Get Utility can consume it properly.  Append &format=json

  3. Then write a function to act on the JSON response from Flickr.  Here’s an example of taking the JSON response and outputting thumbnails of photos with links to the larger view: 
    function jsonFlickrApi(rsp){ 
 
    if (rsp.stat != "ok"){
 
     alert('no data returned');
 
     return;
 
    }
 
    for (var i=0; i<rsp.photoset.photo.length; i++){
 
		var photo = rsp.photoset.photo[i];
 
		var container = document.getElementById('container');
		var photosList = container.getElementsByTagName('ul');
 
		// create elements
		var photoItem = document.createElement('li');
 
		var photoAnchor = document.createElement('a');
		var photoImg = document.createElement('img');
 
		// set attributes
		photoAnchor.setAttribute('href', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg');
		photoImg.setAttribute('src', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg');
		photoImg.setAttribute('width', '75');
		photoImg.setAttribute('height', '75');
		photoImg.setAttribute('alt', photo.title);
 
		// append to DOM
		photoAnchor.appendChild(photoImg);
		photoItem.appendChild(photoAnchor);
 
		photosList[0].appendChild(photoItem); 
 
		}
 
    }
 
    var objTransaction = YAHOO.util.Get.script("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=<insert_your_api_key>&photoset_id=72157594235977414+&format=json&per_page=60");

View an example

Categories
Development

Using a Spreadsheet to populate a chart with the Google Visualization API

I’ve been messing around with adding charts/graphs to web pages that can pull their data from a Google Doc Spreadsheet.  That way the chart is updated when the data is updated, instead of placing a static image of a chart on the page.  Conveniently the Google Visualization API makes creating attractive visualization of data fairly easy.  All you have to do is set up a Google Docs Spreadsheet, then do the following steps:

To get the data source url for Google Spreadsheet data sources follow these steps:

  • Create a spreadsheet in the format expected by your gadget.
  • Select the range of cells you want to display in the gadget.
  • From the toolbar, click ‘Insert’ and choose ‘Gadget’.
  • Choose an existing gadget or select ‘Custom’ as the gadget type, enter the URL of your gadget XML specification and click ‘Add’.
  • In the gadget title, click the arrow icon on top right of the title bar.
  • Choose “Get query data source url…” from the popup menu.
Then you can just call that data source url through some javascript on a webpage. Â