code works fine on jsfiddle but one function is not working on website

Question

I have copied the code from fiddle exactly, included the correct external resources, libraries etc etc however one function just doesn't want to work. I have included a console.log and this function just is not being reached at all however in fiddle it works fine.

Note: everything else works as expected.

http://jsfiddle.net/2gapedks/68/

What could be the problem?

function drawSegmentValues()
    {
        console.log("I am Here Animating");
        for(var i=0; i<myChart.segments.length; i++) 
        {
            ctx.fillStyle="white";
            var textSize = canvas.width/30;
            ctx.font= textSize+"px Verdana";
            // Get needed variables
            var value = myChart.segments[i].value;
            var startAngle = myChart.segments[i].startAngle;
            var endAngle = myChart.segments[i].endAngle;
            var middleAngle = startAngle + ((endAngle - startAngle)/2);

            // Compute text location
            if (data[i].value > 100) {
                var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
                var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
            }
            else {
                var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
                var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
            }

            // Text offside by middle
            var w_offset = ctx.measureText(value).width/2;
            var h_offset = textSize/4;

            ctx.fillText(value, posX - w_offset, posY + h_offset);
        }
    }

EDITS //

Fiddle code:

var data = [
    {value: 500, color:"#F7464A", label:"Test1"},
    {value: 500, color:"#F7464A", label:"<a href='#'>Test2</a>"}
    ];
var total = 0;

var options = {
    segmentShowStroke : true,
    segmentStrokeColor : "#fff",
    segmentStrokeWidth : 2,
    percentageInnerCutout : 30, // This is 0 for Pie charts
    animationSteps : 100,
    animationEasing : "easeOutBounce",
    animateRotate : true,
    animateScale : false,
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
    showTooltips: false,
    onAnimationProgress: drawSegmentValues,
    onAnimationComplete: drawTotalValues
}

var canvas = document.getElementById("wheel");
var ctx = canvas.getContext("2d");
var midX = canvas.width/2;
var midY = canvas.height/2

// Create a pie chart
var myChart = new Chart(ctx).Doughnut(data, options);

var radius = myChart.outerRadius;

function drawSegmentValues()
{
    console.log("I am Here Animating");
    for(var i=0; i<myChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myChart.segments[i].value;
        var startAngle = myChart.segments[i].startAngle;
        var endAngle = myChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        if (data[i].value > 100) {
            var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
            var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
        }
        else {
            var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
            var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
        }

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}
function drawTotalValues()
{
    console.log("I am Here drawing");
    for(var i=0; i<myChart.segments.length; i++) 
    {
            total += myChart.segments[i].value;
    }
        ctx.fillStyle="black";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";

        // Text offside by middle
        var w_offset = ctx.measureText(total+"\ud83c\udf53").width/2;
        var h_offset = textSize/4;

        ctx.fillText(total+"\ud83c\udf53", midX - w_offset, midY + h_offset);
}

Website code index - header:

<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

index - at bottom of the page:

<script src="js/Chart.js"></script>
<script src="socket.js"></script>

socket.io:

var data = [
    {value: 500, color:"#F7464A", label:"Test1"},
    {value: 500, color:"#F7464A", label:"<a href='#'>Test2</a>"}
    ];
var total = 0;

var options = {
    segmentShowStroke : true,
    segmentStrokeColor : "#fff",
    segmentStrokeWidth : 2,
    percentageInnerCutout : 30, // This is 0 for Pie charts
    animationSteps : 100,
    animationEasing : "easeOutBounce",
    animateRotate : true,
    animateScale : false,
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
    showTooltips: false,
    onAnimationProgress: drawSegmentValues,
    onAnimationComplete: drawTotalValues
}

var canvas = document.getElementById("wheel");
var ctx = canvas.getContext("2d");
var midX = canvas.width/2;
var midY = canvas.height/2

// Create a pie chart
var myChart = new Chart(ctx).Doughnut(data, options);

var radius = myChart.outerRadius;

function drawSegmentValues()
{
    console.log("I am Here Animating");
    for(var i=0; i<myChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myChart.segments[i].value;
        var startAngle = myChart.segments[i].startAngle;
        var endAngle = myChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        if (data[i].value > 100) {
            var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
            var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
        }
        else {
            var posX = (3*radius)/5 * Math.cos(middleAngle) + midX;
            var posY = (3*radius)/5 * Math.sin(middleAngle) + midY;
        }

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}
function drawTotalValues()
{
    console.log("I am Here drawing");
    for(var i=0; i<myChart.segments.length; i++) 
    {
            total += myChart.segments[i].value;
    }
        ctx.fillStyle="black";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";

        // Text offside by middle
        var w_offset = ctx.measureText(total+"\ud83c\udf53").width/2;
        var h_offset = textSize/4;

        ctx.fillText(total+"\ud83c\udf53", midX - w_offset, midY + h_offset);
}

@JordanHendrix No errors or anything, the function is just not being accessed/called anything even though it's clearly there in the options array on both fiddle and my website code. — Matt, Apr 09 '16 at 18:59
can you show us the rest of the code? where are you calling the function? — omarjmh, Apr 09 '16 at 19:01
@JordanHendrix I hav added the whole fiddle and website code, at least the important bits. — Matt, Apr 09 '16 at 19:08
Is your code in a document.ready call or at the end of the document before the closing body tag? jsFiddle wraps code in a window.onload event by default — j08691, Apr 09 '16 at 22:04
Right now no but I did try it. Would that cause the onAnimationProgress to not be called but onAnimationComplete would be allowed to be called? Might have do it wrong the onload first time round — Matt, Apr 09 '16 at 22:07
@j08691 I wrapped the code in window.onload = function(){} and still didn't call that onAnimationProgress function. The code is in an external file, would this change anything? — Matt, Apr 09 '16 at 22:14
In your jsFiddle you are loading only one instance of Chart.js (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js) and in the bottom of index on your website it looks to me like you're loading another instance of Chart.js. Is the local version different from the version used in the jsFiddle (1.0.2)? — damo-s, Apr 09 '16 at 23:20
@damo-s I commented it out and it worked.. thank you.! I downloaded the local version today, surely that should be the most up to date? Or is it due to it being at bottom of index not top? — Matt, Apr 09 '16 at 23:24
I don't believe it's due to it being at bottom of index instead of top. The latest release of the 1.x.x version series is 1.1.1 (the one I assume you downloaded?) and the one used in the jsFiddle looks quite a bit older. It's not uncommon for functionality that previously worked to no longer work in the latest version. There is also a 2.x.x release which is probably a whole other set of marbles. — damo-s, Apr 09 '16 at 23:33

score 1 · Accepted Answer · answered Apr 09 '16 at 23:35

In your jsFiddle you are loading only one instance of Chart.js (cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js) and in the bottom of index on your website it looks to me like you're loading another instance of Chart.js. The local version could be different from the version used in the jsFiddle (1.0.2).

code works fine on jsfiddle but one function is not working on website

1 Answers1