Download - Professional reports with SVG
![Page 1: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/1.jpg)
Professional reportswith SVG
Stefan NeufeindSpeedPartner GmbH
![Page 2: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/2.jpg)
2
About me Stefan Neufeind From Neuss (near Düsseldorf, Germany)
Working for SpeedPartner GmbH(consulting, development, administration)
PEAR-developer Loves PHP / FOSS :-)
![Page 3: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/3.jpg)
3
Agenda About SVG Support for SVG SVG and PHP
PEAR::XML_SVG PEAR::Image_Canvas
Reporting with PEAR::Image_Graph SVG ready for use? Links
![Page 4: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/4.jpg)
4
About SVG Standard defined by W3C XML = eXtensible Markup Language For 2D vector-graphics Static and animated DOM (Document Object Model)
Modifyable with ECMAScript, SMIL Event-handlers, ...
Editable using a simple text-editor
![Page 5: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/5.jpg)
5
About SVGTypes of objects: Vector shapes
Lines, curves, ...
Raster images e.g. PNG used in SVG-document
Text Searchable, accessible, ...
![Page 6: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/6.jpg)
6
About SVGFeatures: Grouping, styling Transformations Clipping paths Alpha masks Filter effects Template objects Extensibility
![Page 7: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/7.jpg)
7
About SVGProfiles: SVG Tiny (SVGT)
For restricted devices like cellphones
SVG Basic (SVGB) For advances devices like PDAs
Full SVG
![Page 8: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/8.jpg)
8
About SVGNamespaces: XML-namespace for SVG
Usable together with other namespaces
Allows mixing of XHTML, SVG, MathML, XUL/XBL, ... in one document
![Page 9: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/9.jpg)
9
About SVGTimeline: SVG 1.0:
W3C Recommendation on 2001-09-04 SVG 1.1:
W3C Recommendation on 2003-01-14 SVG 1.1 Tiny / Basic:
W3C Recommendation on 2003-01-14 SVG 1.2 Mobile (Tiny) / SVG 1.2 Full:
Still drafts
![Page 10: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/10.jpg)
10
About SVGOutlook to SVG 1.2: Flowing text and graphics Xforms Multiple pages Painting/Multimedia enhancements
![Page 11: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/11.jpg)
11
About SVGCompetition to SVG: Flash (binary format)
Not open (Format spec available for export) Large market share Poor accessibility
VML (text format) Open, but Internet Explorer only
XAML (text source compiled to binary) Published, but possibly not open
![Page 12: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/12.jpg)
12
Support for SVG Content negotiation via HTTP
Deliver SVG or convert on server
Rasterization on server (for older browser) ImageMagick (quick but incomplete) Batik (complete but slow [Java])
Standalone viewer / browser-plugin
![Page 13: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/13.jpg)
13
Support for SVGStandalone viewers / browser-plugins: Adobe SVG Viewer
Free, MacOS/Windows Linux/Solaris Corel SVG viewer
Free, Windows, no longer supported Apache Squiggle (part of Batik toolkit)
Free, Java → Slow ...
![Page 14: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/14.jpg)
14
Support for SVGNative support: Opera browser
SVG 1.1 Tiny since 8.0 beta 3 Mozilla
Firefox since 1.5 beta 1 (not on Linux yet) Mozilla SeaMonkey suite
KDE Plugin for Konqueror (KSVG) Since 3.4 support for SVG wallpapers :-)
![Page 15: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/15.jpg)
15
Support for SVGNative support (continued): Apple Safari
Porting of KSVG2 into WebCore in progress Amaya (W3C webbrowser/editor)
Partial SVG support Apache Batik SVG toolkit
For Java programs
![Page 16: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/16.jpg)
16
Support for SVGMozilla support: included in latest builds native SVG-support:
handles compound documents mixed of SVG, MathML, XHTML, XUL (through namespaces)
supports SVG dom allows using SVG in XBL (XUL binding
language) etc.
![Page 17: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/17.jpg)
17
Support for SVGMozilla support (continued): currently supports basic shapes:
beziers stroking and filling with opacity gradients scripting events most of the DOM
![Page 18: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/18.jpg)
18
Support for SVGMozilla support (continued): target:
full SVG 1.1 support specification-conform
big areas lacking features: filters svg defined fonts declarative animations
![Page 19: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/19.jpg)
19
SVG and PHPPEAR-packages: XML_image2svg
Converts JPEG, GIF of PNG to base64-representation inside SVG-container
Not really helpful? Old, seems unmaintained
XML_svg2image Converts svg to JPEG or PNG Requires apache-batik via php-ext/java
![Page 20: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/20.jpg)
20
SVG and PHPPEAR-packages (continued): XML_SVG
Object-oriented API to build SVG documents Based on SVG-library from Horde Low level abstraction “wrapper“ for SVG
Image_Canvas High level of abstraction Interface to GD, SVG, PDF, ImageMap
(planned: Flash using MING / libSWF,PDF using File_PDF / cPdfWriter, ...)
![Page 21: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/21.jpg)
21
SVG and PHPPEAR::XML_SVG – source:<?phprequire_once('XML/SVG.php');$svg = &new XML_SVG_Document( array('width' => 400, 'height' => 200));$g = &new XML_SVG_Group( array('style' => 'stroke:black', 'transform' => 'translate(200 100)'));$g->addParent($svg);// or: $svg->addChild($g);
![Page 22: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/22.jpg)
22
SVG and PHPPEAR::XML_SVG – source (continued):$circle = &new XML_SVG_Circle( array('cx' => 0, 'cy' => 0, 'r' => 100, 'style' => 'stroke-width:3'));$circle->addChild(new XML_SVG_Animate( array('attributeName' => 'r', 'attributeType' => 'XML', 'from' => 0, 'to' => 90, 'dur' => '3s', 'fill'=> 'freeze')));
![Page 23: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/23.jpg)
23
SVG and PHPPEAR::XML_SVG – source (continued):$circle->addChild(new XML_SVG_Animate( array('attributeName' => 'fill', 'attributeType' => 'CSS', 'from' => 'yellow', 'to' => 'red', 'dur' => '3s', 'fill'=> 'freeze')));$g->addChild($circle);$text = &new XML_SVG_Text(array( 'text' => 'SVG chart!', 'x' => 0,'y' => 0, 'style'=> 'font-size:20;text-anchor:middle;'));
![Page 24: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/24.jpg)
24
SVG and PHPPEAR::XML_SVG – source (continued):$text->addChild(new XML_SVG_Animate( array('attributeName' => 'font-size', 'attributeType' => 'auto', 'from' => 50, 'to' => 30, 'dur' => '3s', 'fill'=> 'freeze')));$g->addChild($text);$svg->printElement();?>
![Page 25: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/25.jpg)
25
SVG and PHPPEAR::XML_SVG – SVG:<g style="stroke:black" transform="translate(200 100)"> <circle cx="0" cy="0" r="100" style="stroke-width:3"> <animate attributeName="r" attributeType="XML" from="0" to="90" dur="3s" fill="freeze" /> <animate attributeName="fill" attributeType="CSS" from="yellow" to="red" dur="3s" fill="freeze" /> </circle>
![Page 26: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/26.jpg)
26
SVG and PHPPEAR::XML_SVG – SVG (continued): <text x="0" y="0" style="font-size:20; text-anchor:middle;">SVG chart! <animate attributeName="font-size" attributeType="auto" from="50" to="30" dur="3s" fill="freeze" /> </text></g>
![Page 27: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/27.jpg)
27
SVG and PHPPEAR::XML_SVG – animated image:
transition
![Page 28: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/28.jpg)
28
SVG and PHPPEAR::Image_Canvas – source:<?phpinclude_once 'Image/Canvas.php';$Canvas =& Image_Canvas::factory('svg', array('width' => 400, 'height' => 300));$Canvas->setLineColor('black');$Canvas->rectangle(array('x0' => 0, 'y0' => 0, 'x1' => 399, 'y1' => 299));
![Page 29: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/29.jpg)
29
SVG and PHPPEAR::Image_Canvas – source (continued):$Canvas->setGradientFill( array('direction' => 'horizontal', 'start' => 'red', 'end' => 'blue'));$Canvas->setLineColor('black');$Canvas->ellipse(array('x' => 199, 'y' => 149, 'rx' => 50, 'ry' => 50));$Canvas->setFont(array('name' => 'Arial', 'size' => 12));$Canvas->addText(array('x' => 0, 'y' => 0, 'text' => 'Demonstration of what Image_Canvas do!'));
![Page 30: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/30.jpg)
30
SVG and PHPPEAR::Image_Canvas – source (continued):// ... some more text-generation skipped ...$Canvas->addVertex( array('x' => 50, 'y' => 200));$Canvas->addVertex( array('x' => 100, 'y' => 200));$Canvas->addVertex( array('x' => 100, 'y' => 250));$Canvas->setFillColor('[email protected]');$Canvas->polygon(array('connect' => true));
![Page 31: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/31.jpg)
31
SVG and PHPPEAR::Image_Canvas – source (continued):$Canvas->image(array('x' => 398, 'y' => 298, 'filename' => './pear-icon.png', 'alignment' => array( 'horizontal' => 'right', 'vertical' => 'bottom')));$Canvas->show();?>
![Page 32: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/32.jpg)
32
SVG and PHPPEAR::Image_Canvas – SVG:<defs> <linearGradient id="gradient_1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,0,0);"/> <stop offset="100%" style="stop-color:rgb(0,0,255);"/> </linearGradient></defs><rect x="0" y="0" width="399" height="299" style="stroke-width:1;stroke:rgb(0,0,0); fill:none;"/>
![Page 33: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/33.jpg)
33
SVG and PHPPEAR::Image_Canvas – SVG (continued):<ellipse cx="199" cy="149" rx="50" ry="50" style="stroke-width:1;stroke:rgb(0,0,0); fill:url(#gradient_1);"/><text x="0" y="12" style="font-family:Arial;font-size:12px;fill=rgb(0,0,0);">Demonstration of what Image_Canvas do!</text>...<image xlink:href="data:image/png;base64,iVBORw0..." x="398" y="298" width="32" height="32" preserveAspectRatio="none"/>
![Page 34: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/34.jpg)
34
SVG and PHPPEAR::Image_Canvas – image:
![Page 35: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/35.jpg)
35
PEAR::Image_Graph Drawing graphs in various ways Object-oriented, flexible, extendable Since v0.5. uses PEAR::Image_Canvas
as „driver model“ for output GD (PNG, JPEG, GIF, WBMP) Scalable Vector Graphics (SVG) PDF (using PDFLib)
Optional: Data-preprocessors packages 'Numbers_Words' and 'Numbers_Roman'
![Page 36: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/36.jpg)
36
PEAR::Image_Graph Use factory-methods
Not required – but allows “lazy includes“require_once 'Image/Graph.php';require_once 'Image/Canvas.php';$Canvas =& Image_Canvas::factory('svg', array('width' => 600, 'height' => 400)); $Graph =& Image_Graph::factory('graph', $Canvas);// instead of$Graph =& new Image_Graph($Canvas);// ...
![Page 37: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/37.jpg)
37
PEAR::Image_Graph Mind the ampersand (call by reference)
Otherwise problems with modifying objects// ...$Plot =& $Graph->addNew ('line', &$Dataset);// without ampersand the following// would be impossible$Plot->setLineColor('red');// ...
![Page 38: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/38.jpg)
38
PEAR::Image_Graph Adding elements to parents// ...$newElement =& Image_Graph::factory( 'some_element', array($param1, $param2, &$param3) );$parentElement->add($newElement);// better instead do:$parentElement->addNew('some_element', array($param1, $param2, &$param3));// ...
![Page 39: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/39.jpg)
39
PEAR::Image_GraphComponents of a graph: graph plotarea (to create the plots on) plot dataset (data to plot) additional elements (e.g. legend)
![Page 40: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/40.jpg)
40
PEAR::Image_GraphSimple example:
![Page 41: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/41.jpg)
41
PEAR::Image_GraphSimple example:require_once 'Image/Graph.php'; require_once 'Image/Canvas.php';$Canvas =& Image_Canvas::factory('svg', array('width' => 600, 'height' => 400)); $Graph =& Image_Graph::factory('graph', $Canvas);$Plotarea =& $Graph->addNew('plotarea');$Dataset =& Image_Graph::factory('dataset');$Dataset->addPoint('Denmark', 10);$Dataset->addPoint('Norway', 3);$Dataset->addPoint('Sweden', 8);$Dataset->addPoint('Finland', 5);$Plot =& $Plotarea->addNew('bar',&$Dataset);$Graph->done();
![Page 42: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/42.jpg)
42
PEAR::Image_GraphPlotarea: Holds axis-layout Container for plots Standard-behaviour:
X-axis textual ('Denmark','Sweden', ...) Y-axis linear
Types: 'axis' (linear), 'axis_log' (logarithmic), 'Image_Graph_Axis_Category' (textual)
![Page 43: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/43.jpg)
43
PEAR::Image_GraphGraph types: 'line', 'area', 'bar', 'smooth_line',
'smooth_area', 'pie', 'step', 'impulse', 'dot' or 'scatter', 'radar', Image_Graph_Plot_CandleStick, Image_Graph_Plot_Band
Special modes: 'normal', 'stacked', 'stacked100pct'
![Page 44: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/44.jpg)
44
1. Adding a plotarea:
2. Adding a bar-plot:
PEAR::Image_Graph
$Plotarea =& $Graph->addNew('plotarea', array('axis', 'axis_log'));
// ...$Plot =& $Plotarea->addNew('bar', $Dataset);// ...
![Page 45: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/45.jpg)
45
Plottype-examples:
PEAR::Image_Graph
![Page 46: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/46.jpg)
46
Data for plots: Directly giving points
Function callback
PEAR::Image_Graph
$Dataset =& Image_Graph::factory('dataset');$Dataset->addPoint('Denmark', 10);$Dataset->addPoint('Norway', 3);
function foo($bar) { return 2 * $bar + 10;}// 100 values between -3 and 10$Dataset =& Image_Graph::factory ('function', array(-3, 10, 'foo', 100));
![Page 47: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/47.jpg)
47
Using colors: Color names (e.g. 'green') or RGB
('#00ff00', '75%,20%,19%', array(0, 255, 0) Optionally opacity ('[email protected]',
'#[email protected]', array(0, 255, 0, 0.2))
PEAR::Image_Graph
$element->setLineColor('red');$element->setFillColor('#[email protected]');$element->setBackgroundColor('[email protected]');$element->setBorderColor(array(0, 0, 0));
![Page 48: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/48.jpg)
48
Fillstyles: Simple fill Gradient fill
Vertical, horizontal, diagonally, radial
Image
PEAR::Image_Graph
$fill =& Image_Graph::factory('gradient', array(IMAGE_GRAPH_VERTICAL, 'white','red'));$element->setFillStyle($fill);
$fill =& Image_Graph::factory( 'Image_Graph_Fill_Image', './image.png');$element->setFillStyle($fill);
![Page 49: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/49.jpg)
49
Layouts: Horizontal, vertical, ...
PEAR::Image_Graph
// split 40% from left; A and B are plotareas$Graph->add(Image_Graph::horizontal( $A, $B, 40) );// directly create plotareas as well$Graph->add(Image_Graph::vertical( $part1 = Image_Graph::factory('plotarea'), $part3 = Image_Graph::factory('plotarea'), 40 ) );
![Page 50: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/50.jpg)
50
Layouts: ... and matrix
PEAR::Image_Graph
$Matrix =& $Graph->addNew ('Image_Graph_Layout_Matrix', array(2, 2));$part1 =& $Matrix->getEntry(0, 0);$part2 =& $Matrix->getEntry(0, 1);$part3 =& $Matrix->getEntry(1, 0);$part4 =& $Matrix->getEntry(1, 1);
![Page 51: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/51.jpg)
51
More complex example: TrueType-font, title, plotarea, legend Vertical layout Gradient fill Two y-axes Axes-titles
PEAR::Image_Graph
![Page 52: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/52.jpg)
52
More complex example (continued):
PEAR::Image_Graph
require_once 'Image/Graph.php';require_once 'Image/Canvas.php';$Canvas =& Image_Canvas::factory('svg', array('width' => 600, 'height' => 400)); $Graph =& Image_Graph::factory('graph', $Canvas);$Font =& $Graph->addNew('ttf_font', 'Gothic');$Font->setSize(8);$Graph->setFont($Font);
![Page 53: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/53.jpg)
53
More complex example (continued):
PEAR::Image_Graph
$Graph->add(Image_Graph::vertical( Image_Graph::factory('title', array('Primary & Secondary Axis', 11)), Image_Graph::vertical( $Plotarea = Image_Graph::factory('plotarea'), $Legend =Image_Graph::factory('legend'),90),5));$Legend->setPlotarea($Plotarea); $GridY2 =& $Plotarea->addNew('bar_grid', IMAGE_GRAPH_AXIS_Y_SECONDARY);$GridY2->setFillStyle(Image_Graph::factory( 'gradient', array(IMAGE_GRAPH_GRAD_VERTICAL, 'white', 'lightgrey') ) );
![Page 54: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/54.jpg)
54
More complex example (continued):
PEAR::Image_Graph
$Dataset1 =& Image_Graph::factory('random', array(8, 10, 100, true));$Plot1 =& $Plotarea->addNew('line', &$Dataset1);$Plot1->setLineColor('red');$Dataset2 =& Image_Graph::factory('random', array(8, 1, 10, true));$Plot2 =& $Plotarea->addNew ('Image_Graph_Plot_Area', $Dataset2, IMAGE_GRAPH_AXIS_Y_SECONDARY);$Plot2->setLineColor('gray');$Plot2->setFillColor('[email protected]');$Plot1->setTitle('Primary Axis');$Plot2->setTitle('Secondary Axis');
![Page 55: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/55.jpg)
55
More complex example (continued):
PEAR::Image_Graph
$AxisX =& $Plotarea->getAxis(IMAGE_GRAPH_AXIS_X);$AxisX->setTitle('Oranges');$AxisY =& $Plotarea->getAxis(IMAGE_GRAPH_AXIS_Y);$AxisY->setTitle('Apples', 'vertical');$AxisYsecondary =& $Plotarea->getAxis( IMAGE_GRAPH_AXIS_Y_SECONDARY);$AxisYsecondary->setTitle('Pears', 'vertical2'); // output the Graph$Graph->done();
![Page 56: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/56.jpg)
56
Data preprocessors: Adjustment / translation of data (e.g. Axis labels)
PEAR::Image_Graph
$AxisX =& $Plotarea->getAxis(IMAGE_GRAPH_AXIS_X);$AxisX->setDataPreprocessor(Image_Graph::factory ('Image_Graph_DataPreprocessor_Array', array(array(1 => '30 Jul', 2 => '31 Jul', 3 => '1 Aug', 4 => '2 Aug'))));$AxisY =& $Plotarea->getAxis(IMAGE_GRAPH_AXIS_Y);$AxisY->setDataPreprocessor(Image_Graph::factory ('Image_Graph_DataPreprocessor_Formatted', '+ %0.1f%%'));
![Page 57: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/57.jpg)
57
Another impression:
PEAR::Image_Graph
![Page 58: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/58.jpg)
58
Flexible graph-creation Multiple outputs, including SVG
However please note: Image_Graph still a moving target SVG-support might still need work Looking forward to your feedback!
PEAR::Image_Graph
![Page 59: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/59.jpg)
59
Yes ... Future for small, but high quality image
Zoomable, accessible, ... Text-based transformations of data Tools in place for using SVG (editors, ...) Ready for use in clear enviroments
(browser / plugins installed) Migration possible
(server-based rasterisation, ...)
SVG ready for use?
![Page 60: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/60.jpg)
60
But ... Advanced features still not
supported everywhere giving same result everywhere
Some “mainstream” tools lacking support especially OpenOffice.org
(but under discussion)
SVG ready for use?
![Page 61: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/61.jpg)
61
Your impression?
SVG ready for use?
![Page 62: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/62.jpg)
62
Links W3C Spec:
http://www.w3.org/TR/SVG11/ W3C about accessiblity:
http://www.w3.org/TR/SVG11/access.html Viewers:
http://www.w3.org/Graphics/SVG/SVG-Implementations Adobe Indepth FAQ:
http://www.adobe.com/svg/indepth/faq.html SVG Foundation:
http://www.svgfoundation.org/ http://www.zvon.org/xxl/svgReference/Output/index.html
http://www.zvon.org/xxl/SVGReferenceSVG/Output/intro.svg
![Page 63: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/63.jpg)
63
Links Adobe SVG Viewer (Windows, MacOS, Linux, Solaris)
http://www.adobe.com/svg/viewer/install/ Corel SVG viewer (Windows)
No longer supported!http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1047022177437
Apache Squiggle (part of Batik toolkit)http://xml.apache.org/batik/svgviewer.htmlJava Webstart for Batik-demo:http://nagoya.apache.org/batik_1.1/batikNagoya.jnlp
Mozilla SVGhttp://www.mozilla.org/projects/svg/
Amaya (W3C's editor/browser)http://www.w3.org/Amaya/
![Page 64: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/64.jpg)
64
Links Free editors:
Skencil (Linux)http://www.nongnu.org/skencil/
Inkscape (Windows, MacOS, Linux)http://www.inkscape.org/
Content: Samples:
http://www.croczilla.com/svg/samples/ Cliparts:
http://www.openclipart.org/
![Page 65: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/65.jpg)
65
Links PHP:
PEAR-packageshttp://pear.php.net/Image_GIS, Image_Graph,XML_SVG, Image_Canvas,XML_image2svg, XML_svg2image
Lots of Image_Graph examples (visual and code):http://pear.veggerby.dk
SVG class from PHP Classes http://www.phpclasses.org/browse/package/457.html
![Page 66: Professional reports with SVG](https://reader034.vdocument.in/reader034/viewer/2022042521/55758030d8b42adb7e8b50ae/html5/thumbnails/66.jpg)
66
Thank you!
Up-to-date slides available at:http://talks.speedpartner.de/
Questions?neufeind (at) speedpartner.de