SVG for statistics
Thursday, 12. March 2009, 10:59:32
A customer needed some special statistics, so I had to write a small statistics tool. At first I wanted to visualize it using common graphics like GIF, but I decided to use vector graphics using the SVG format instead. The biggest advantage is, that the customer can reuse the graphics in his DTP and graphic software packages without any quality loss, no matter how big or small the final result will be. He could create posters out of it and it would still look sharp.I ended up in creating a just 3 classes (one for database access, one for database queries and one for doing the math and redering). To create a SVG I just need some few lines now:
<?php
require "statquery.class.php";
require "statbar.class.php";
$statquery = new Statquery();
$statquery->createStat("lastWeekImages");
$weekStats = $statquery->get();
$statbar = new Statbar();
$statbar->createStatBars($weekStats, "vertical", 200);
// write header and graphics
header("Content-Type: image/svg+xml");
echo $statbar->get();
?>
This creates the following source code automatically (which gets displayed as the image you see above):
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1"
baseProfile="full"
width="400" height="300">
<defs>
<linearGradient id="greyHGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="5%" stop-color="#AAA" />
<stop offset="95%" stop-color="#666" />
</linearGradient>
<linearGradient id="redHGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="5%" stop-color="#F88" />
<stop offset="95%" stop-color="#A00" />
</linearGradient>
</defs>
<g id="rechteck_0" transform="translate(0,24.200396263798)">
<rect width="25" height="175.7996037362" fill="url(#greyHGradient)" />
<g transform="translate(20,175.7996037362) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">6211</text>
</g>
<text y="189.7996037362" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Mo</text>
</g>
<g id="rechteck_1" transform="translate(30,53.127653552222)">
<rect width="25" height="146.87234644778" fill="url(#greyHGradient)" />
<g transform="translate(20,146.87234644778) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">5189</text>
</g>
<text y="160.87234644778" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Di</text>
</g>
<g id="rechteck_2" transform="translate(60,51.3444664591)">
<rect width="25" height="148.6555335409" fill="url(#greyHGradient)" />
<g transform="translate(20,148.6555335409) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">5252</text>
</g>
<text y="162.6555335409" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Mi</text>
</g>
<g id="rechteck_3" transform="translate(90,0)">
<rect width="25" height="200" fill="url(#greyHGradient)" />
<g transform="translate(20,200) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">7066</text>
</g>
<text y="214" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Do</text>
</g>
<g id="rechteck_4" transform="translate(120,15.058024341919)">
<rect width="25" height="184.94197565808" fill="url(#greyHGradient)" />
<g transform="translate(20,184.94197565808) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">6534</text>
</g>
<text y="198.94197565808" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Fr</text>
</g>
<g id="rechteck_5" transform="translate(150,65.10048117747)">
<rect width="25" height="134.89951882253" fill="url(#redHGradient)" />
<g transform="translate(20,134.89951882253) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">4766</text>
</g>
<text y="148.89951882253" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">Sa</text>
</g>
<g id="rechteck_6" transform="translate(180,0.19813189923579)">
<rect width="25" height="199.80186810076" fill="url(#redHGradient)" />
<g transform="translate(20,199.80186810076) rotate(-90)">
<text font-size="20px" font-family="Arial,Helvetica sans-serif" fill="white" stroke="black" stroke-width="0.2">7059</text>
</g>
<text y="213.80186810076" font-size="14px" font-family="Arial,Helvetica sans-serif" fill="black">So</text>
</g>
</svg>
But this is still very boring. I want to do some more funny stuff with SVG...
the possibilities are really cool:
(16%)
WIDGETIZE
How to use Quote function: