Name
mod_graph – The Hughes Technologies Graphing module (HTG) for Lite / W3-mSQL
Synopsis
modload "mod_graph";
Description
The graphing module provides a high-level interface to image generation routines. The interface provides a simplified interface for the generation of graphs. The resulting GIF images can be output to file or sent as output for inclusion in web pages.
Details
mod_graph extends Lite by adding a set of functions for use in the creation of graphically presented graphs. The graphs may display data sets in any combination of lines, bars, or "flat tops". Many aspects of the appearance of the graph, including colours, borders, fonts etc, can be adjusted by the programmer. All colour definitions used in conjunction with this module must be specified using a 3 integer tuple corresponding to the RGB value of the colour. The available functions are
htgCreateGraph( ) - create a new graph object
int htgCreateGraph(int width, int height, int bgRed, int bgGreen, int bgBlue, int fgRed, int fgGreen, int fgBlue, int borderType, int borderWidth, int precisionWidth, int signFlag);
A new graph is created using the htgCreateGraph() function. The resultant integer value is used as a handle to further identify the graph in subsequent calls to the module functions. When the graph is created, attributes of the graph's canvas must be specified. These include the width and height of the canvas, the background and foreground colors to be used on the canvas (for text etc. not the plotted data), the type and width (in pixels) of border to be drawn around the edge of the canvas, the desired numerical precision (see note below about data precision), and whether the data is to be interpreted as signed or unsigned.
The border type is specified using one of the 6 predefined macros listed below
HTG_BORDER_NONE |
No border is to be drawn around the canvas |
HTG_BORDER_BEVEL_IN |
A 3D looking beveled edge into the canvas |
HTG_BORDER_BEVEL_OUT |
A 3D looking beveled edge out of the canvas |
HTG_BORDER_FRAME_IN |
A standard framed edged into the canvas |
HTG_BORDER_FRAME_OUT |
A standard framed edged out of the canvas |
HTG_BORDER_BOX |
A solid band drawn in the foreground colour |
Þ It should be noted that the width and height as specified define the maximum width and height of the resultant image. Features such as the graph border, title, legend etc. do not extend the size of the image. Use of these features on the graph will reduce the size of the plot region.
htgAddLineGraph( ), htgAddBarGraph( ), htgAddFlatTopGraph( ) - Add a plotted data series to the graph
htgAddLineGraph(int $graph, char $name, array $data int $plotRed, int $plotGreen, int $plotBlue);
A data series is added to the graph using one of the three htgAdd*Graph() functions. The function used will determine the presentation of the data series when the graph is plotted. All three functions take the six parameters shown above where $graph is the graph identifier returned by htgCreateGraph(), $name is a textual descritpion of the data series (for use in the graph legend), $data is and array of values representing the data, and the RGB codes select the drawing color. The htgAddBarGraph() function takes a sixth parameter that specifies the pixel width of the bar graph. If multiple bar graphs are plotted on the same graph then the width should be decreased as the data series are added to ensure all the data is visible in the resultant graph.
The concepts of a line graph and a bar graph do not require further explanation. "Flat-top graph" however is not a common term and should be explained further. A flat-top graph is a cross between a line graph and a bar graph. The data is plotted as a line but the line does not simply "join the dots" between each value in the data series. The line is drawn at the same value for the entire width of the graph segment and changes value only on the segment border (similar to the top of a bar graph element). The result is a series of horizontal and vertical lines rather than the angular lines used in a line graph.
htgAddTicks( ) - Add ticks to a graph axis
htgAddTicks(int $graph, array $tickData, int $axis);
Ticks can be added to an axis of the graph using the htgAddTicks() function. It is normal to only add ticks to the X axis as the graph library will determine the correct location and value of ticks for the Y axis based on the data being plotted. The axis is specified using either the HTG_X_AXIS or HTG_Y_AXIS macro.
htgSetGraphRange( ) - Force a know data range on the plot region
htgSetGraphRange(int $graph, int $min, int $max);
The module will normally determine the correct data range for the plot region and auto-scale the range to suit the data being plotted. However, if a specific range is desired (such as 0 to 100 if plotting a percentage) the auto-scaling can be overridden using the htgSetGraphRange() function. The function requires the graph identifier and the minimum and maximum values as its parameters.
htgSetGraphTitle( ) - Define a title for the graph
htgSetGraphTitle(int $graph, char $title, int $borderType, int $borderWidth, int $alignment, int $font);
By default, a title is not displayed on the graph. By calling the htgSetGraphTitle() function, the programmer can add a title to the graph. The title is always displayed at the top of the canvas within a boxed region. The characteristics of the boxed region may be set using the $borderType and $borderWidth parameters (see htgCreateGraph( ) above for a list of valid border types).
The text of the title will be displayed within the boxed region. The alignment of the text within the boxed region is controlled by the $alignment parameter. The valid values for this parameter are HTG_ALIGN_LEFT, HTG_ALIGN_RIGHT, and HTG_ALIGN_CENTER. The presentation of the text is controlled by the $font parameter. The valid font values are HTG_FONT_TINY, HTG_FONT_SMALL, HTG_FONT_MEDIUM_BOLD, HTG_FONT_LARGE and HTG_FONT_GIANT.
htgSetFlag( ) - Enable optional graph settings
htgSetFlag(int $graph, int $flag);
Optional features of the graph may be enabled using the htgSetFlag() function. Currently there is only one optional feature available through this function. The option allows the drawing of "dash marks" across the plot region (dashed horizontal lines). To enable dash marks, call htgSetFlag() with the $flag parameter set to HTG_DASH_MARKS.
htgCreateLegend( ) - Draw a legend on the graph.
htgCreateLegend(int $graph, int $borderType, int $borderWidth, int $font);
A legend may be added to the graph using the htgCreateLegend() function. The legend will be displayed at the bottom of the graph. It will show the data series names as specified during the htgAdd*Graph() calls, and a coloured line drawn in the plot colour of the data series. The legend is displayed in a boxed region. The border of the region may be specified using the border type and border width parameters. See htgCreateGraph() for valid values of the border type parameter.
htgPlotGraph( ) - Generate the graphical representation of the graph.
htgPlotGraph(int $graph);
The htgPlotGraph() function does not generate the graph output, it just creates the graphical representation of the graph. The resultant image is buffered within the graph object. It can be output using the htgOutputGraph() function.
htgOutputGraph( ) - Send the image contents to the specified file
htgOutputGraph(int $graph, char $fileName);
Calling this function will create the specified file and write the contents of the graph's image buffer to the file. The result will be a file containing a GIF image of the plotted graph. If the filename is specified using the HTG_STDOUT macro, the output will be sent to the standard output. This is primarily for use with dynamic image creation in web pages. htgOutputGraph() may be called multiple times with multiple destination files if needed.
htgDestroyGraph( ) - Destroy the graph object.
htgDestroyGraph(int $graph);
Calling htgDestroyGraph() will destroy the graph associated with the graph identifier supplied. All memory currently allocated to the graph will be released.
Example
#!/usr/local/Hughes/bin/lite /* ** Demo of the Hughes Tech Graph module (htg) ** ** This demo plots 3 data series against eachother on a set scale of 0 ** to 10. */ modload "mod_graph"; /* ** Create the graph canvas 500x350 pixels in size. Use a grey colour ** (rgb 210,210,210) as the background and a dark blue (rgb 50,50,100) ** as the foreground. Give the graph a nice look with a 3 pixel wide ** frame as the border of the canvas */ $graph = htgCreateGraph(500,350, 210,210,210, 50,50,100, HTG_BORDER_FRAME_IN, 3, 0,HTG_UNSIGNED); /* ** Add the data series and the X axis 'ticks' to the graph. The income ** data (series 1) is to be drawn in Green (rgb 0,170,0), the expense ** data in series 2 is shown in Red (rgb 255,0,0) and the profit is ** shown in Blue. We plot the "profit" as both a bar and a line just ** for the hell of it. */ $data1 = [ "5","8","8","6","5","4","3","4","5" ]; $data2 = [ "4","5","7","6","3","1","2","4","3" ]; $data3 = [ "1","3","1","0","2","3","1","0","2" ]; htgAddBarGraphData($graph,"Income", $data1, 0,170,0, 100); htgAddBarGraphData($graph,"Expense",$data2, 255,0,0, 70); htgAddBarGraphData($graph,"Profit",$data3, 0,0,210, 30); htgAddLineGraphData($graph,"",$data3, 0,0,210); $xTicks = [ "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep"]; htgAddTicks($graph,$xTicks, HTG_X_AXIS); /* ** Set a few options on the graph. Each of these options consumes ** canvas space but the graph will scale itself to whatever space is ** left. ** ** First, force a know scale on the Y axis. ** ** Second add a title to the graph with a framed bevel 4 pixels ** wide. The title is centered on the graph and uses the MEDIUM_BOLD ** font. ** ** Third add 'dash marks' to the graph so we can see the data values better ** ** Finally, add a legend to the graph in a 3 pixel frame using the ** SMALL font. */ htgSetGraphRange($graph,0,10); htgSetGraphTitle($graph,"XYZ Corp Financial Report", HTG_BORDER_BEVEL_IN, 4, HTG_ALIGN_CENTER, HTG_FONT_MEDIUM_BOLD); htgSetFlag($graph,HTG_DASH_MARKS); htgCreateLegend($graph,HTG_BORDER_FRAME_IN, 3, HTG_FONT_SMALL); /* ** Now we plot the data as a line graph, output it to a file and delete ** the internal representation of the graph. */ htgPlotGraph($graph); htgOutputGraph($graph,"/tmp/test.gif"); htgDestroyGraph($graph);![]()
Author
mod_graph was written by David J. Hughes (
bambi@Hughes.com.au) and is copyright © 1998 Hughes Technologies Pty Ltd, Australia. The underlying GIF creation routines are from the GD library, written by Thomas Boutell (boutell@boutell.com ) for the Quest Center at Cold Spring Harbor Labs and as such are copyright © 1994, 1995 The Quest Center At Cold Spring Harbor Labs. Our thanks to both Thomas and the Quest Center for use of their code.