You can generate SVG using XSLT, although you might find some chart library that might not require that you learn XSLT. With XSLT you select the nodes you want using XPath, and can manipulate them any way you like. You can even generate it dynamically on-the-fly in browsers (there are version limitations, though).
I wrote a tutorial about SVG chart generation using XSLT 1.0. Unfortunately it's in Portuguese and I never had the time to translate it. But I adapted your source XML and wrote a small XSLT stylesheet that will generate a simple SVG bar chart with the numbers in all POWIERZCHNIA
field (not considering the nesting).
I defined some variables with fixed values for the dimensions. The $max-powierzchnia
variable selects the largest value which will be used to calculate the length of the bar using the value in POWIERZCHNIA * $max-bar-length / $max-powierzchnia
. The SWIAT
XSL template defines the root elements of the SVG, then sorts in (by descending order of POWIERZCHNIA
) and processes all the KRAINA_GEOG
nodes, which are transformed in the KRAINA_GEOG
template.
This is the stylesheet:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0">
<xsl:output indent="yes"/>
<xsl:variable name="svg-width" select="1200" />
<xsl:variable name="svg-height" select="900" />
<xsl:variable name="max-bar-length" select="$svg-width - 400" />
<xsl:variable name="bar-height" select="20" />
<xsl:variable name="bar-spacing" select="10" />
<xsl:variable name="bar-start" select="200" />
<xsl:variable name="max-powierzchnia" select="//POWIERZCHNIA[not(. < //POWIERZCHNIA)]" />
<xsl:template match="SWIAT">
<svg viewBox="0 0 {$svg-width} {$svg-height}" width="{$svg-width}px" height="{$svg-height}px">
<g id="bar-chart" font-size="16" transform="translate(20,100)">
<xsl:apply-templates select="//KRAINA_GEOG">
<xsl:sort order="descending" select="POWIERZCHNIA" />
</xsl:apply-templates>
</g>
</svg>
</xsl:template>
<xsl:template match="KRAINA_GEOG">
<xsl:variable name="bar-width" select="POWIERZCHNIA * $max-bar-length div $max-powierzchnia" />
<g id="bar_{position()}"
transform="translate(0, {(position() - 1) * ($bar-height + $bar-spacing)})">
<text x="0" y="{($bar-height + $bar-spacing) div 2}"><xsl:number format="1. " value="position()"/>
<xsl:value-of select="NAZWA"/></text>
<rect x="{$bar-start}" y="0" width="{$bar-width}" height="{$bar-height}" fill="lightgray"/>
<text x="{$bar-width + $bar-start + 5}" y="{($bar-height + $bar-spacing) div 2}"><xsl:value-of select="POWIERZCHNIA"/></text>
</g>
</xsl:template>
</xsl:stylesheet>
And this is the resulting SVG you get when you run your source XML + this XSL stylesheet through a XSLT processor: http://codepen.io/helderdarocha/pen/iJrFb
You might also try generating it on the fly, saving the XSLT stylesheet above in a file (svg-graph.xsl
), adding a <?xml-stylesheet
processing instruction to your XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="svg-graph.xsl"?>
<SWIAT>
<KRAINA_GEOG TYP="Pobrzeze">
<NAZWA>Południowobałtyckie</NAZWA>
<POWIERZCHNIA>19000</POWIERZCHNIA>
...
And loading it in a browser such as FireFox.