RedGiant RedGiant - 1 month ago 12
HTML Question

Setting multiple if conditions with a jQuery chart plugin called piety

Fiddle example

I want to use different color combinations in a small chart plugin called piety
The document shows this code to set different colors of a pie chart:

$(".bar-colours-1").peity("bar", {
fill: ["red", "green", "blue"]
});

$(".bar-colours-2").peity("bar", {
fill: function(value) {
return value > 0 ? "green" : "red";
}
});

$(".bar-colours-3").peity("bar", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255);
return "rgb(255, " + g + ", 0)";
}
});

$(".pie-colours-1").peity("pie", {
fill: ["cyan", "magenta", "yellow", "black"]
});

$(".pie-colours-2").peity("pie", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255);
return "rgb(255, " + g + ", 0)";
}
});


Would it be possible to use multiple if conditions to render the chart in different color combinations based on the values?

Failed code:

$(".score").peity("pie", {
fill: function(value) {
if(value > 0){
return value ["#c6d9fd", "#ff9900"];
}
else if(value > 200){
return value ["#BFE5E5","#46ECA0"];
}
else if(value > 300){
return value ["#BAAB48","#E7F94A"];
}
}
});


HTML:

<span class='score'>5/150</span>
<span class='score'>220/250</span>
<span class='score'>320/350</span>

Answer

I responded to your GitHub issue thusly:

Hi, I've modified your fiddle: http://jsfiddle.net/benpickles/0ejq9qdL/

When passing a function to fill it's called for each value in the chart and should respond with a single colour for the particular slice/bar.

Get back to me if you have any further questions.