I have been looking at the YouTube Insight function and want to learn how their chart PNGs are created.
If you have a video and look at the statistics, you get a bunch of PNG-images that in many ways can be considered interactive. Look at the image below.
As far as I can tell, everything consist of PNG images. I expected to see flash elements, but I do not.
For example: The slider where you chose date range can be dragged, clicked and the image updates dynamically without the page reloading. I am thinking, maybe ajax-style calls are made that replaces the image? It is totally seamless as far as I can see.
Another example: You can chose country by clicking the world map. The images are instantly updated to display the demography chosen. Are something simple as image maps used to catch the clicks?
Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png
My questions are:
1). How do you create PNG images with information from a database? I prefer to use PHP so if you like tweak your answers in that direction. I am not looking for any third part “plugins”, other than perhaps jQuery.
2). How are they creating the “interactivity” on their PNGs?
The PNGs are only clickeable and interactive when you check Google Insight on your own videos. Checking normal statistics for a video only loads static PNGs.
I know about Open Flash Chart and the likes, however I want to create my own code to learn as much as possible and be able to tailor the code for my use.
I truly appreciate any answers. Please ask for clarification if I am unclear.
EDIT: I examined the Google/YouTube source code further and found one of the images to be:
<img src="http://chart.apis.google.com/chart?chs=422x110&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
Which looks like this (saved from my valid session):
Image from source http://www.mattis.st/images/google_insight2.png
As you can see, this is the background PNG image without the bars and the range selection overlay.
After thinking about it, examining the source even more, and considering the replies you guys have made I have come to the following conclusions:
1). The PNG’s are generated with the Google Charts API (thanks Tom!).
2). The interactivity is created with nifty javascript programming. The seamlessness of it is hugely impressive, and I will try to implement something alike in my project.
Thank you for your replies and your time.