DeanLogic

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.