Computer Graphics in PHP - World (incoming data) to Pixel (screen) conversion
Archive - Originally posted on "The Horse's Mouth" - 2011-03-24 19:31:49 - Graham Ellis
If you want to draw a diagram or chart on your web page, using data held on your server, chances are that the co-ordinates of the data won't match the pixel numbers that you're using on the screen. A case in point - on this week's PHP Techniques Workshop was a file of data for the years 2005 to 2010 (to be plotted along the X axis of a 750 pixel wide window ... allowing 100 pixels on the left for border and labels, and 50 pixels on the right for border. Then on the Y axis, 400 pixels long from pixel 0 at the top to pixel 399 at the base, we wanted to plot a number in the range 1.0. to 3.0.
In computer graphics for diagrams such as this, you can convert a world co-ordinate to a screen co-ordiante using a multiplication and an addition; the clever bit is working out what the factors are for the multiplication and addition. During the course, I wrote a "Bull at a gate" piece of code and then, as I wrote it, moved constants out to single assignments, and created a "pixelator" class to performa axis transforms. The contsructor is called with two mappings alon an axis - for example $xaxis = new pixelator(2005,100,2010,$wid-50);
2005 (world) converts to 100 (pixel) and 2010 (world) converts to 50 less that the graphic width (pixel). I can then call a method to convert world to pixel co-ordinates as I draw my diagaram: $xp = $xaxis->w2p($year);
and leave the messier geekier calculation safely encapsulated within the class. The full graphic script is [here].
One of the other issues was how to display numbers in very different y ranges on the same set of axes, and as we were particularly interested in changes from 2005 to 2010, we normalised the data so that it always started at 100% and then went up or down. The graph shows the strong growth, at almost every station in the Bristol area, of train use over the six years, with some stations shooting way off the top of the graph. Actually it's not a huge surprise that the biggest proportional growth was at Severn Beach, where the service is now much better than it was in 2005.
But although a picture paints a lot of words very quickly, it's useful to have access to the real data. Rather than include that within the image, we elected to include it in a table in a web page that enclosed the table, and then call up the image script from within the HTML generating script. That web page script is [here] (and to complete the picture, the data file is [here].
The comments I have made above are about Bristol. Would you like to see what the diagram and figures are for your part of the country? Easy ... I've included a form at the end of the page into which you can type the letter or letter(s) that start your postcode, and you'll get a diagram for your own postcode area. You can do that from the running program which is [here] in our demo directory. It starts with "SN" for Swindon ...
If you want to draw a diagram or chart on your web page, using data held on your server, chances are that the co-ordinates of the data won't match the pixel numbers that you're using on the screen. A case in point - on this week's PHP Techniques Workshop was a file of data for the years 2005 to 2010 (to be plotted along the X axis of a 750 pixel wide window ... allowing 100 pixels on the left for border and labels, and 50 pixels on the right for border. Then on the Y axis, 400 pixels long from pixel 0 at the top to pixel 399 at the base, we wanted to plot a number in the range 1.0. to 3.0.