Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Lucy Foster 10 posts 82 karma points
    Sep 15, 2016 @ 10:29
    Lucy Foster
    0

    Chart.js - Dynamic data with XSLT

    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!

Please Sign in or register to post replies

Write your reply to:

Draft