Google Charts API

Using the Google charts API, I was able to create a cool status bar at the top of a custom visual force page. This chart was used in conjunction with values derived from a dynamic aggregate query.

The custom visual force page incorporated checkboxes, picklists and input boxes which all fed different numerical values to the multiple records created from the page. As these the numerical values were fed to the database, the aggregate query would kick the newly stored data back to the page and re-render the dynamic status bar.

The goal for the user of the page is to reach 100.  As they get closer to 100, the status bar continues to grow more orange. Once the aggregate query reaches 100 the color of the bar is completely green.

This was not too difficult to accomplish as the status bar is nothing more than an html image URL.,lg,0,EFEFEF,1,BBBBBB,0&



(You can see where I had to place the aggregate query value in the URL 45|100)

All of the hard work was done by Google with the development of their dynamic chart library.

However making a dynamic URL was what I had to accomplish in order to get this to work right. Essentially I tackled this by building the URL string within the aggregate query’s Getter/Setter method within the VisualForce Pages controller, then feeding that string to a dynamic variable which is placed in the value attribute of an <apex:image> component.

After setting this component to re-render dynamically upon specific user events with ajax, this status bar worked like a charm. This also adds a cool effect to an otherwise boring visual force page.

I suspect developers throughout the SFDC cloud will soon be blogging of other cool ways to incorporate Google charts into their VisualForce development.

Remember when using a Google chart use the domain for security.