While going over a project at work, one of the graphs that the project used was a meter that had different threshold levels along with the indicator. Luckily for me, the Degrafa site had a similar meter as an example. However, the example wouldn’t be pretty enough for the project. I don’t know what the real name of this meter is, so I am calling it a Percentage Threshold Meter.
After looking into the example a little more, I also updated it by using a line repeater for the ticks and scaling the item based on 100%. Each tick would represent 10 percent of the total. The space between the ticks is determined by the height of the meter (component) divided by 10. This gives me the 10 sections for the 100% reading. I guess I would have to alter the meter is someone wanted to show something being over 100%. If the meter has the space, any value above the maximum number will shoot it out of the meter. I guess that would be good if you wanted to show busting through some number or something. But, they could always have 100% be one of the thresholds and then have the maximum number be over 100%. I also added a low, high and medium number to the ticks.
Another thing I changed was just the general look. I used another meter (capacity indicator) and a previous bar chart that I had created as guidelines for figuring out shades and highlights to make the indicator and the background more roundish. The key was to use RoundedRectangleComplex, which allowed me to round some corners, but not others.
By figuring out the height and maximum and minimum values, I was able to set the threshold percentages relative to the component size. This makes sure that the meter is a certain percentage of the entire graph based on the values. To add a nice little touch, I added the threshold percentages at the spot where the color changes.
The user can pass in the minimum value, the maximum value and the current value. The meter will grow (not animated) to the percentage based off of the values. The user can also pass in the percentage thresholds to show that the meter has reached a certain percentage of the total. The user can also change the threshold colors.
Dean has been playing around with programming ever since his family got an IBM PC back in the early 80's. Things have changed since BASICA and Dean has dabbled in HTML, JavaScript, Action Script, Flex, Flash, PHP, C#, C++, J2ME and SQL. On this site Dean likes to share his adventures in coding. And since programming isn't enough of a time killer, Dean has also picked up the hobby of short film creation.
