Added an option to the piechart named preserveOrder to allow users to preserve the order of the values provided so that the pie section colors are always consistent.

This is a non breaking change as the default value is falsy, whereas https://github.com/DmitryBaranovskiy/g.raphael/pull/176 and #79 will break existing functionality

When I create a pie chart, it doesn't seem capable of creating more than 10 sectors. Please let me know as soon as possible what I'm doing wrong. It draws a piechart, and it does everything perfectly... for ten sectors only. I want to be able to create a dynamic pie chart, where a slice is created for every directorate in my company, and there are 18. Thankyou in advance.

Here is my code, most of which is taken from raphael's site:

// Creates canvas 640 × 480 at 10, 50 var r = Raphael(10, 50, 640, 480); // Creates pie chart at with center at 320, 200, // radius 100 and data: [55, 20, 13, 32, 5, 1, 2] var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 25, 20, 15, 11, 14, 16]);

pie.hover(function () { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy); },

function () { this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce"); })//this is the end of pie.hover

hi dmitry,

here's the set of documentation for g.raphael (pretty basic outline, some in-depth coverage for g.line.js and g.pie.js). perhaps this can be helpful to beginners in getting started. will work on getting more examples up and elaborate on g.dot.js, and g.barchart.js in the next few weeks, plus cover some of the helper functions in g.raphael.js.

let me know what's missing and how i might improve this further.

thanks! kenny

I'm running into a weird bug: I am not able to have more than one chart per page. If I delete the call to the first pie, than the second shows up, and so on.

Is there a limitation for the number of piecharts we can have in a page?

See this screenshot:

http://cl.ly/2g2T2z1D2G3X3x032r0I

With this code:

var data = {
  items: [
    {label: 'One', data: 12015},
    {label: 'Two', data: 23834},
    {label: 'Three', data: 24689}
  ]
};

//Push our data into two separate arrays
var labels = [];
var values = [];
 for (i in data.items) {
   var item = data.items[i];
   labels.push(item.label);
   values.push(item.data);
 }

var r = Raphael("pie_chart");
var pie = r.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});

var r_two = Raphael("pie_chart_two");
var pie_two = r_two.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});

var r_three = Raphael("pie_chart_three");
var pie_three = r_three.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});

This branch contains a fix for #11.

The bug is that we get a crash when attempting to label bar graphs:

Uncaught exception: TypeError: Cannot convert 'v[x*(B||1)+s]' to object

Error thrown at line 7, column 3997 in (y, S) in http://localhost:8000/media/js/g.bar-min.js:
    T=c.g.text(v[x*(B||1)+s].x,S?A+d-g/2:v[x*(B||1)+s].y-10,U).insertBefore(e[x*(B||1)+s]);
called from line 19, column 6 in () in http://localhost:8000/blog/:
    chart.label(labels);
called from line 26, column 212 in () in http://localhost:8000/media/js/jquery-1.4.1.min.js:
    a.call(r,c);
called via Function.prototype.call() from line 33, column 9 in () in http://localhost:8000/media/js/jquery-1.4.1.min.js:
    c.ready()

The problem was simply that a set of variable assignments were misordered: multi = len; len = 0;

I've fixed both g.bar.js and g.bar-min.js

Hi,

I wanted to see what your charts look like, but they don't show up on the demo website :

http://g.raphaeljs.com/piechart.html http://g.raphaeljs.com/piechart2.html http://g.raphaeljs.com/barchart.html http://g.raphaeljs.com/barchart2.html http://g.raphaeljs.com/linechart.html http://g.raphaeljs.com/dotchart.html http://g.raphaeljs.com/basic.html

I'm using chrome 15 under Ubuntu 11.10 64b.

Cheers ;)

This is a port of g.Raphael to make it compatible with Raphael 2.0 by completely removing the g namespace from the Paper prototype.

This was achieved by doing two things:

• Hiding all utility functions inside function closures
• Moving all of the tooltip functions into the main Raphael repo as plugins, similar to what was done with the primitives plugin [see pull request: https://github.com/DmitryBaranovskiy/raphael/pull/429 ]

In order to make g.Raphael have a small footprint on the host Raphael instance, only the functions barchart, hbarchart, piechart, linechart, and dotchart are attached to the fn object. Each function retains its original parameters and options, with one change: There is no more g.marker object. Instead, the graph functions defer to the paper instance for function names. This means that you can use any function on the Paper prototype or instance as your marker function by simply supplying that function's name as the marker option.

This refactor lead to a few noteworthy changes in the code base. First, the g.raphael.js file has been deleted. All of its contents were either moved into function closures for the graph types that required them or were moved into the main Raphael repo as a plugin package.

As a result of this, each chart file has grown slightly larger in file size. This also means that there is some duplication of code between some of the graphs (bar and pie share equivalent definitions of snapEnds and _axis functions), but this was chosen to make each graph only dependent on the raphael.js library file (unless you want to use some of the shapes defined in the primatives or tooltips plugins as markers for your graphs).

All original examples from http://g.raphaeljs.com/ are working as before. They are located in the test/ directory and can be temporarily viewed here: http://www.srsfknbzns.com/graphael/test/

In order to make tests easily work, I've included my fork of the main Raphael repository with the tooltips plugin as a git submodule (make sure it is set to the 'tooltips' branch if you check it out). In its current state, this pull request depends on my pull request that was made to the Raphael repository. If, instead, you would rather have the tooltips and brightness plugins shipped with g.Raphael instead of Raphael, then they can be easily moved back into here making this pull request no longer have any dependencies.

With the new Raphaël (v2.0) all the charts are not drawn. The problem is due to an infinite loop.

Temporary workarond: With the old Raphaël ver all works fine!

This commit adds 4 new options: minx, miny, maxx, maxy, which override the implicitly calculated bounds. The need arose from wanting to show a line graph of percentages which were all in a smaller range (60–80%), and still give the context of 0–100%.

Hi Dmitry, Here is an small improvement to linechart, it add support to change the alpha for each shade. Some colors don't look good at .3 alpha.

Cheers, Fabiano

I'm trying to render a dotchart in IE8 which is failing with an infinite loop because when calling var xdim = this.g.snapEnds(Math.min.apply(Math, valuesx), Math.max.apply(Math, valuesx), valuesx.length - 1)

in line 15 of g.dot.js. Specifically, the bug arises because Math.min.apply & Math.max.apply are returning NaN when passed the following array as data.

valuesx = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

• When the length of data is 1, it draws a path instead of a circle so hover functionality to use this.sector will work the same as if there are multiple slices. (line 85 - 102)
• Fix drawing when a single value equals the total. Prior, it did not draw the chart. This change draws a circle path. (line 134, 147-162)
• Added an additional option to ignore the min percentage and show all values. Passing in a min-percent as 0 to show all values and evaluating Boolean( minPercent ) is still false, so it didn’t show all values. Passing in in opts.ignoreMinPercent allows you to evaluate it correctly. (line 61)

Fixes #88

I realize this is unlikely to ever get pulled, but I ran into an old project that relied on g.raphael and experienced this bug. In case anyone else might benefit from this...

Hello. Do not get to do one legend on two or more diagrams. pie2 = r.piechart(545, 440, 25, [0, 22.22, 22.22, 11.11, 44.44]); pie = r.piechart(490, 540, 25, [0, 0, 12.5, 25, 62.5], { legend: ["-20%", "21 - 40 %", "41 - 60 %", "61 - 80 %", "81 - 100 %"], colors: [ "#475664", "#8C5F66", "#DB7369", "#F29961", "#F0B165" ], legendpos: "west", legendothers: "Другие", });

for(var i = 0, l = pie.labels.length; i < l; i++ ) {
        pie.labels[i].attr("font", "13px sans-serif");
        pie.labels[i].attr("x", 230+20);
        pie.labels[i].attr("cx", 230);
        pie.labels[i].attr("y", 535+i*20);
        pie.labels[i].attr("cy", 535+i*20);
        pie.labels[i][1].attr( "fill", "#000000" );
    }

pie.hover(function () { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy);

                if (this.label) {
                    this.label[0].stop();
                    this.label[0].attr({ r: 7.5 });
                    this.label[1].attr({ "font-weight": 800 });
                }
            }, function () {
                this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                if (this.label) {
                    this.label[0].animate({ r: 5 }, 500, "bounce");
                    this.label[1].attr({ "font-weight": 400 });
                }
            });

            pie2.hover(function () {
                this.sector.stop();
                this.sector.scale(1.1, 1.1, pie2.cx, pie2.cy);

                pie.labels[1].stop();
                pie.labels[1].attr({ r: 7.5 });
                pie.labels[1].attr({ "font-weight": 800 });

            }, function () {
                this.sector.animate({ transform: 's1 1 ' + pie2.cx + ' ' + pie2.cy }, 500, "bounce");

                pie.labels[1].animate({ r: 5 }, 500, "bounce");
                pie.labels[1].attr({ "font-weight": 400 });

            });

I've added a new file: g.donut.js similar with g.pie.js and a testing one: donutchart.html

I've also resolved two bugs (only for these two files): Bug 1: if you test piechart2.html with opt.init = true, the hover events are not working. Bug 2: Also testing piechart2.html: applying a stress test for hoverIn and hoverOut will make the sectors to scale more than 1.1.

There are something important only seen in the script of DEMOs. Like:

piechart.sector piechart.label

or

element.insertBefore element.insertAfter element.tear

and so on...

Please write them and anything unseen in the documentation but useful and necessary into the DOCUMENTATION IN THE RAPHAEL.COM

THANKS!!!

Hi Dmitry.

I'm just writing a public letter to you. Seems like you have many interesting things in your life. But this project is forgotten and it's miss you. More than 50 PRs (not all ideal) are waiting and may be they are never will be merged :(

What do you think if this repo will be added some top contributors to write access mode? Then this "write board" could clean up PRs with good ideas/fixes.

Have a nice twenty for hours :)