<?xml version="1.0" encoding="UTF-8"?>
<?altova_samplexml YearlySales.xml?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:altovaext="http://www.altova.com/xslt-extensions" xmlns:altova="http://www.altova.com">
	<xsl:output version="5.0" method="html" indent="yes" encoding="UTF-8"/>
	<!-- This example illustrates how to use the chart functionality from whithin XSLT. -->
	<xsl:template match="/">
		<!-- This just creates an img element in the result HTML to display the resulting chart image. -->
		<html>
			<head>
				<title>Example Chart HTML - generated with Altova XSLT Engine</title>
			</head>
			<body>
				<img style='display:block; border:1px solid black;' src="data:image/png;base64,{altova:YearlySalesChart(., 1000, 300)}">
					<xsl:attribute name="alt" select="'chart generated with Altova&#x00AE; Raptor engine'"/>
				</img>
			</body>
		</html>
	</xsl:template>
	
	<xsl:function name="altova:YearlySalesChart" as="xs:base64Binary">
		<!-- The document element from where to read the XML data for the Charts -->
		<xsl:param name="documentRoot"/>
		<!-- Specify the width and height of the generated Chart image -->
		<xsl:param name="chartWidthPx" as="xs:integer"/>
		<xsl:param name="chartHeightPx" as="xs:integer"/>
		<!-- Get all the data that is needed to create your chart. -->
		<xsl:variable name="chartData" as="array(*)*">
			<xsl:for-each-group select="$documentRoot/Data/Region/Year" group-by="@id">
				<xsl:sequence select="[ fn:current-grouping-key(), fn:current-group()/../@id, fn:current-group() ]"/>
			</xsl:for-each-group>
		</xsl:variable>
		<!-- Finally create the actual chart image  -->
		<xsl:sequence select="altovaext:chart( map{ 'kind': 'BarChart', 'title': 'YearlySales', 'width': $chartWidthPx, 'height': $chartHeightPx }, $chartData )"/>
	</xsl:function>
</xsl:stylesheet>
