NAME
SVG::Template::Graph - Perl extension for generating template-driven graphs with SVG
SYNOPSIS
use SVG::Template::Graph;
$data = [
{
barGraph=>1,#<barGraph|[lineGraph]>
barSpace=>20,
'title'=> '1: Trace 1',
'data' => #hash ref containing x-val and y-val array refs
{
'x_val' =>
[50,100,150,200,250,
300,350,400,450,500,550],
'y_val' =>
[100,150,100,126,100,
175,100,150,120,125,100],
},
'format' =>
{ #note that these values could change for *each* trace
'lineGraph' => 1,
'x_min' => 0,
'x_max' => 600,
'y_min' => 50,
'y_max' => 200,
'x_axis' => 1, #draw x-axis
'y_axis' => 1, #draw y-axis
#define the labels that provide the data context.
'labels' =>
{
#for year labels, we have to center the axis markers
'x_ticks' =>
{
'label' =>[2002,2003,2004],
'position'=>[100,300,500],
},
'y_ticks' =>
{
#tick mark labels
'label' => [ -250, 0, 250, 500],
#tick mark location in the data space
'position' => [50, 100, 150, 200],
},
},
},
},
];
#construct a new SVG::Template::Graph object with a file handle
my $tt = SVG::Template::Graph->new($file);
#set up the titles for the graph
$tt->setGraphTitle(['Hello svg graphing world','I am a subtitle']);
#generate the traces.
$tt->drawTraces($data,$anchor_rectangle_id);
#serialize and print
print $tt->burn();
DESCRIPTION
Template::Graph:SVG is a module for the generation of template-driven graphs using Scalable Vector Graphics (SVG). Using this module, it is possible to define a template SVG document with containers which are populated with correctly scaled plot images.
EXPORT
None by default.
EXAMPLES
Refer to the examples directory inside this distribution for working examples.
setGraphTitle
my $svg_element_ref = $tt->setGraphTitle ($string|\@strings, %attributes)
Generate the text for the Graph Title Returns the reference to the text element
setTraceTitle
set the title of a trace
$tt->setTraceTitle( $string|\@strings, %attributes )
setXAxisTitle
Generate the text for the Graph X-Axis Titles Returns the reference to the text element
$tt->setXAxisTitle($axis_number, $string, %attributes)
$tt->setXAxisTitle($axis_number, \@strings, %attributes)
setYAxisTitle
Generate the text for the Graph Y-Axis Titles Returns the reference to the text element
$tt->setYAxisTitle($axis_number, $string,%attributes)
$tt->setYAxisTitle($axis_number, \@strings,%attributes)
_gg
Check that a group exists (is a valid, defined group in the SVG DOM) and create a group in the document if id does not exist. Return the group element This ensures that even if a designer failed to generate a group ID in the drawing, you will get a drawing with the right group names. If type is defined, an element of $type with %attributes is defined.
my $svg_element = $tt->_gg ($id)
my $svg_element = $tt->_gg ($id,'rect',width=>10,height=>10,
x=>10,y=>10,fill=>'none',stroke=>'red')
_setAxisText
Internal method called by setGraphTitle and setAxisTitle to do the actual work. Not really intended to be accessed from the outside but available for advanced users.
$tt->_setAxisText ($id,$text|\@text,%attributes)
struct $struct
the input structure required by sub drawTraces to generate the graph. Refer to the examples included in this distribution in the examples directory for working samples.
$struct = [{
'tracetype' => 'linegraph',
'title'=> '1: Trace 1',
'data' => #hash ref containing x-val and y-val array refs
{
'x_val' =>
[0, 2, 4,
6, 8, 10,
12,14,16,
18,20],
'y_val' =>
[4, 2, 5,
3, 7, 4 ,
9, 9, 2,
4, 3],
},
'format' =>
{
'x_max' => 600, #or for your case, the date value of the 1st point
'x_min' => 0, #or for your case, the date value of the last point
'y_max' => 0.35,
'y_min' => -0.1,
'x_title' => 'Calendar Year',
'y_title' => '% Annual Performance',
'x_axis' => 0, # do not automatically draw an x-axis
'y_axis' => 1, #automatically draw a y-axis
#define the labels that provide
#the data context.
'labels' =>
{
#for year labels, we have to center the axis markers
'x_ticks' =>
{
'label' =>[2002,2003,2004],
'position' =>[100,300,500],
},
y_ticks =>
{
#tick mark label
'label' => [ '-10.00%', '-5.00%', '0.00%',
'5.00%', '10.00%', '15.00%',
'20.00%', '25.00%', '30.00%',
'35.00%' ],
#tick mark location in the data space
'position' => [-0.10,-0.5,0,
-.5,.10,.15,
.20,.25,.30,
.35],
},
},
},
legend_title => 'Some Interesting Data',
},
];
getCanvasBoxBoundaries()
if $id_anchor_data is an array reference, then it uses it to describe the extents of the viewbox into which the current drawing will happen. If $id_anchor_data is a string then its associated xml element is assumed to be a rectangle and getCanvasBoxBoundaries uses the rectangle geometry.to define the plot bounding box. hash references are not supported.
Action: set the boundary box data in the object and returns the array reference:
[xmin, ymin, xmax, ymax]
getDataBoxBoundaries (\%struct)
returns the value of the boundary box of the data set which places the graph in the image as an array reference:
[xmin, ymin, xmax, ymax]
drawAxis(<target_group_id>,[x|y|undef]))
draw one or both of axes (zero-value line) of the drawing data space. Draws both axes unless one of the axes is passed as a string.
drawAxis('somegroupid','x') draws the x-axis line into group 'somegroupid'.
drawAxis('somegroupid','y') draws the y-axis line indo group 'somegroupid'
drawAxis('somegroupid') draws both x- and y- axis lines into group 'somegroupid'
construction detail: draws the content into a group.
drawTraces ($data_structure,$insertion_anchor_id)
given a structure describing the incoming drawing parameters, generates the SVG lines, axes, and ticks and returns the number of traces that were handled. If $anchor_id is defined and is a rectangle ID, then the drawing will take place in id.if $anchor_point is defined and it is an array of 4 real numbers, then this will be taken to be the location where the insertion box goes.
The format for the array is: [x0 y0 x1 y1]. in canvas dimension
getTracePointMap $index, polyline|[path]|polygon, $p, $anchor_data, %args
scales the points for lines appropriately and generates the correct polyline or path or polygon element, scaled and inverted to match paper space.
if $anchor_data is defined, then it is either the id of a rectangle whose geometry will contain the results, or it is an array reference which contains the viewbox defilition [x0,y0,x1,y1] where the graph is to be placed.
this is the method in which the generation of the graph is handled
returns the reference of the polyline/path/polygon tag that was generated.
lineGraph index, type, [\@x,\@y], $canvas, %styling_attributes
draw a line graph trace
sub barGraph $index, [\@x,\@y], \@canvas, $barSpace, %styling_attributes
draw a bar graph trace
drawGridLines ($target_svg_element_ref,$transformation_ref,$format_structure_ref)
draw the gridlines for a graph as defined in the formatting data structure for each trace.
handleFurnishings $orientation, $format, \%anchor_refs
single point for handling grid lines, gridline lables, and gridline tickmarks this method is a factory method for generating vertical or horizontal furnishings for the trace the anchor hash reference contains the following keys:
line
label
tick
parameters
gridline orientation
$orientation = 'x' or 'y'
Gridline context-format hash reference
$format - hash reference
defines what is shown and what is not.
whose values are svg element object references where the respective entities are to be appended as children.
drawTick ['x'|'y'], index,
tickmark-generation handler
getTick($label_ref $oation)
return the front and back extensions to lines based on the definition (or lack of) tickmarks in the label construct
Example of a label definition:
$label = {
'y_ticks' => {
'style' => {
'right' => '10'
},
'position' => [
'150',
'100',
'0',
'-75'
],
'label' => [
'Much',
'Some',
'None',
'Lost'
]
},
'x_ticks' => {}
};
D
$self->D()
returns the SVG Document object
T($name)
$self->T($name)
returns the currently invoked transformation object. Returns transformation object $name if requested by name
setGraphTarget $targetid, $elementType <rect>, %element_attributes
define the graph target (currently only rectangles are accepted) on top of which the data will be drawn
getGraphTarget
returns the current graph target
autoGrid (int $min, int $max, int $count)
generates a reference to an array of $count+1 evenly distributed values ranging between $min and $max
$tt->autoGrid(0,100,10);
Format
format an array of values according to formatting rules
$tt->Format \@array,$format,$format_attribute[,@more_format_attributes]
$format can be 'time' or 'printf'
for 'time', uses the Time::localtime
example 1: formatting to print the verbose date
$a = [
'0',
'2.75',
'5.5',
'8.25',
'11'
];
my $b = $tt->Format($a,'time',"%a %b %e %H:%M:%S %Y");
returns
$b = [
'Thu Jan 1 01:00:00 1970',
'Thu Jan 1 01:00:02 1970',
'Thu Jan 1 01:00:05 1970',
'Thu Jan 1 01:00:08 1970',
'Thu Jan 1 01:00:11 1970'
];
Format uses POSIX function b<strftime> Refer to POSIX for more information on time formating.
example 2: formatting to print to three decimal places using sprintf
$tt->Format([1.123,2.1234,3.12345,4.123456],'sprintf','%.3f');
example 3: formatting to print a percent sign
$tt->Format([1.123,2.1234,3.12345,4.123456],'sprintf','%%');
mapTemplateId string $id
setTemplateIdMap hash template_pairs
assign the definitions between the internal keys and the ids in the template at hand. This method need not be called as all IDs automatically get run through if the default IDs specified below are used.
simpleGraph string $id, string $type, hash %attrs
TEMPLATE
To draw a graph, a template is required which contains two key datasets: a rectangle which will contain the inserted graph data and a group containing child group elements with the IDs expected by SVG::Template::Graph
REQUIRED RECT ELEMENT
REQUIRED GRAPH TRACE HANDLER
The svg snippet below provides the required groups for the generation of the first trace (trace intex 0)
Because SVG uses the Painter's model, the image rendering order follows the XML document order. For the snippet below, the rendering order is the following:
data,grid,ticks,
axes:x,y,
axes values:
x,y,
axes text:
x,y,
axes titles:
x,y
Trace generation snippet
<!-- trace insertion takes place here -->
<g id="group.trace.1" fill="none"
stroke="black" stroke-width="2">
<!-- draw the data below the gridlines -->
<g id="group.trace.data.1"
stroke="#333333" stroke-width="0.5"
fill="#411DA4"/>
<g id="group.trace.grid.1"
stroke="gray" stroke-width="1"/>
<g id="group.trace.tick.1"
stroke="black" stroke-width="1.5"/>
<g id="group.trace.axes.1"
stroke="none" fill="black">
<g id="group.trace.axes.x.1" stroke="gray"
fill="none" stroke-width="1"/>
<g id="group.trace.axes.y.1" stroke="gray"
fill="none" stroke-width="1"/>
<g id="group.trace.axes.values.x.1" text-anchor="middle"
stroke="none" fill="black" transform="translate(0,265)"/>
<g id="group.trace.axes.values.y.1" stroke="none"
fill="black" text-anchor="start" transform="translate(-40,0)"/>
<g id="group.trace.axes.title.x.1" text-anchor="middle"
transform="translate(365,370)" font-size="12"
fill="#411DA4" font-weight="Bold"/>
<g id="group.trace.axes.title.y.1.c" text-anchor="end"
transform="translate(40,200)">
<g id="group.trace.axes.title.y.1"
transform="rotate(-90)" font-weight="Bold"
font-size="12" fill="#411DA4"/>
</g>
</g>
</g>
<!-- end of trace insertion 1 -->
In order to show the trace in front of the gridlines, the above snippet changes to:
<!-- trace insertion takes place here -->
<g id="group.trace.1" fill="none"
stroke="black" stroke-width="2">
<g id="group.trace.grid.1"
stroke="gray" stroke-width="1"/>
<g id="group.trace.tick.1"
stroke="black" stroke-width="1.5"/>
<g id="group.trace.axes.1"
stroke="none" fill="black">
<g id="group.trace.axes.x.1" stroke="gray"
fill="none" stroke-width="1"/>
<g id="group.trace.axes.y.1" stroke="gray"
fill="none" stroke-width="1"/>
<g id="group.trace.axes.values.x.1" text-anchor="middle"
stroke="none" fill="black" transform="translate(0,265)"/>
<g id="group.trace.axes.values.y.1" stroke="none"
fill="black" text-anchor="start" transform="translate(-40,0)"/>
<g id="group.trace.axes.title.x.1" text-anchor="middle"
transform="translate(365,370)" font-size="12"
fill="#411DA4" font-weight="Bold"/>
<g id="group.trace.axes.title.y.1.c" text-anchor="end"
transform="translate(40,200)">
<g id="group.trace.axes.title.y.1"
transform="rotate(-90)" font-weight="Bold"
font-size="12" fill="#411DA4"/>
</g>
</g>
<!-- draw the data on top of the gridlines -->
<g id="group.trace.data.1" stroke="#333333" stroke-width="0.5" fill="#411DA4"/>
</g>
<!-- end of trace insertion 1 -->
EXAMPLES
Refer to the examples directory inside this distribution for working examples.
SEE ALSO
SVG::Parser SVG::Manual Expat SAX SVG::TT:Graph Tramsform::Canvas http://www.roitsystems.com http://www.roitsystems.com
AUTHOR
Ronan Oger, <ronan.oger@roitsystems.com<gt> http://www.roitsystems.com http://www.roitsystems.com
CREDITS
This library was developed and written by Ronan Oger, ROIT Systems Gmbh, under contract to Digital Craftsmen.
COPYRIGHT
Copyright (C) 2004 by Ronan Oger, ROIT Systems GmbH, Zurich, Switzerland
Copyright (C) 2004 by Digital Craftsmen Ltd, London, UK
LICENSE
This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself, either Perl version 5.8.3 or, at your option, any later version of Perl 5 you may have available.