My Statistics Graph Formula

My formula for converting and using real values in pixel space.

Using with bars:

Max_Graph_Value = 1000
Max_Graph_Height = 100 (px)
ABC = 500 (50% barvalue as example)
VPX (value per pixel) = Max_Graph_Value/Max_Graph_Height (=10)
Actual_Graphical_Value = ABC/VPX (=50)

So to represent the 500 value in a 1000 scale, in a 100px height window, this formula figures out that it has to be 50px. The ABC variable represents each graph bar/value.

Using with curve:

Max_Graph_Value = 1000
Max_Graph_Height = 100 (px)
Space_Between_Each_Value = 5 (px)
ABC = 500 (50% bar value as example)
VPX (value per pixel) = Max_Graph_Value/Max_Graph_Height (=10)
Actual_Graphical_Value = ABC/VPX (=50)

Rise_Modifier = Actual_Graphical_Value/Space_Between_Each_Value (=10)

The Rise_Modifier is used to know how many pixels you rise to make a straight as possible line from 1 value to another on a graphical curve. So that rising 10 times on each pixel (5) will gain the required raise. To make a curve descend, you use negative numbers instead.

Remember the Actual_Graphical_Value from step to step, so that it actually becomes a curve, where the curve value lowers and raises according to ABC given values.

Curve use illustration
This dynamic example (F5 to reload new values) shows sales from 2010 to 2015 with a maximum value of 1000.



You can download the above example code (PHP) here.
Random values has been used in the example above, that you can easily swap with real database values.