The Gauge Chart
You can build this data set similarly to how you would build a data set for a pie chart. The main difference is that there is only one list element to build the complete chart. In the example below, I am summarizing the total amount of opportunities closed this month related to an account.
The structure for building this chart is almost identical to what we’ve seen already with the previously existing chart types. To populate the chart with data, you need to build a list with an inner class (aka wrapper class). One thing to note, your wrapper class must have a ‘name’ field if you want to display a tooltip on hover. Once your data set is constructed, you can output it on your Visualforce page with a few simple components:
In my page above I named the chart “MyChart.” I was able to manipulate all of the axes by using a simple on() method call. The code below is the snippet that I put into my page, and the picture below that displays the new results.
The Radar Chart
The radar chart is a unique chart to build. In order to create this data set, you will need to create a list of maps rather than using a wrapper class. For my example, I am plotting customer satisfaction ratings related to an account. Each of these ratings are stored as number fields to plot on a circle. In Winter ’13 you can now query field sets, so I have put all of the rating fields from my account into a field set (named RadarSet) to build out my chart.
One thing to note, you don’t have to use a field set to build this chart. I used a field set because I thought it would be more elegant to dynamically query for and generate chart data. You could build your own hardcoded SOQL query if you wanted, but by using field sets you can easily change the fields in the query without having to change the code, or you could also take this code and make another radar chart quickly off of a different field set.
To explain the code above, I have broke down the order of operations in my class as follows:
- Build a dynamic SOQL statement using fields from my RadarSet field set (lines 9-21)
- Save all of the field set API names to a list for reference to use with the describe maps (line 19)
- Generate describe information based off of query results (lines 23-25)
- Create a map of labels and API names (lines 28-31)
- Use field set list to map labels to values returned from the query (line 30)
- Store these to a map of objects for each data point, and add that to the overall map which will populate the chart on the page (lines 34 to 42)
In my example I am querying for all opportunities related to a campaign and plotting them on a graph with the x-axis displaying the expected revenue value and the y-axis displaying the actual amount. By default it will display all opportunities, but I am using an actionFunction on a selectList to rerender the chart to display records of a specific lead source.
In my function I first call a remote action, a method inside my Apex class, called getRemoteScatterData. After I check that the result returned from the remote action is valid, I loop through the results to either save everything if ‘All’ is selected or only the opportunities with the selected lead source. I used a jQuery selector to grab the selected value because Visualforce appends extra characters to the id of the selectList.
Try it yourself!
Visualforce charting enables you to quickly generate rich, animated charts, without having to use a 3rd party system for the meat of it. There are definitely some kinks in the process right now being that it just went GA in Winter ’13, but I’m sure we’ll be seeing updates and enhancements with upcoming releases in the future.
I have done a few examples here, and there are more examples elsewhere on developer.force.com, but there’s no better way to learn than to try it out yourself. In addition to the examples I have put here, I have also uploaded a full sample pack on GitHub including a complete Apex controller and Visualforce page for each chart type. Take a look at those examples, and feel free to reach out to me via twitter if you have any questions.