JSON Chart Example with Yahoo YQL

With the introduction of the JSON binding, IPU-Chart is able to display data from many data providers. There are services on the web for many different kind of data (like for example finance, geographical, demographical or weather data). And with a little effort you can build a service that delivers json from your own data. This JSON chart example demonstrates a data binding to open data accessible through the Yahoo Query Language (YQL).

The chart below is built from a live data feed from Yahoo. It displays the most recent key data of the world’s biggest companies (click on the gray squares to change between the keys).

In the following I will describe how to access the data and bind it to a bar chart.

Get the Data

The first thing we need is the data. You can use any service that returns json as response. There are services on the web for many different kind of data (like for example finance, geographical, demographical or weather data). In this example we use data from Yahoo open database that can be accessed with YQL.
Let’s start. Go to the YQL Console and enter the following statement:

select * from yahoo.finance.quotes where symbol in ('AAPL', 'XOM', 'MSFT', 'GOOG', 'GE', 'CVX', 'IBM', 'PFE' ) order by MarketCapitalization

Choose ‘json’ as output format and press the ‘Test’ button. This will return a json formatted response like this:

...
"results": {
"quote": [
{
"MarketCapitalization": "422.1B",
"EBITDA": "57.381B",
"Name": "Apple Inc.",
"PERatio": "10.78",
"PEGRatio": "0.54",
"Symbol": "AAPL"
},
{
"MarketCapitalization": "402.3B",
"EBITDA": "71.864B",
"Name": "Exxon Mobil Corpo",
"PERatio": "9.37",
"PEGRatio": "5.97",
"Symbol": "XOM"
},...
}

Build the Chart

Take the ‘Rest Query’ at the bottom of the page to load the data in your chart:

http://query.yahooapis.com/v1/public/yql?q=select MarketCapitalization,EBITDA,Name,PERatio,PEGRatio,Symbol from yahoo.finance.quotes where symbol in ('AAPL', 'XOM', 'MSFT', 'GOOG', 'GE', 'CVX', 'IBM', 'PFE' ) order byMarketCapitalization&format=json&env=http://datatables.org/alltables.env

You can use the IPU-Chart Editor to create the shortcode. It is also possible of course to enter the shortcode immediately in the post without using the editor. But your job is much easier with the editor.

  1. Enter the generated uri in the ‘uri’ field.
  2. Select ‘json’ as data format.
  3. Enter the following code in the ‘adapter’ field: return data.query.results.quote;.
  4. Change to the ‘Chart Definition’ tab
  5. Enter the following as ‘category’: Symbol
  6. Enter the following as ‘value’: MarketCapitalization,EBITDA,Name,PERatio,PEGRatio
  7. Enter the following as ‘format’: s,n,n,s,n,n
  8. Press the ‘refresh’ button
Data and adapter definition for a json chart.
Data and adapter definition for a json chart.

The Data Adapter

The most tricky part of the definition is the data adapter. IPU-Chart expects a (flat) array of objects as input data. The category and value definitions must be attributes of these objects. As the json returned by Yahoo is a hierarchical data structure we need to transform it in a data structure that IPU-Charts can understand.
The data adapter can be any javascript function (plain js, jQuery or d3) that returns an array of objects. The function has as only argument the data object returned by the json call. In the example here the data objects we want to display is somewhere in the hierarchy of the response. So we can just return the path to this array: return data.query.results.quote.
Of course the adapter can also do more work as for example merge different parts of the response, calculate new values or change the attribute names.

Using the Generated Shortcode in a Post or Page

In the ‘Shortcodes’ tab there will be a chart shortcode like this:

[chart id="c581621" json="http://query.yahooapis.com/v1/public/yql?q=select MarketCapitalization,EBITDA,Name,PERatio,PEGRatio,Symbol from yahoo.finance.quotes where symbol in ('AAPL', 'XOM', 'MSFT', 'GOOG', 'GE', 'CVX', 'IBM', 'PFE' ) order by MarketCapitalization&format=json&env=http://datatables.org/alltables.env" adapter="return data.query.results.quote;" type="bar" category="Symbol" value="MarketCapitalization,EBITDA,Name,PERatio,PEGRatio" format="s,n,n,s,n,n" color="auto" style="width:100%;height:400px;" title="Market Capitalization (Billion $) of the biggest companies of the world (datasource: Yahoo)" description="Set a description..." sort="false" img="" debug="false"]

Copy the generated shortcode to your page or post and it will display the market capitalization as a bar chart:

Further Reading

Share This On
Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+Pin on PinterestShare on TumblrEmail this to someone

Leave a Reply