1

I am having an issue with raphael pie charts. The data I am using is dynamic, and in some instances, only 1 value is returned, meaning the whole chart is filled, as it is the ONLY slice. The problem is that when there is only 1 value, it ignores my color designation.

For example: Below is the creation of a raphael pie chart with 2 values, and each slice has the proper color designated in the "colors" section:

var r = Raphael("holder");  
r.piechart(160, 136, 120, [100,200],{colors: ["#000","#cecece"]});

This works fine, and I get two properly sized slices, one black, and one grey.

However the example below creates one full pie, ALWAYS filled with blue, regardless of my color setting.

var r = Raphael("holder");  
r.piechart(160, 136, 120, [100],{colors: ["#000"]});

In this situation, I really need that full pie to be black, as it is set in "colors"

Am I doing something wrong, or is this a bug?

Daniel
  • 36,833
  • 10
  • 119
  • 200
livinzlife
  • 863
  • 3
  • 17
  • 33

3 Answers3

2

INMO its a bug cause when the pie got only one slice its color is hard coded...

Here is how I solved it (all I did is use the colors arg if it exist...)

in g.pie.js after line 47 add this

var my_color =  chartinst.colors[0];
if(opts.colors !== undefined){
    my_color =  opts.colors[0];
}

then in the following line (line 48 in the original js file)

series.push(paper.circle(cx, cy, r).attr({ fill: chartinst.colors[0]....

replace the chartinst.colors[0] with my_color

that's it

   if (len == 1) {
        var my_color =  chartinst.colors[0];
        if(opts.colors !== undefined){
            my_color =  opts.colors[0];
        }
        series.push(paper.circle(cx, cy, r).attr({ fill: my_color,   ....
Daniel
  • 36,833
  • 10
  • 119
  • 200
0

You've probably figured this out on your own since this question is already a day old... but you can "trick" Raphael into rendering a black unit by special-casing datasets of one to add an infinitesimal second value. So, given an array data with your data points...

if ( data.length == 1 )
    data.push( 0.000001 );

canvas.piechart(250, 250, 120, data, {colors: ["#000", "#CECECE", "#F88" /*, ... */ ] });

The tiny sliver will still be rendered as a single-pixel line in the 180 degree position, but you could probably fudge that by playing with your color palette.

Yes, it's a trick. I don't believe gRaphael's behavior is buggy so much as poorly implemented (single-element datasets are obviously special cased since they produce a circle instead of a path as they would in all other cases).

Kevin Nielsen
  • 4,413
  • 21
  • 26
0

Easy way for me without edit g.pie.js

var r = Raphael('st_diagram');

r.piechart(140, 140, 137, 100, 0.0001],{

        colors:['#9ae013','#9ae013'],
        strokewidth: 0
    });
MegaJoe
  • 575
  • 6
  • 11