Google Charts API
I was chatting with Neil today at work about displaying the data from the IMDb top 250 list in some sort of chart, was originally thinking of adding it into Munin which we use for server stats and just linking the image onto a page on my website.
We had a quick look at the Google Charts API to see what it could do. We've thought about using this at work for a while, but never got round to adding it into any of our projects.
Neil knocked up a quick chart for some film lists on his site and it seemed easy enough. This evening, I've stolen his chart and used it with my data to add a progress chart to the bottom of my film 2006-2009 pages (also 200 film which is pretty much just film 2005). It was a bit fiddly to get the chart exactly as I wanted, but once you begin to understand how the API works, it's not too bad.
I've just knocked up another page, Film Charts which overlays each of the 5 years on top of each other. A bit trickier than I thought at first. With 365 data points for each year and the image retreived from Google through a get request I quickly ran into the URI length limit imposed by the browser. So instead of plotting all 5 series on separate graphs, I've created 5 different graphs and using absolutely positioned divs and some transparency got them to render on top of each other.
A little bit of Javascript allows the user to turn different years on and off, so you can see how badly I'm doing this year :)
We had a quick look at the Google Charts API to see what it could do. We've thought about using this at work for a while, but never got round to adding it into any of our projects.
Neil knocked up a quick chart for some film lists on his site and it seemed easy enough. This evening, I've stolen his chart and used it with my data to add a progress chart to the bottom of my film 2006-2009 pages (also 200 film which is pretty much just film 2005). It was a bit fiddly to get the chart exactly as I wanted, but once you begin to understand how the API works, it's not too bad.
I've just knocked up another page, Film Charts which overlays each of the 5 years on top of each other. A bit trickier than I thought at first. With 365 data points for each year and the image retreived from Google through a get request I quickly ran into the URI length limit imposed by the browser. So instead of plotting all 5 series on separate graphs, I've created 5 different graphs and using absolutely positioned divs and some transparency got them to render on top of each other.
A little bit of Javascript allows the user to turn different years on and off, so you can see how badly I'm doing this year :)
Labels: api, charts, css, google, javascript, update, website
posted by Unknown at 9:53 PM
0 comments
