Highcharts (bar chart and pie chart)

highcharts_part3.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <div id="container2" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <script type="text/javascript">
            <![CDATA[
                    $('#container').highcharts({
                        chart: {
                            type: 'bar'
                        },
                        title: {
                            text: 'Historic World Population by Region'
                        },
                        subtitle: {
                            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
                        },
                        xAxis: {
                            categories: [
                            ]]>
            <xsl:apply-templates select="/dsQueryResponse/Rows/Row" mode="xaxis"/>
            <![CDATA[
                            ],
                            title: {
                                text: null
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Population (millions)',
                                align: 'high'
                            },
                            labels: {
                                overflow: 'justify'
                            }
                        },
                        tooltip: {
                            valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -40,
                            y: 80,
                            floating: true,
                            borderWidth: 1,
                            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                            shadow: true
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: 'Unit Sales',
                            data: [
                            ]]>
            <xsl:apply-templates select="/dsQueryResponse/Rows/Row" mode="data"/>
            <![CDATA[
                            ]
                        }]
                    });
                $('#container2').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: 'Sales data, 2014-2015'
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            name: "Sales Figures",
                            colorByPoint: true,
                            data: [
                        ]]>
                                <xsl:apply-templates select="/dsQueryResponse/Rows/Row" mode="piechart"/>
                        <![CDATA[
                            ]
                        }]
                    });
            ]]>
        </script>
    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row" mode="xaxis">
        '<xsl:value-of select="@Date"/>'
        <xsl:if test="position() != last()">,</xsl:if>
    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row" mode="data">
        <xsl:value-of select="@Total"/>
        <xsl:if test="position() != last()">,</xsl:if>
    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row" mode="piechart">
        {
            name: "<xsl:value-of select="@Date"/>",
            y: <xsl:value-of select="@Total"/>
        }
        <xsl:if test="position() != last()">,</xsl:if>
    </xsl:template>
</xsl:stylesheet>