samples/barChart.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<!-- ========================================================================= -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved.        -->
<!--                                                                           -->
<!-- This software is published under the terms of the Apache Software License -->
<!-- version 1.1, a copy of which has been included with this distribution in  -->
<!-- the LICENSE file.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- Illustrates how SVG can be used for high quality graphs.                  -->
<!--                                                                           -->
<!-- @author vincent.hardy@eng.sun.com                                         -->
<!-- @author neeme.praks@one.lv                                                -->
<!-- @version $Id$        -->
<!-- ========================================================================= -->

<?xml-stylesheet type="text/css" href="tests/test.css" ?>
<svg id="body" width="450" height="500" xml:space="preserve" viewBox="0 0 450 500">
    <title>Bar Chart</title>

    <g id="barChart" transform="translate(40, 100)" fill-rule="evenodd" clip-rule="evenodd" stroke="none" class="legend"
        stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" style="text-anchor:start">

		<g id="GridAndLegend" style="stroke:none;">
            <g stroke="black">

		<!-- "floor" and "wall" -->
			<path fill="lightgray" stroke="darkgray" d="M 27,240 l   15,-15 v -224 l -15,15" />
			<path fill="lightgray" stroke="darkgray" d="M 41,225 v -224     h  316 v 224" />
			<path fill="darkgray" stroke="none"      d="M 27,240 l   15,-15 h  316 l -15,15" />

		<!-- axis lines -->
			<path d="M 27,240 h  316"/>
			<path d="M 27,240 v -224"/>

		<!-- value axis major gridlines -->
			<g style="fill:none;">
				<path d="M 27,202 l 15,-15 h 316" />
				<path d="M 27,165 l 15,-15 h 316" />
				<path d="M 27,127 l 15,-15 h 316" />
				<path d="M 27, 90 l 15,-15 h 316" />
				<path d="M 27, 53 l 15,-15 h 316" />
			</g>

		<!-- category axis major ticks -->
			<path d="M  27,245 v -5"/>
			<path d="M 106,245 v -5"/>
			<path d="M 185,245 v -5"/>
			<path d="M 264,245 v -5"/>

		<!-- value axis minor ticks -->
			<path d="M 22,240 h 5"/>
			<path d="M 22,202 h 5"/>
			<path d="M 22,165 h 5"/>
			<path d="M 22,127 h 5"/>
			<path d="M 22, 90 h 5"/>
			<path d="M 22, 53 h 5"/>
			<path d="M 22, 15 h 5"/>
            </g>

			<text transform="matrix(1 0 0 1 54  256)">Shoe</text>
			<text transform="matrix(1 0 0 1 142 256)">Car</text>
			<text transform="matrix(1 0 0 1 211 256)">Travel</text>
			<text transform="matrix(1 0 0 1 285 256)">Computer</text>

			<text transform="matrix(1 0 0 1 13 247)"><tspan x="0" y="0">0</tspan></text>
			<text transform="matrix(1 0 0 1  6 209)"><tspan x="0" y="0">10</tspan></text>
			<text transform="matrix(1 0 0 1  6 171)"><tspan x="0" y="0">20</tspan></text>
			<text transform="matrix(1 0 0 1  6 134)"><tspan x="0" y="0">30</tspan></text>
			<text transform="matrix(1 0 0 1  6  96)"><tspan x="0" y="0">40</tspan></text>
			<text transform="matrix(1 0 0 1  6  60)"><tspan x="0" y="0">50</tspan></text>
			<text transform="matrix(1 0 0 1  6  22)"><tspan x="0" y="0">60</tspan></text>
		</g>

		<g id="ShoeBar">
			<path style="fill:#8686E0;" d="M  86,240 v  -37 l 15    -15 v  37 l -15,15 z"/>
			<path style="fill:#5B5B97;" d="M  86,203 h  -39 l 15    -15 h  39 l -15,15 z"/>
			<path style="fill:#7575C3;" d="M  47,203 v   37 h 39 v  -37 H  47 z"/>
		</g>
		<g id="CarBar">
			<path style="fill:#8686E0;" d="M 165,240 v  -74 l 15    -15 v  74 l -15,15 z"/>
			<path style="fill:#5B5B97;" d="M 165,166 h  -39 l 15    -15 h  39 l -15,15 z"/>
			<path style="fill:#7575C3;" d="M 126,166 v   74 h 39 v  -74 h -39 z"/>
		</g>
		<g id="TravelBar">
			<path style="fill:#8686E0;" d="M 244,240 v  -37 l 15    -15 v  37 l -15,15 z"/>
			<path style="fill:#5B5B97;" d="M 244,203 h  -39 l 15    -15 h  39 l -15,15 z"/>
			<path style="fill:#7575C3;" d="M 205,203 v   37 h 39 v  -37 h -39 z"/>
		</g>
		<g id="ComputerBar">
			<path style="fill:#8686E0;" d="M 323,240 v -224 l 15    -15 v 224 l -15,15 z"/>
			<path style="fill:#5B5B97;" d="M 323, 16 h  -39 l 15    -15 h  39 l -15,15 z"/>
			<path style="fill:#7575C3;" d="M 284, 16 v  224 h 39 v -224 h -39 z"/>
		</g>

    </g>

    <!-- ============================================================= -->
    <!-- Batik sample mark                                             -->
    <!-- ============================================================= -->
    <use xlink:href="batikLogo.svg#Batik_Tag_Box" />

</svg>