Hi,

I am trying to dynamically fill the chart.js data info with an output from XSLT. I have got the XSLT outputting the correct info, it lists all the correct info.

I cannot get this to translate over to the javascript. I have tried to call the div and put the text from this into the data sections, however it reads it as one entity, rather than splitting the data.

Is there a way to get the xsl output into the javascript? And is there a way to get it to read each entity as a seperate items?

<div id="canvas-holder" style="width:100%">
     <canvas id="chart-area" width="1000" height="800" />
</div>    
 <div class="pieLabel">
        <xsl:for-each select="$currentPage/StubsMasterOld/TwoColumnsPieChart/PieChartItem">
            <xsl:variable name="key" select="./label"/>
            <div>
                "<xsl:value-of select="$key"/>",
            </div>
        </xsl:for-each> 
    </div>
    <div class="pieData">
        <xsl:for-each select="$currentPage/StubsMasterOld/TwoColumnsPieChart/PieChartItem">
            <xsl:variable name="numeric" select="./numeric"/>
            <div>
                <xsl:value-of select="$numeric"/>,
            </div>
        </xsl:for-each>
    </div>
    <div class="pieColor">
        <xsl:for-each select="$currentPage/StubsMasterOld/TwoColumnsPieChart/PieChartItem">
            <xsl:variable name="color" select="./color"/>
            <div>
                "<xsl:value-of select="$color"/>",
            </div>
        </xsl:for-each> 
    </div>
    <xsl:text disable-output-escaping="yes">    
        <![CDATA[<script type="text/javascript"> 
            $( document ).ready(function() {  
                var newPieLabel = $(".pieLabel div").text();
                $(".pieLabel").html(newPieLabel);

                    var newPieData = $(".pieData").html();
                    $(".pieData").text(newPieData);

                    var newPieColor = $(".pieColor").html();
                    $(".pieColor").text(newPieColor);

            console.log(newPieData);
            console.log(newPieLabel);
            console.log(newPieColor);

            var config = {
                type: 'pie',
                    data: {
                        datasets: [{
                            data: [
                                234,
                                115,
                                456
                            ],
                            backgroundColor: [
                                "#3bc543",
                            ],
                        }],
                        labels: [
                            newPieLabel 
                        ]
                    },
                    options: {
                        responsive: true
                    }
                };
                window.onload = function() {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx, config);
                };

        });
    </script>]]>
</xsl:text>

Thanks!