Pie charts now here

[nos]

The first I have to say that Flot is outstanding product. But I missed
pie charts and decided don't wait for author and take my needs in my
hands.

I present you my implementation of pie chart with Flot.

There is example:
http://javascript.cooldev.com/flot-pie/

Modified source:
http://javascript.cooldev.com/flot-pie/jquery.flot.pie.js

the same but packed:
http://javascript.cooldev.com/flot-pie/jquery.flot.pie.pack.js

Archived example:
http://javascript.cooldev.com/flot-pie/FlotPie.zip

Data array format:
[
{ label: "Serie1", data: 10},
{ label: "Serie2", data: 30},
{ label: "Serie3", data: 90},
{ label: "Serie4", data: 70},
{ label: "Serie5", data: 80},
{ label: "Serie6", data: 110}
]

Configuration options:

pie: {

show: true,
pieStrokeLineWidth: 1,
pieStrokeColor: '#FFF',
pieChartRadius: 100, // by default it calculated by
centerOffsetTop:30, // top offset of pie center
centerOffsetLeft:30, // if 'auto' and legend position is "nw" then
centerOffsetLeft is equal a width of legend.
showLabel: true, //use ".pieLabel div" to format looks of labels
labelOffsetFactor: 5/6, // part of radius (default 5/6)
labelOffset: 0 // offset in pixels if > 0 then
labelOffsetFactor is ignored
labelBackgroundOpacity: 0.55, // default is 0.85
labelFormatter: function(serie){// default formatter is "serie.label"
//return serie.label;
//return serie.data;
return serie.label+'<br/>'+Math.round(serie.percent)+'%';
}

}


Sergey Nosenko
#javascript navigation for your sites
http://javascript.cooldev.com

[Woody Gilk]

Hooray! This looks fantastic! Hopefully Ole won't have any issues
merging it into trunk.

-Woody

--
wgilk design and blog [ http://www.wgilk.com ]
follower of the fat penguin [ http://www.linux.org ]

[timothytoe]

I made a pie chart, too. You might like to try what I did--make your
radial label offset factor vary according to the size of the slice.
That way, the label moves in for thick slices and out for fat slices.

Eventually, we might want to also support labels external to the pie
with lines in to the pie.

My pies also have a drop shadow.

[timothytoe]

I said that backwards. You want the labels to move in for fat slices
and out for thin slices.

[nos]

You can try something like:

var data = [
{label:'serie 1', labelOffset:v1>100?120:80, data:v1}

> > > follower of the fat penguin [http://www.linux.org]- Скрыть цитируемый текст -
>
> - Показать цитируемый текст -

[Ben Bangert]

Is it possible to click on regions and figure out what region was
clicked on? If so, could you show an example?

Thanks,
Ben