Gapminder - Integrate animated Graph and new User Experience in Visualforce

by - 12:11 AM

I am always a big time fan of data visionary Mr.Hans Rosling, a great statistician who have been presenting for years in TED Conferences. I came across and meet him last time in TED Conference in Austin, TX. After watching this video in the conference, I was deeply fascinated on how data can be presented in story telling way. 

His demonstration of GAPMINDER, the stats software, that he designed, had triggered a thought in me, to somehow plug this  application with and then present the business data on top of it. I always wanted to see the experience this application can leverage to business as story. My only issue was, that the, GAPMINDER was paid software and wasn't easily available through API

Google solved my problem, they bought GAPMINDER and google made this frame available through their Google Visualization API, which was my piece of cake I was looking for.

I today plugged and played with API and nailed in no time. Check out this demo video of Google Visualization Motion Chart that I designed with Salesforce. In the graph below, I have plugged in data from the backend using Visualforce remoting and pulled Opportunity and Probability and populated the graph for couple of records. This video demonstrate how the probability on Account changes with time as a storytelling, though, I am not a good storyteller but when you populate this graph  with a good and healthy data, then you will realize that,  the graph just sings.

*Note - I am now using Visualforce Objects and Removed controller after publication of this post and have edited this post. Now we no more need Apex controller for all this magic to happen.

So here is the Google Animated Charts purely with Visualforce Objects and works with Spring 14 release (require no object remoting and apex code )

Notice two code snippets, one shown in the video, I used javascript remoting and while after recording I improved the code and make it work in Visualforce Remote Objects 

If my voice doesn't sound clear or may go wacky, then my apologies, my mic is little jacked up as well :-)

After recording this video, I modified code and pushed it to github, you can pull both the code from repository, one with Visualforce Remote Objects and other Javascript Remoting, if you are not aware of the Visual Remote Objects then check here

Fork Github Repo at here

Google Motion Chart - with Visualforce Remote Objects (No Apex required, just copy paste to run)

Google Motion Chart - Page with JavaScript Remoting (as shown in video above)

You May Also Like