CODEWITHSUNDEEP
phpjquerycodeigniter-3pie-chartchart.js
Rahul
Rahul

Reputation: 77

Remove 0% from pie chart

I am having trouble removing the unwanted 0% from the pie-chart. This number shows total in % of all the available options. In the case an option doesn't have any value according to a filter it displays a 0% for it, that I want to remove. I am pasting my code below.

function drawPieChart(versionStatusCanvas,on_hold, active, cancelled, 
activecount, onholdcount, cancelledcount) {

    var versionStatusData = [{
    value: on_hold,
    color:"#444444",
    label: "On Hold(" +onholdcount+")",
},
{
    value: active,
    color: "#72bb53",
    label: "Active(" +activecount+")",
},
{
    value: cancelled,
    color: "#ff6624",
    label: "Cancelled(" +cancelledcount+")",

}];
var versionStatusCanvas = document.getElementById("versionStatus");
var versionStatusCtx = versionStatusCanvas.getContext("2d");
var versionStatusChart = new Chart(versionStatusCtx).Pie(versionStatusData,{
    animationSteps: 100,
    animationEasing: 'easeInOutQuart',
    showTooltips: false,
    segmentShowStroke : false,
    onAnimationProgress: drawSegmentValues
});

document.getElementById('version-status-legend').innerHTML = 
versionStatusChart.generateLegend();

function drawSegmentValues(){
var radius = versionStatusChart.outerRadius;
var midX = versionStatusCanvas.width/2;
var midY = versionStatusCanvas.height/2
for(var i=0; i<versionStatusChart.segments.length; i++){
    versionStatusCtx.fillStyle="white";
    var textSize = versionStatusCanvas.width/20;
    versionStatusCtx.font= textSize+"px Verdana";
    // Get needed variables
    var value = versionStatusChart.segments[i].value + '%';
    var startAngle = versionStatusChart.segments[i].startAngle;
    var endAngle = versionStatusChart.segments[i].endAngle;
    var middleAngle = startAngle + ((endAngle - startAngle)/2);

    // Compute text location
    var posX = (radius/2) * Math.cos(middleAngle) + midX;
    var posY = (radius/2) * Math.sin(middleAngle) + midY;

    // Text offside by middle
    var w_offset = versionStatusCtx.measureText(value).width/2;
    var h_offset = textSize/4;
    if(value != '0.0%')
    versionStatusCtx.fillText(value, posX - w_offset, posY + h_offset);
}
}
}

The values are passed from the php controller in JSON. i have tried various methods to get this working but I am not able to do it. Any assistance would be appreciated.

Upvotes: 1

Views: 298

Answers (1)

Sterling Beason
Sterling Beason

Reputation: 640

Try this:

if(parseInt(value) > 0)
    versionStatusCtx.fillText(value, posX - w_offset, posY + h_offset);
}

parseInt(value) parses the value to an int to compare to zero. Previously in the code the value joined a % symbol to the value making it a string.

Upvotes: 3

Related Questions