svg_graph 0.7

data/images/timeseries.svg

@@ -0,0 +1,179 @@
+<?xml version='1.0'?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 640 480' height='480' width='640' xmlns='http://www.w3.org/2000/svg' xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" a3:scriptImplementation="Adobe">
+    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
+  -->
+    <!-- Created with SVG::Graph 
+  -->
+    <!-- Sean Russell 
+  -->
+    <!-- Based on SVG::TT::Graph for Perl by Leo Lapworth & Stephan Morgan 
+  -->
+    <!-- //////////////////////////////////////////////////////////////////
+  -->
+  <defs/>
+    <!--SVG Background
+  -->
+  <rect x='0' class='svgBackground' y='0' height='480' style='fill:#ffffff;' width='640'/>
+  <g transform='translate( 40.4 26 )'>
+    <rect x='0' class='graphBackground' y='0' height='394' style='fill:#f0f0f0;' width='480.6'/>
+    <path class='axis' d='M 0 0 v394' id='xAxis' style='stroke: #000000; stroke-width: 1px;'/>
+    <path class='axis' d='M 0 394 h480.6' id='yAxis' style='stroke: #000000; stroke-width: 1px;'/>
+    <text x='0.0' class='xAxisLabels' y='409' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1973</text>
+    <text x='72.9780617037263' class='xAxisLabels' y='426' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1978</text>
+    <path class='staggerGuideLine' d='M72.9780617037263 394 v17' style='fill: none; stroke: #000000; stroke-width: 0.5px;'/>
+    <path class='guideLines' d='M72.9780617037263 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='145.956123407453' class='xAxisLabels' y='409' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1983</text>
+    <path class='guideLines' d='M145.956123407453 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='218.934185111179' class='xAxisLabels' y='426' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1988</text>
+    <path class='staggerGuideLine' d='M218.934185111179 394 v17' style='fill: none; stroke: #000000; stroke-width: 0.5px;'/>
+    <path class='guideLines' d='M218.934185111179 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='291.912246814905' class='xAxisLabels' y='409' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1993</text>
+    <path class='guideLines' d='M291.912246814905 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='364.890308518632' class='xAxisLabels' y='426' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>1998</text>
+    <path class='staggerGuideLine' d='M364.890308518632 394 v17' style='fill: none; stroke: #000000; stroke-width: 0.5px;'/>
+    <path class='guideLines' d='M364.890308518632 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='437.868370222358' class='xAxisLabels' y='409' style='text-anchor: middle; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: middle'>2003</text>
+    <path class='guideLines' d='M437.868370222358 0 v394' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='398.0' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>0</text>
+    <text x='-3' class='yAxisLabels' y='356.888888888889' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>2</text>
+    <path class='guideLines' d='M0 352.888888888889 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='315.777777777778' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>4</text>
+    <path class='guideLines' d='M0 311.777777777778 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='274.666666666667' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>6</text>
+    <path class='guideLines' d='M0 270.666666666667 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='233.555555555556' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>8</text>
+    <path class='guideLines' d='M0 229.555555555556 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='192.444444444444' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>10</text>
+    <path class='guideLines' d='M0 188.444444444444 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='151.333333333333' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>12</text>
+    <path class='guideLines' d='M0 147.333333333333 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='110.222222222222' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>14</text>
+    <path class='guideLines' d='M0 106.222222222222 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='69.1111111111111' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>16</text>
+    <path class='guideLines' d='M0 65.1111111111111 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <text x='-3' class='yAxisLabels' y='28.0' style='text-anchor: end; fill: #000000; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;text-anchor: end'>18</text>
+    <path class='guideLines' d='M0 24.0 h480.6' style='stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5;'/>
+    <path class='line1' d='M14.9843030972302 250.111111111111 L14.9843030972302 250.111111111111 21.25842845231 167.888888888889 184.865238666939 352.888888888889 228.664228406859 373.444444444444 321.658821548009 126.777777777778 418.806192989469 209.0 456.6 167.888888888889 ' style='fill: none; stroke: #ff0000; stroke-width: 1px;'/>
+    <circle cy='250.111111111111' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='14.9843030972302'/>
+    <circle cy='167.888888888889' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='21.25842845231'/>
+    <circle cy='352.888888888889' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='184.865238666939'/>
+    <circle cy='373.444444444444' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='228.664228406859'/>
+    <circle cy='126.777777777778' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='321.658821548009'/>
+    <circle cy='209.0' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='418.806192989469'/>
+    <circle cy='167.888888888889' class='dataPoint1' r='2.5' style='fill: #ff0000; stroke: none; stroke-width: 1px;' cx='456.6'/>
+    <path class='line2' d='M8.47040225087341 24.0 L8.47040225087341 24.0 55.5063611230323 85.6666666666666 102.543985102769 311.777777777778 149.619906556808 106.222222222222 196.654200321388 270.666666666667 243.730121775427 147.333333333333 290.767745755164 270.666666666667 337.843667209202 44.5555555555555 384.877960973783 147.333333333333 431.913919845942 250.111111111111 ' style='fill: none; stroke: #0000ff; stroke-width: 1px;'/>
+    <circle cy='24.0' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='8.47040225087341'/>
+    <circle cy='85.6666666666666' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='55.5063611230323'/>
+    <circle cy='311.777777777778' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='102.543985102769'/>
+    <circle cy='106.222222222222' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='149.619906556808'/>
+    <circle cy='270.666666666667' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='196.654200321388'/>
+    <circle cy='147.333333333333' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='243.730121775427'/>
+    <circle cy='270.666666666667' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='290.767745755164'/>
+    <circle cy='44.5555555555555' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='337.843667209202'/>
+    <circle cy='147.333333333333' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='384.877960973783'/>
+    <circle cy='250.111111111111' class='dataPoint2' r='2.5' style='fill: #0000ff; stroke: none; stroke-width: 1px;' cx='431.913919845942'/>
+    <path class='line3' d='M72.9716745119474 291.222222222222 L72.9716745119474 291.222222222222 145.943349023895 126.777777777778 291.926660629669 188.444444444444 437.870009653564 291.222222222222 ' style='fill: none; stroke: #00ff00; stroke-width: 1px;'/>
+    <circle cy='291.222222222222' class='dataPoint3' r='2.5' style='fill: #00ff00; stroke: none; stroke-width: 1px;' cx='72.9716745119474'/>
+    <circle cy='126.777777777778' class='dataPoint3' r='2.5' style='fill: #00ff00; stroke: none; stroke-width: 1px;' cx='145.943349023895'/>
+    <circle cy='188.444444444444' class='dataPoint3' r='2.5' style='fill: #00ff00; stroke: none; stroke-width: 1px;' cx='291.926660629669'/>
+    <circle cy='291.222222222222' class='dataPoint3' r='2.5' style='fill: #00ff00; stroke: none; stroke-width: 1px;' cx='437.870009653564'/>
+    <g>
+      <text visibility='hidden' x='19.9843030972302' y='238.111111111111' id='538641648' style='fill: #000; text-anchor: start;'>01/11/74</text>
+      <circle cy='250.111111111111' onmouseover='document.getElementById(538641648).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538641648).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='14.9843030972302' style='opacity: 0'/>
+      <text x='14.9843030972302' class='dataPointLabel' y='244.111111111111' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>7</text>
+      <text x='14.9843030972302' class='dataPointLabel' y='244.111111111111' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>7</text>
+      <text visibility='hidden' x='26.25842845231' y='155.888888888889' id='538638598' style='fill: #000; text-anchor: start;'>06/17/74</text>
+      <circle cy='167.888888888889' onmouseover='document.getElementById(538638598).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538638598).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='21.25842845231' style='opacity: 0'/>
+      <text x='21.25842845231' class='dataPointLabel' y='161.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>11</text>
+      <text x='21.25842845231' class='dataPointLabel' y='161.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>11</text>
+      <text visibility='hidden' x='189.865238666939' y='340.888888888889' id='538635548' style='fill: #000; text-anchor: start;'>09/01/85</text>
+      <circle cy='352.888888888889' onmouseover='document.getElementById(538635548).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538635548).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='184.865238666939' style='opacity: 0'/>
+      <text x='184.865238666939' class='dataPointLabel' y='346.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>2</text>
+      <text x='184.865238666939' class='dataPointLabel' y='346.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>2</text>
+      <text visibility='hidden' x='233.664228406859' y='361.444444444444' id='538632498' style='fill: #000; text-anchor: start;'>09/01/88</text>
+      <circle cy='373.444444444444' onmouseover='document.getElementById(538632498).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538632498).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='228.664228406859' style='opacity: 0'/>
+      <text x='228.664228406859' class='dataPointLabel' y='367.444444444444' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>1</text>
+      <text x='228.664228406859' class='dataPointLabel' y='367.444444444444' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>1</text>
+      <text visibility='hidden' x='326.658821548009' y='114.777777777778' id='538629448' style='fill: #000; text-anchor: start;'>01/15/95</text>
+      <circle cy='126.777777777778' onmouseover='document.getElementById(538629448).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538629448).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='321.658821548009' style='opacity: 0'/>
+      <text x='321.658821548009' class='dataPointLabel' y='120.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>13</text>
+      <text x='321.658821548009' class='dataPointLabel' y='120.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>13</text>
+      <text visibility='hidden' x='423.806192989469' y='197.0' id='538626398' style='fill: #000; text-anchor: start;'>09/11/01</text>
+      <circle cy='209.0' onmouseover='document.getElementById(538626398).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538626398).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='418.806192989469' style='opacity: 0'/>
+      <text x='418.806192989469' class='dataPointLabel' y='203.0' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>9</text>
+      <text x='418.806192989469' class='dataPointLabel' y='203.0' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>9</text>
+      <text visibility='hidden' x='461.6' y='155.888888888889' id='538623328' style='fill: #000; text-anchor: start;'>04/13/04</text>
+      <circle cy='167.888888888889' onmouseover='document.getElementById(538623328).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538623328).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='456.6' style='opacity: 0'/>
+      <text x='456.6' class='dataPointLabel' y='161.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>11</text>
+      <text x='456.6' class='dataPointLabel' y='161.888888888889' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>11</text>
+      <text visibility='hidden' x='13.4704022508734' y='12.0' id='538619318' style='fill: #000; text-anchor: start;'>08/01/73</text>
+      <circle cy='24.0' onmouseover='document.getElementById(538619318).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538619318).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='8.47040225087341' style='opacity: 0'/>
+      <text x='8.47040225087341' class='dataPointLabel' y='18.0' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>18</text>
+      <text x='8.47040225087341' class='dataPointLabel' y='18.0' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>18</text>
+      <text visibility='hidden' x='60.5063611230323' y='73.6666666666666' id='538616268' style='fill: #000; text-anchor: start;'>10/21/76</text>
+      <circle cy='85.6666666666666' onmouseover='document.getElementById(538616268).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538616268).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='55.5063611230323' style='opacity: 0'/>
+      <text x='55.5063611230323' class='dataPointLabel' y='79.6666666666666' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>15</text>
+      <text x='55.5063611230323' class='dataPointLabel' y='79.6666666666666' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>15</text>
+      <text visibility='hidden' x='107.543985102769' y='299.777777777778' id='538613218' style='fill: #000; text-anchor: start;'>01/11/80</text>
+      <circle cy='311.777777777778' onmouseover='document.getElementById(538613218).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538613218).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='102.543985102769' style='opacity: 0'/>
+      <text x='102.543985102769' class='dataPointLabel' y='305.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>4</text>
+      <text x='102.543985102769' class='dataPointLabel' y='305.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>4</text>
+      <text visibility='hidden' x='154.619906556808' y='94.2222222222222' id='538610168' style='fill: #000; text-anchor: start;'>04/03/83</text>
+      <circle cy='106.222222222222' onmouseover='document.getElementById(538610168).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538610168).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='149.619906556808' style='opacity: 0'/>
+      <text x='149.619906556808' class='dataPointLabel' y='100.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>14</text>
+      <text x='149.619906556808' class='dataPointLabel' y='100.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>14</text>
+      <text visibility='hidden' x='201.654200321388' y='258.666666666667' id='538607118' style='fill: #000; text-anchor: start;'>06/23/86</text>
+      <circle cy='270.666666666667' onmouseover='document.getElementById(538607118).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538607118).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='196.654200321388' style='opacity: 0'/>
+      <text x='196.654200321388' class='dataPointLabel' y='264.666666666667' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>6</text>
+      <text x='196.654200321388' class='dataPointLabel' y='264.666666666667' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>6</text>
+      <text visibility='hidden' x='248.730121775427' y='135.333333333333' id='538604068' style='fill: #000; text-anchor: start;'>09/13/89</text>
+      <circle cy='147.333333333333' onmouseover='document.getElementById(538604068).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538604068).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='243.730121775427' style='opacity: 0'/>
+      <text x='243.730121775427' class='dataPointLabel' y='141.333333333333' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>12</text>
+      <text x='243.730121775427' class='dataPointLabel' y='141.333333333333' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>12</text>
+      <text visibility='hidden' x='295.767745755164' y='258.666666666667' id='538601018' style='fill: #000; text-anchor: start;'>12/03/92</text>
+      <circle cy='270.666666666667' onmouseover='document.getElementById(538601018).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538601018).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='290.767745755164' style='opacity: 0'/>
+      <text x='290.767745755164' class='dataPointLabel' y='264.666666666667' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>6</text>
+      <text x='290.767745755164' class='dataPointLabel' y='264.666666666667' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>6</text>
+      <text visibility='hidden' x='342.843667209202' y='32.5555555555555' id='538597968' style='fill: #000; text-anchor: start;'>02/24/96</text>
+      <circle cy='44.5555555555555' onmouseover='document.getElementById(538597968).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538597968).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='337.843667209202' style='opacity: 0'/>
+      <text x='337.843667209202' class='dataPointLabel' y='38.5555555555555' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>17</text>
+      <text x='337.843667209202' class='dataPointLabel' y='38.5555555555555' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>17</text>
+      <text visibility='hidden' x='389.877960973783' y='135.333333333333' id='538594918' style='fill: #000; text-anchor: start;'>05/16/99</text>
+      <circle cy='147.333333333333' onmouseover='document.getElementById(538594918).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538594918).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='384.877960973783' style='opacity: 0'/>
+      <text x='384.877960973783' class='dataPointLabel' y='141.333333333333' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>12</text>
+      <text x='384.877960973783' class='dataPointLabel' y='141.333333333333' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>12</text>
+      <text visibility='hidden' x='436.913919845942' y='238.111111111111' id='538591868' style='fill: #000; text-anchor: start;'>08/05/02</text>
+      <circle cy='250.111111111111' onmouseover='document.getElementById(538591868).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538591868).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='431.913919845942' style='opacity: 0'/>
+      <text x='431.913919845942' class='dataPointLabel' y='244.111111111111' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>7</text>
+      <text x='431.913919845942' class='dataPointLabel' y='244.111111111111' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>7</text>
+      <text visibility='hidden' x='77.9716745119474' y='279.222222222222' id='538588218' style='fill: #000; text-anchor: start;'>01/01/78</text>
+      <circle cy='291.222222222222' onmouseover='document.getElementById(538588218).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538588218).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='72.9716745119474' style='opacity: 0'/>
+      <text x='72.9716745119474' class='dataPointLabel' y='285.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>5</text>
+      <text x='72.9716745119474' class='dataPointLabel' y='285.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>5</text>
+      <text visibility='hidden' x='150.943349023895' y='114.777777777778' id='538585168' style='fill: #000; text-anchor: start;'>01/01/83</text>
+      <circle cy='126.777777777778' onmouseover='document.getElementById(538585168).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538585168).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='145.943349023895' style='opacity: 0'/>
+      <text x='145.943349023895' class='dataPointLabel' y='120.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>13</text>
+      <text x='145.943349023895' class='dataPointLabel' y='120.777777777778' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>13</text>
+      <text visibility='hidden' x='296.926660629669' y='176.444444444444' id='538582118' style='fill: #000; text-anchor: start;'>01/01/93</text>
+      <circle cy='188.444444444444' onmouseover='document.getElementById(538582118).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538582118).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='291.926660629669' style='opacity: 0'/>
+      <text x='291.926660629669' class='dataPointLabel' y='182.444444444444' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>10</text>
+      <text x='291.926660629669' class='dataPointLabel' y='182.444444444444' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>10</text>
+      <text visibility='hidden' x='442.870009653564' y='279.222222222222' id='538579068' style='fill: #000; text-anchor: start;'>01/01/03</text>
+      <circle cy='291.222222222222' onmouseover='document.getElementById(538579068).setAttribute(&apos;visibility&apos;, &apos;visible&apos; )' r='10' onmouseout='document.getElementById(538579068).setAttribute(&apos;visibility&apos;, &apos;hidden&apos; )' cx='437.870009653564' style='opacity: 0'/>
+      <text x='437.870009653564' class='dataPointLabel' y='285.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal; stroke: #fff; stroke-width: 2;'>5</text>
+      <text x='437.870009653564' class='dataPointLabel' y='285.222222222222' style='fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>5</text>
+    </g>
+  </g>
+  <text x='320' class='mainTitle' y='16' style='text-anchor: middle; fill: #000000; font-size: 16px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Plot</text>
+  <text x='320' class='xAxisTitle' y='468' style='text-anchor: middle; fill: #ff0000; font-size: 14px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Time</text>
+  <text transform='rotate( -90, 17, 240 )' x='17' class='yAxisTitle' y='240' style='fill: #ff0000; text-anchor: middle; font-size: 14px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Units</text>
+  <g transform='translate(531.0 46)'>
+    <rect x='0' class='key1' y='0' height='12' style='fill: #ff0000; stroke: none; stroke-width: 1px;' width='12'/>
+    <text x='17' class='keyText' y='12' style='fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Ice Cream</text>
+    <rect x='0' class='key2' y='17' height='12' style='fill: #0000ff; stroke: none; stroke-width: 1px;' width='12'/>
+    <text x='17' class='keyText' y='29' style='fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Ice Cream Cones</text>
+    <rect x='0' class='key3' y='34' height='12' style='fill: #00ff00; stroke: none; stroke-width: 1px;' width='12'/>
+    <text x='17' class='keyText' y='46' style='fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;'>Sprinkles</text>
+  </g>
+</svg>

data/index.html

@@ -0,0 +1,445 @@
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>SVG::Graph</title>
+<style media="all" type="text/css">@import "/~ser/styles/common.css";</style>
+</head>
+<body>
+<div id="header">SVG::Graph</div>
+<div id="menu">
+<div class="sect1menu">
+<a href="#N1001C">What is it?</a>
+</div>
+<div class="sect1menu">
+<a href="#N10028">What's new?</a>
+</div>
+<div class="sect1menu">
+<a href="#N10034">Screenshot</a>
+</div>
+<div class="sect1menu">
+<a href="#N1005E">Why use it?</a>
+</div>
+<div class="sect1menu">
+<a href="#N10070">Getting it</a>
+</div>
+<div class="sect1menu">
+<a href="#N1009B">Why?</a>
+</div>
+<div class="sect1menu">
+<a href="#N100E6">Dependancies</a>
+</div>
+<div class="sect1menu">
+<a href="#N100EF">Usage</a>
+</div>
+<div class="sect1menu">
+<a href="#N10100">Notes</a>
+</div>
+<div class="sect1menu">
+<a href="#N10127">Bugs</a>
+</div>
+<div class="sect1menu">
+<a href="#N1013D">Repository</a>
+</div>
+</div>
+<div id="content">
+<p></p>
+  
+
+  0.6.1
+
+  
+
+  <a name="N1001C">
+<div class="sect1">
+    
+<h2>What is it?</h2>
+
+    
+<p>SVG:::Graph is a pure Ruby library for generating charts, which are
+    a type of graph where the values of one axis are not scalar. SVG::Graph
+    has a verry similar API to the Perl library SVG::TT::Graph, and the
+    resulting charts also look the same. This isn't surprising, because
+    SVG::Graph started as a loose port of SVG::TT::Graph, although the
+    internal code no longer resembles the Perl original at all.</p>
+
+    
+<p>SVG::Graph isn't only for charts. With version 0.4.0, support for
+    Plot charts was added, so scalar data may now be charted.</p>
+  
+</div>
+</a>
+
+  <a name="N10028">
+<div class="sect1">
+    
+<h2>What's new?</h2>
+    
+<p>You can find that out in the <a href="changelog.html">change log.</a>
+</p>
+  
+</div>
+</a>
+
+  <a name="N10034">
+<div class="sect1">
+    
+<h2>Screenshot</h2>
+
+    
+<p>Gotta have one.</p>
+
+    
+<CENTER>
+<OBJECT TYPE="image/svg+xml" DATA="images/pie.svg" WIDTH="640" HEIGHT="480"></OBJECT></CENTER>
+
+    
+<p>Here's a PNG version of the above image for the
+    SVG-challenged:</p>
+
+    
+<CENTER>
+<IMG SRC="images/pie.png"></CENTER>
+
+    
+<p>The SVG version is <em>much</em> cooler. <a href="screenshots.html">More screenshots are available</a>.</p>
+  
+</div>
+</a>
+
+  <a name="N1005E">
+<div class="sect1">
+    
+<h2>Why use it?</h2>
+
+    
+<p>If you're a Ruby programmer, you can't use SVG::TT::Graph directly.
+    This package is for you.</p>
+
+    
+<p>If you want one of the features that this package has that the Perl
+    version doesn't, and you don't mind doing your graph code in Ruby, then
+    this package is for you.</p>
+
+    
+<p>If you want to generate SVGs that aren't CSS styled (and work with
+    more SVG renderers), use this package.</p>
+
+    
+<p>If you're a Perl wienie or you have something against Ruby, use
+    SVG::TT::Graph. If it doesn't provide you with the features you want, hack
+    it yourself.</p>
+  
+</div>
+</a>
+
+  <a name="N10070">
+<div class="sect1">
+    
+<h2>Getting it</h2>
+
+    
+<p>The source archives contain the example script(s) and an install
+    script. Documentation must be downloaded separately.<ul>
+        
+<li>
+          
+<p>
+<a href="http://www.germane-software.com/archives/svg_graph_0.6.1.tgz">Gzipped
+          sources</a>
+</p>
+        
+</li>
+
+        
+<li>
+          
+<p>
+<a href="http://www.germane-software.com/archives/svg_graph_api_0.6.1.tgz">Gzipped
+          documentation</a>
+</p>
+        
+</li>
+
+        
+<li>
+          
+<p>
+<a href="http://www.germane-software.com/archives/svg_graph_0.6.1.zip">Zipped
+          sources</a>
+</p>
+        
+</li>
+
+        
+<li>
+          
+<p>
+<a href="http://www.germane-software.com/archives/svg_graph_api_0.6.1.zip">Zipped
+          documentation</a>
+</p>
+        
+</li>
+      
+</ul>
+</p>
+  
+</div>
+</a>
+
+  <a name="N1009B">
+<div class="sect1">
+    
+<h2>Why?</h2>
+
+    
+<p>The SVG::TT:Graph package is just fine. It lacked a couple of
+    features that I wanted, and it was in Perl<SUP><A href="#N100A2">1</A></SUP>, so I re-implemented it.</p>
+
+    
+<p>SVG::Graph is not a straight port of SVG::TT::Graph, because the
+    Perl version uses templates, and I don't believe that this is a job for
+    templates. Templates are great when you have lots of context containing a
+    little bit of evaluated code, but the Graph classes are mostly code with a
+    little SVG; therefore, it makes more sense (and is a hell of a lot more
+    readable) to have the SVG embedded in the code rather than vice versa.
+    However, some of the logic was directly cut and paste out of
+    SVG::TT::Graph, as was the entire CSS code and chunks of the
+    documentation, and the part of the API that the user sees is almost
+    identical to the original.</p>
+
+    
+<p>In version 0.2.0 I completely refactored the code to make it more
+    modular. As a result, the core Graph class contains most of the graph
+    drawing primatives, and the specializations (Bar, BarHorizontal, Line,
+    Pie, etc.) only draw the plot itself. This results in many fewer lines of
+    code, and that code is more robust. SVG::TT::Graph re-implemented most of
+    the code for every plot type, whereas SVG::Graph reuses most of the
+    code.</p>
+
+    
+<p>I intend SVG::Graph to have more features than SVG::TT::Graph, which
+    is the main reason for the re-implementation. One such feature is the
+    ability to change the stacking of the data sets. For instance, SVG::Graph
+    allows you to place the data bars from multiple data sets on the same
+    graph side-by-side, rather than overlapping.</p>
+
+    
+<p>SVG::Graph also has an option to disable CSS styling of the graphs.
+    This has a number of consequences, both positive and negative. The SVGs
+    generated can be larger without CSS, and they are harder to dynamically
+    style (you can't use your own styles with CSS disabled). However, a number
+    of SVG renderers do not support or do not fully support CSS in SVG (KSVG
+    in Konqueror and librsvg, for instance). Adobe and Batik both support CSS,
+    so if those are your targets, you can use CSS. For maximum compatability,
+    disable CSS with the :no_css attriibute.</p>
+
+    
+<p>The currently supported graph types are:</p>
+
+    
+<ul>
+      
+<li>
+        
+<p>Bar</p>
+      
+</li>
+
+      
+<li>
+        
+<p>BarHorizontal</p>
+      
+</li>
+
+      
+<li>
+        
+<p>Line</p>
+      
+</li>
+
+      
+<li>
+        
+<p>Pie</p>
+      
+</li>
+
+      
+<li>
+        
+<p>Plot (this is scalar data)</p>
+      
+</li>
+
+      
+<li>
+        
+<p>TimeSeries (also scalar data, with one axis being dates)</p>
+      
+</li>
+
+      
+<li>
+        
+<p>Schedule (scalar time range data, with non-scalar Y axis)</p>
+      
+</li>
+    
+</ul>
+  
+</div>
+</a>
+
+  <a name="N100E6">
+<div class="sect1">
+    
+<h2>Dependancies</h2>
+
+    
+<p>REXML 3.0+, or Ruby 1.8+. If you want to use the SVG compression
+    feature, which generates zlib compressed SVGs, you must also have the Ruby
+    zlib library installed.</p>
+  
+</div>
+</a>
+
+  <a name="N100EF">
+<div class="sect1">
+    
+<h2>Usage</h2>
+
+    
+<p>There's API documentation available, either <a href="http://www.germane-software.com/software/SVG/SVG::Graph/doc">online</a>
+    or for <a href="http://www.germane-software.com/archive/svg_graph_api_0.6.1.tgz">download</a>.
+    Or, you can use rdoc to generate it yourself. The API documentation is
+    pretty comprehensive (Leo Lapworth did a really good job on the docs, and
+    I stole most of them), and there's an example application in the main
+    directory.</p>
+  
+</div>
+</a>
+
+  <a name="N10100">
+<div class="sect1">
+    
+<h2>Notes</h2>
+
+    
+<a name="N10105">
+<div class="sect2">
+      
+<h3>SVG feature support</h3>
+
+      
+<p>Some SVG renderers (librsvg) do not understand CSS. This is a
+      problem with Perl's SVG::TT::Graph, because <em>all</em> of
+      the styling of the charts it generates is done with CSS. SVG::Graph is
+      able to inline the styles, rendering graphs that are compatible with
+      more viewers.</p>
+
+      
+<p>The Pie chart uses the feGaussianBlur filter to generate the
+      shadow, whiich is also unsupperted by some renderers (librsvg). The
+      shadow will not look as smooth on those displays, although it will
+      render.</p>
+    
+</div>
+</a>
+
+    <a name="N10114">
+<div class="sect2">
+      
+<h3>Sizes</h3>
+
+      
+<p>The bar charts PNGs tend to be smaller than the uncompressed SVGs.
+      In the best case (for PNG), the PNG is 66% of the size of the
+      uncompressed SVG.</p>
+
+      
+<p>For line and pie charts, which are a little more visually complex,
+      the SVGs are smaller than the PNGs. In the best case, the PNG is 130%
+      the size of the SVG. In the worst case, the PNG is 220% the size of the
+      uncompressed SVG.</p>
+
+      
+<p>The compressed SVGs are always much smaller than the PNGs. In the
+      best case (a vertical bar chart), the PNG is 4.4 times the size of the
+      compressed SVG, and in the worst case (for a pie chart), it is over 12
+      times the size of the compressed SVG.</p>
+
+      
+<p>These values were measured with inline styled SVGs, and the PNGs
+      were reduced to 8-bit, indexed images, and were crushed with
+      pngcrush.</p>
+    
+</div>
+</a>
+  
+</div>
+</a>
+
+  <a name="N10127">
+<div class="sect1">
+    
+<h2>Bugs</h2>
+
+    
+<p>SVG::Graph probably contains bugs. In fact, it is probably mostly
+    bugs, held together with some working code around them. In particular,
+    SVG::Graph is probably really intolerant of *your* bugs, and is likely
+    entirely unhelpful in helping you track down problems. We can only pray
+    that this situation improves<SUP><A href="#N1012E">2</A></SUP>.</p>
+
+    
+<p>There is a <a href="http://www.germane-software.com/cgi-bin/roundup/svg-graph">bug and
+    feature request database</a>; use this, and please create a user
+    account if you don't have one, so that I can email you if I have
+    questions. Alternatively, post anonymously, and check the database
+    often.</p>
+  
+</div>
+</a>
+
+  <a name="N1013D">
+<div class="sect1">
+    
+<h2>Repository</h2>
+
+    
+<p>The sourcecode repository is a <a href="http://subversion.tigris.org">Subversion</a> repository, located
+    <a href="http://www.germane-software.com/repositories/public/SVG">here</a>.</p>
+  
+</div>
+</a>
+
+</div>
+<div id="footnotes">
+<div class="footnote">
+<div class="footnotenum">
+<A name="N100A2">1)</A>
+</div>
+        
+<p>Perl is from Hell. The language is bad enough, but working with
+        the package system -- CPAN, etc. -- is an exercize in masochism. I'd
+        rather chew on glass.</p>
+      
+</div>
+<div class="footnote">
+<div class="footnotenum">
+<A name="N1012E">2)</A>
+</div>
+        
+<p>Prayer is much more effective when accompanied by sums of cash
+        sent to the author.</p>
+      
+</div>
+</div>
+<div id="footer">
+<div style="float:right">Copyright  Sean Russell</div>
+					[ <a href="http://www.germane-software.com/~ser">Main</a> ]
+				</div>
+</body>
+</html>