Highcharts (pre-updatepanel)

highcharts_a.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:strip-space elements="script"/>
    <xsl:template match="/">

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"/>
        <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>

        <script type="text/javascript">
            <![CDATA[
                $(function () {
                    $('#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[
                            ]
                        }]
                    });
                });
            ]]>
        </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:stylesheet>