<?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 width="350" height="600" viewBox="0 0 350 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[ /* Copy from here for external style sheet */
.svgBackground{ fill:#ffffff; }
.graphBackground{ fill:#f0f0f0; }
/* graphs titles */
.mainTitle{ text-anchor: middle; fill: #000000; font-size: 14px; font-family: "Arial", sans-serif; font-weight: normal; }
.subTitle{ text-anchor: middle; fill: #999999; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal; }
.axis{ stroke: #000000; stroke-width: 1px; }
.guideLines{ stroke: #666666; stroke-width: 1px; stroke-dasharray: 5 5; }
.xAxisLabels{ text-anchor: middle; fill: #000000; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal; }
.yAxisLabels{ text-anchor: end; fill: #000000; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal; }
.xAxisTitle{ text-anchor: middle; fill: #ff0000; font-size: 14px; font-family: "Arial", sans-serif; font-weight: normal; }
.yAxisTitle{ fill: #ff0000; text-anchor: middle; font-size: 14px; font-family: "Arial", sans-serif; font-weight: normal; }
.dataPointLabel{ fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal; }
.staggerGuideLine{ fill: none; stroke: #000000; stroke-width: 0.5px; }
/* default fill styles */
.fill1{ fill: #cc0000; fill-opacity: 0.2; stroke: none; }
.fill2{ fill: #0000cc; fill-opacity: 0.2; stroke: none; }
.fill3{ fill: #00cc00; fill-opacity: 0.2; stroke: none; }
.fill4{ fill: #ffcc00; fill-opacity: 0.2; stroke: none; }
.fill5{ fill: #00ccff; fill-opacity: 0.2; stroke: none; }
.fill6{ fill: #ff00ff; fill-opacity: 0.2; stroke: none; }
.fill7{ fill: #00ffff; fill-opacity: 0.2; stroke: none; }
.fill8{ fill: #ffff00; fill-opacity: 0.2; stroke: none; }
.fill9{ fill: #cc6666; fill-opacity: 0.2; stroke: none; }
.fill10{ fill: #663399; fill-opacity: 0.2; stroke: none; }
.fill11{ fill: #339900; fill-opacity: 0.2; stroke: none; }
.fill12{ fill: #9966FF; fill-opacity: 0.2; stroke: none; }
/* default line styles */
.line1{ fill: none; stroke: #ff0000; stroke-width: 1px; }
.line2{ fill: none; stroke: #0000ff; stroke-width: 1px; }
.line3{ fill: none; stroke: #00ff00; stroke-width: 1px; }
.line4{ fill: none; stroke: #ffcc00; stroke-width: 1px; }
.line5{ fill: none; stroke: #00ccff; stroke-width: 1px; }
.line6{ fill: none; stroke: #ff00ff; stroke-width: 1px; }
.line7{ fill: none; stroke: #00ffff; stroke-width: 1px; }
.line8{ fill: none; stroke: #ffff00; stroke-width: 1px; }
.line9{ fill: none; stroke: #cc6666; stroke-width: 1px; }
.line10{ fill: none; stroke: #663399; stroke-width: 1px; }
.line11{ fill: none; stroke: #339900; stroke-width: 1px; }
.line12{ fill: none; stroke: #9966FF; stroke-width: 1px; }
/* default line styles */
.key1,.fill1{ fill: #ff0000; stroke: none; stroke-width: 1px; }
.key2,.fill2{ fill: #0000ff; stroke: none; stroke-width: 1px; }
.key3,.fill3{ fill: #00ff00; stroke: none; stroke-width: 1px; }
.key4,.fill4{ fill: #ffcc00; stroke: none; stroke-width: 1px; }
.key5,.fill5{ fill: #00ccff; stroke: none; stroke-width: 1px; }
.key6,.fill6{ fill: #ff00ff; stroke: none; stroke-width: 1px; }
.key7,.fill7{ fill: #00ffff; stroke: none; stroke-width: 1px; }
.key8,.fill8{ fill: #ffff00; stroke: none; stroke-width: 1px; }
.key9,.fill9{ fill: #cc6666; stroke: none; stroke-width: 1px; }
.key10,.fill10{ fill: #663399; stroke: none; stroke-width: 1px; }
.key11,.fill11{ fill: #339900; stroke: none; stroke-width: 1px; }
.key12,.fill12{ fill: #9966FF; stroke: none; stroke-width: 1px; }
.keyText{ fill: #000000; text-anchor:start; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal; }
/* End copy for external style sheet */
]]>
</style>
</defs>
<script language="JavaScript">
function togglePath( series ) {
    var path    = document.getElementById('groupDataSeries' + series)
    var points  = document.getElementById('groupDataLabels' + series)
    var current = path.getAttribute('opacity');
    if ( path.getAttribute('opacity') == 0 ) {
        path.setAttribute('opacity',1)
        points.setAttribute('opacity',1)
    }
else {
        path.setAttribute('opacity',0)
        points.setAttribute('opacity',0)
    }
}
</script>
<rect x="0" y="0" width="350" height="600" class="svgBackground"/>
<rect x="64" y="10" width="222" height="553" class="graphBackground"/>
<clipPath id="clipGraphArea">
    <rect x="64" y="10" width="222" height="553"/>
</clipPath>
<path d="M64 10 v553" class="axis" id="xAxis"/>
<path d="M64 563 h222" class="axis" id="yAxis"/>
    <text x="64" y="578" class="xAxisLabels">2003-09-03 09:00</text>
                    <path d="M175 563 v17" class="staggerGuideLine" />
                    <text x="175" y="595" class="xAxisLabels">2003-09-03 10:00</text>
        <text x="286" y="578" class="xAxisLabels">2003-09-03 11:00</text>
            <text x="59" y="563" class="yAxisLabels">0</text>
                <text x="59" y="485.975" class="yAxisLabels">10</text>
                <path d="M64 485.975 h222" class="guideLines"/>
                <text x="59" y="408.95" class="yAxisLabels">20</text>
                <path d="M64 408.95 h222" class="guideLines"/>
                <text x="59" y="331.925" class="yAxisLabels">30</text>
                <path d="M64 331.925 h222" class="guideLines"/>
                <text x="59" y="254.9" class="yAxisLabels">40</text>
                <path d="M64 254.9 h222" class="guideLines"/>
                <text x="59" y="177.875" class="yAxisLabels">50</text>
                <path d="M64 177.875 h222" class="guideLines"/>
                <text x="59" y="100.85" class="yAxisLabels">60</text>
                <path d="M64 100.85 h222" class="guideLines"/>
                <text x="59" y="23.825" class="yAxisLabels">70</text>
                <path d="M64 23.825 h222" class="guideLines"/>
<g id="groupData" class="data">
    <g id="groupDataSeries2" class="dataSeries2" clip-path="url(#clipGraphArea)">
        <path d="M64 563 L 64 470.57 L 175 362.735 L 286 385.8425 V 563 Z" class="fill2"/>
        <path d="M 64 470.57 L 175 362.735 L 286 385.8425 " class="line2"/>
    </g>
    <g id="groupDataLabels2" class="dataLabels2">
                <g class="dataLabel2" >
                    <circle cx="64" cy="470.57" r="2.5" class="fill2" ></circle>
                    <text x="64" y="464.57" class="dataPointLabel2" >12</text>
                </g>
                <g class="dataLabel2" >
                    <circle cx="175" cy="362.735" r="2.5" class="fill2" ></circle>
                    <text x="175" y="356.735" class="dataPointLabel2" >26</text>
                </g>
                <g class="dataLabel2" >
                    <circle cx="286" cy="385.8425" r="2.5" class="fill2" ></circle>
                    <text x="286" y="379.8425" class="dataPointLabel2" >23</text>
                </g>
    </g>
    <g id="groupDataSeries1" class="dataSeries1" clip-path="url(#clipGraphArea)">
        <path d="M119.5 563 L 119.5 385.8425 L 147.25 147.065 L 175 46.9325 L 202.75 470.57 V 563 Z" class="fill1"/>
        <path d="M 119.5 385.8425 L 147.25 147.065 L 175 46.9325 L 202.75 470.57 " class="line1"/>
    </g>
    <g id="groupDataLabels1" class="dataLabels1">
                <g class="dataLabel1" >
                    <circle cx="119.5" cy="385.8425" r="2.5" class="fill1" ></circle>
                    <text x="119.5" y="379.8425" class="dataPointLabel1" >23</text>
                </g>
                <g class="dataLabel1" >
                    <circle cx="147.25" cy="147.065" r="2.5" class="fill1" ></circle>
                    <text x="147.25" y="141.065" class="dataPointLabel1" >54</text>
                </g>
                <g class="dataLabel1" >
                    <circle cx="175" cy="46.9325" r="2.5" class="fill1" ></circle>
                    <text x="175" y="40.9325" class="dataPointLabel1" >67</text>
                </g>
                <g class="dataLabel1" >
                    <circle cx="202.75" cy="470.57" r="2.5" class="fill1" ></circle>
                    <text x="202.75" y="464.57" class="dataPointLabel1" >12</text>
                </g>
    </g>
</g>
</svg>