I have recently been reading Information Dashboard Design by Stephen Few. It looks at dashboard design, specifically how to present your data to optimized the dashboards usefullness. If you would like more information on Stephen Few or his writings you can find it here http://www.perceptualedge.com/
In Information Dashboard Design, Stephen Few presents a interesting new graph that "achieves the communication objective without the problems that usually plague guages and meters". The Bullet graph presents a lot of data in one compact visual display that is easily intrepeted.
Luckily vCharts allows you to quickly configure Bullet Graphs in few short steps.
- Set your Target ( the dash)
- Set your Value ( the bar)
- Set your Color Ranges ( Background Colors) -these can be both dynamically based on your data set or set manually in Chart Studio.
The only thing left to do is set up your colors and margins just as you want them. In the following example you will see that you can get a lot of data in one Graph.
A quick description of the data in the Chart
- The Target (Vertical Dash) is projected Revenue
- The Value (Horizontal Bar) is the actual Revenue
- Color Ranges
- Darkest Blue indicates the Gross Profit
- Middle Blue indicated the Production Cost
- Lightest Blue just a background color.
If you want more info on Bullet Graphs or more information of Stephen Few and his methodolgies or writings, check out http://www.perceptualedge.com/
Often in vCharts you will want to format your numbers. Personally, I have often found that limiting the # of decimals makes a big time change in the ease at which a chart or gauge is interpreted.
Today I will give you a little run through on how to set up scaling in your charts. By default Fusion Charts does not include Billions 'B' (ex $100.0 B ) in their scaling, so lets add that in.
There are three properties that you need to modify:
- Change 'Number Scale Value' to 1000,1000,1000 ( Fusion Charts defaults this to 1000,1000)
- Change 'Number Scals Unit' to 'B,M,K' (Fusion Charts defaults this to M,K)
A quick demo :
And thats it folks, we are good to go. Now all of your Billion values can be nicely formatted.
Lets add a trend line to our standard column chart!
Currently trend lines are an advanced feature only configurable by using the "Advanced Configuration" area. In order to add these you need to specify the xml for the trend line.
Here is an example of a trend line xml configuration:
<trendLines> <line startValue='25000000' endValue='26000000' thickness="2" color='330099' displayvalue='Long Term Goal'></line> <line startValue='18000000' endValue='21000000' thickness="2" color='009933' displayvalue='Target' istrendzone="1"></line> </trendLines>
And here is the chart:
As you can see from the xml, the lines are very customizable. Besides the values you can specify, the color, thickness , and you can even configure them into a trend zone!