Here is a very interesting site I just found about the user interfaces (GUI) and how they looked before (many years) and how they look-n-feel nowadays. I strongly recommend you take look at it:
http://www.guidebookgallery.org/screenshots/firstrun

Recently I had some free time and willing to experiment with something quite new - the SVG. So I looked at some sites, read some general info and started writing. The result, and aim of this article is:
Scalable Vector Graphics diagrams
The SVG is actually a XML which, interpreted in a proper way displays an image. Of cause as everything new and fresh, SVGs cannot claim to have wide browser support, though the became a W3C standard and most new browsers support them.
Here are the sites I found very usefull about learning the basics: http://w3schools.com/svg/ - Read it to get the basic idea of the power of SVG;
http://www.w3.org/TR/SVG/ - Here is a site to read if you feel "more advanced" . Here you will find a full reference of the functions, scripting and animation options.
The script I wrote draws a quite Ugly graphics, but may turn out to be quite usefull cause it does not require any additional modules compiled in the http server and is very fast. All it does is some math calculations to see where to place the lines and the points. Source of the PHP script is found here: codes/svg_graph.phps; the script in action can be found here: codes/svg_graph.php. Use this script under the terms of GPL and please, if you find it worth - write me a mail
So a brief explanation of what the script does:
Configuration part $input_array = array ( // The source of data, which is the base of the diagram "September" => array ("Four" => 100,"Three" => 150), "Octomber" => array ("Four" => 40,"Three" => 30) ); // Output image`s dimentions $image_width = 640; $image_height = 480; // A border to be left on the left and bottom side. $frame_left=70; $frame_bottom=20; // Colors palette to show the different lines $colours = array('#F00','#0F0','#00F', '#A98', '#111', '#222', '#333', '#444', '#123','#321' ,'#567' ,'#ABC');
Calculate point dimentions
// Get the greatest and lowest result to calculate the $greatest_result = null; $smallest_result = null; foreach ($input_array as $stat_results) { foreach ($stat_results as $result) { if ($result>$greatest_result || $greatest_result==null) $greatest_result = $result; if ($result<$smallest_result || $smallest_result==null) $smallest_result = $result; } $total_cols = count($stat_results); } $point_w = $image_width/$total_cols; $point_h = ($image_height-$frame_bottom)/(abs($greatest_result)-abs($smallest_result));
Browser recognition
// Send http header header("Content-type:image/svg"); // Send XML heading line echo "<?xml version="1.0" standalone="no"?>n"; The rest of the script is the drawing of the image. Pay attentions that the script will automically make the lowest result of the input array the 0 point of the Y scale of the graph. Every next array of the $input_array will get the next colour in the $colours array which must be predefined. So - here is an example of the script, converted to PNG by Firefox 2
The config part of the example is:
$input_array = array ( "2001" => array ( "Jan" => 100, "Feb" => 150, "Mar" => 130, "Apr" => 140, "May" => 150, "Jun" => 165, "Jul" => 180, "Aug" => 200, "Sep" => 210, "Oct" => 200, "Nov" => 170, "Dec" => 180 ), "2002" => array ( "Jan" => 160, "Feb" => 170, "Mar" => 175, "Apr" => 175, "May" => 165, "Jun" => 155, "Jul" => 165, "Aug" => 190, "Sep" => 200, "Oct" => 210, "Nov" => 220, "Dec" => 200 ), ); $image_width = 340; $image_height = 240; $frame_left=30; $frame_bottom=20;
This simple example shows how powerful the SVG are. Hope in near future this format will become wider used, so image generation will be a piece of cake.