Pie charts now here

687 views
Skip to first unread message

nos

unread,
Mar 20, 2008, 10:11:56 PM3/20/08
to Flot graphs
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

unread,
Mar 21, 2008, 8:05:21 AM3/21/08
to flot-...@googlegroups.com
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

unread,
Mar 21, 2008, 10:09:51 AM3/21/08
to Flot graphs
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

unread,
Mar 21, 2008, 10:56:41 AM3/21/08
to Flot graphs
I said that backwards. You want the labels to move in for fat slices
and out for thin slices.

nos

unread,
Mar 21, 2008, 11:11:40 AM3/21/08
to Flot graphs
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

unread,
Apr 11, 2008, 7:38:12 PM4/11/08
to Flot graphs
Is it possible to click on regions and figure out what region was
clicked on? If so, could you show an example?

Thanks,
Ben
Reply all
Reply to author
Forward
0 new messages