PieGraph Options

[CSM]

This was written just for the hell of it. Enjoy.



Download PieGraph.js (right-click, save [link] as).

Sample usage:

CODE

var window = new Window();
var items = {"Widgets": 5, "More Widgets": 35, "Also Widgets": 20, "Bucket 'o Widgets": 10, "Desktop Widgets": 30}
var graph = new PieGraph(window, "3d", items, {});
graph.width = 100;
graph.height = 100;
graph.hOffset = 0;
graph.vOffset = 0;

// Extract and show the legend
var legend = graph.getLegend();
legend.hOffset = graph.width + 7;
legend.parent = window;

graph.suppressUpdates = true;
items["Widgets"] = 7;
items["More Widgets"] = 33;
graph.suppressUpdates = false;
graph.paintGraph();

For those that don't want the 3d perspective view, there's a "2d" mode as well, which draws the PieGraph as a flat circle. If you don't want a key, don't give the legend a parent frame/window.

Now includes properties for "borderColor", "style", and "labelType". The border color is for the lines between the slices and border around the legend squares. The style property should be a real Style object, so just create a dummy Text object set its properties and pass it in. The "labelType" property can be one of PieGraph.NONE, PieGraph.PERCENT, and PieGraph.VALUE. They show just the text, text + percentage of whole, and text + given value, respectively.

There are two convenience methods, setColor(key, colorValue) and setSlice(key, value). These update the stored values for each and repaints the graph.

If you don't like the colors generated by the PieGraph, you can optionally provide your own via the constructor:

CODE

var items = {"Widgets": 5, "More Widgets": 35, "Also Widgets": 20, "Bucket 'o Widgets": 10, "Desktop Widgets": 30}
var graph = new PieGraph(new Window(), "3d", items, {"Widgets": "blue"});

You are not required to specify a color for each slice, slices without an associated color will have one generated.

[g6auc]

This was written just for the hell of it. Enjoy.

Very nice!

There's some pre-Canvas and other work here, if you need something to do.

[VFRDaddy]

This is really good and extremely useful.

I wrote something similar in Flash with some animations and other choices that I thought I would throw out there for possible inclusion
- The ability to choose the colors for each option/pie piece
- A MouseOver Animation that lifts the pie piece up in the chart when hovered (also displays a tooltip for when the legend is not visible)
- Ability to change the label types i.e. Total Votes vs. Percentages
- Ability to change Text Color and Styling
- Ability to change the piece borders
- Toggle a shadow on the 3d Chart ~ right now a shadow effects both the text and chart

Hope this helps.

[CSM]

- The ability to choose the colors for each option/pie piece

Not in there for now, until I can add it in nicely.

- A MouseOver Animation that lifts the pie piece up in the chart when hovered (also displays a tooltip for when the legend is not visible)

That's hard. It's all one Canvas, so I'd have to determine where you are on the Canvas, and since I do a scale ...

- Ability to change the label types i.e. Total Votes vs. Percentages

1/2 done. You can disable the percentages in the legend now. Since the values given to the PieGraph have to be out of 100 already, I don't think your "totalVotes" is possible, unless you mean just display without the % sign.

- Ability to change Text Color and Styling

Done. Just set the "style" property to a style prepared on a dummy Text object.

- Ability to change the piece borders

Done. Just set "borderColor" property.

- Toggle a shadow on the 3d Chart ~ right now a shadow effects both the text and chart

That's because a Window puts the shadow on the whole internal Frame's contents. I can't control Y!WE's shadow any more than you can (and I have terrible luck at making my own "realistic" ones).

Hope this helps.

Definitely.

I also fixed a bug Harry notified me about, I used the variable "i" in a sub-loop of a loop using "i" already. It didn't cause issues because the outer loop was a for-each loop, which is unaffected by changes to its "counter" variable.

I also had to host the script on my website now because the forum was bitching about mismatched bbcode tags (probably the [i] I use everywhere).

There's some pre-Canvas and other work here, if you need something to do.

Well, I don't know ... he could have done it with Canvas. How much time do you think I have? Most of those don't look hard, but there's probably more than meets the eye.

[CSM]

I updated PieGraph again ... it now calculates the percentages based on the total, not an assumed 100. As a result, I removed showPercentages and changed it to labelType. "labelType" can be one of NONE, PERCENT, VALUE. These are obtained from either PieGraph (PieGraph.NONE) or off of an instance of PieGraph. Default is NONE.

[CSM]

Updated for hopefully the last time. Now the last parameter of the constructor takes a map that maps the slice names to their color. If a color is not given for a slice, it is generated (like before). Beware, no checking is done to ensure that the hues of the generated values are far enough away from any user-defined colors.

I also added two convenience functions: setSlice and setColor. Both take the slice name and a value. I added them in case you pass the values directly to the constructor (like the example) and don't want to keep more than one reference around (the graph).

[VFRDaddy]

My comment on the shadow for the pie chart shadow was more looking at splitting the pie chart and the legend into two separate canvases.

That way the legend could be easily toggled, the shadow would be specific to the pie chart, the legend could be scaled independently, and the legend could be placed at different points in the window.

Really like the new changes.

To do the animated pie pieces, each piece would need to be split into separate canvas pieces, then it would be possible to detect the MouseOver/Out and place the tooltip ~

Like I said, had to do this already in Flash so I tackled most of the issues... I know it sucks.

[CSM]

My comment on the shadow for the pie chart shadow was more looking at splitting the pie chart and the legend into two separate canvases.

That way the legend could be easily toggled, the shadow would be specific to the pie chart, the legend could be scaled independently, and the legend could be placed at different points in the window.

Done. See first post.

Really like the new changes.

Thanks

To do the animated pie pieces, each piece would need to be split into separate canvas pieces, then it would be possible to detect the MouseOver/Out and place the tooltip ~

*shudder* 1 Canvas per piece. ew.

Like I said, had to do this already in Flash so I tackled most of the issues... I know it sucks.

Canvas > Flash

[VFRDaddy]

Awesome!

[Indiana]

Thanks, I currently work on a PieChart in Objective-C .. that helps much.

[CSM]

Some hints for you then (or explanations, depending on how you see it) from when I was making this ...

The 2d pie-graph was easy, I use Canvas to keep track of rotation, so I draw each slice as if it was at the start location, but because I rotated the context, it actually draws at the location I want.

The 3d pie-graph actually draws two pies, but one is quite interesting looking. The top one is the same as the 2d pie-graph, but the bottom one (which is drawn first) has to draw the vertical lines for the sections. As a result, it needs be able to draw an absolutely vertical line. If I had used the context-rotation approach, this would be near impossible (I tried loads of combinations, none worked right). However, if you keep track of the rotation yourself (the current arc is from totalArcSoFar to totalArcSoFar + myArcLength) you don't need to rotate the context, and going from (x,y) to (x,y-a) really is "up" on the screen, and not "up" relative to the rotation.

Also, because my PieGraph in 3d is really an illusion (it's not a true 3d object), it has a minimum value for which the illusion stops working (when you can tell I cheated). Fortunately for me, you have to have a graph size of about 50px before it starts to be really noticeable. Decreasing my internal "pieHeight" variable will make the graph look better at those tiny sizes.

Some improvements that could be made to your pie-graph (or mine) is to have a random/set rotational offset for the slices, as depending on your data, it might look better without the first slice starting a 0.

[Indiana]

The hint came to late, I already (I direct draw the arc without rotation) had all except the 3d-effect.
And that was easy to find in your code which looks like I had it in mind (some play with lines and calculate the point with sin + cos).
Only the line (you draw a box) on the left side at 180° was new for me.
But If you make the chart bigger you see that there is something wrong on that point :-(
Also I don't have a border, so I have to determine the color on the left side :-(

CODE

CGContextScaleCTM(ctx, 1, 0.3);

float x = rect.size.width / 2;
float y = rect.size.height / 2;
float chartHeight = 0.0; // planned for 3D
float radius = rect.size.width / 2 - chartHeight - 1;

float lastStart = radians( 270 ); // Start at 12 o'clock
float currentEnd = 0;
for(int i = 0; i < [self.data count]; i++) {
    currentEnd = radians([[self.data objectAtIndex:i] floatValue] * 360 / 100 ); // Data contain 100% values, convet to 360°

    // Here was some code to get the color ... just a big switch structure.

    CGContextBeginPath(ctx);
    CGContextMoveToPoint(ctx, x, y); // Got to the center
    CGContextAddArc(ctx, x, y, radius, lastStart, lastStart - currentEnd, 1); // The line to the arc is generated automaticly
    CGContextClosePath(ctx); // The line back to the start(center) us generated automaticly
    CGContextFillPath(ctx); // I use no border!
    
    lastStart -= currentEnd;
}

[CSM]

Whoa. That looks very nice.


To figure out the left most item, just remember the index/name of the slice that causes your total arc so far to be greater than 180 (plus the starting arc location). Then after you're done painting the lower pie, just gob some extra paint at the left. Since my line worked well enough for me, I didn't bother doing/thinking of this when I wrote mine.

[Indiana]

Thx.

I got enlightenment ...

On the left, it was easy: Just a line at (x - radius) and a filled box (to be save i draw it with radius as width)

But on the right it looks really ugly if you scale it grater than 200 pixel .. but it was easy, what else
If arc end is < 0° only draw it until 0° and stop drawing and other arc's :-P



And now with the second pie chart on top ... tadaaa

[CSM]

Nice job.

I find it interesting how even though the Canvas context is 2d, what I ended up drawing for the under-layer of the pie-graph was a pretty convincing 3d anyway (imo).


// Edit:
I noticed before you used a different scale (my .5 versus your .3). Any particular reason or just that it looked better for your graphs (it does)? For mine, (I just tried it) it's a toss-up as to which works best. I could have made it a property, but if you know enough to think about it, you stand to do a little code hacking

[Indiana]

I use .3 to save space because I only have 320x460 Pixel on my iPhone :-P