CODEWITHSUNDEEP
javascriptsvgraphaelgraphael
Joe Dreimann
Joe Dreimann

Reputation: 279

How can I set g.raphaeljs piechart orientation or starting point?

By default g.raphaeljs piecharts show the largest value stretching from the top of the chart equally in both directions, with smaller values shown clockwise.

In the image below the largest value (1) starts at about 7 o'clock. I would like to show the largest value starting at 12 o'clock instead, how can that be done?

Default behaviour Target behaviour

Upvotes: 2

Views: 1672

Answers (2)

Sean
Sean

Reputation: 31

The solution above is overly complicated and breaks any animation efforts dependent upon mangle (such as the one found here: RaphaelJs Pie Chart Animation on Hover). A single line change is sufficient if all you want is a fixed start angle, but if you want to use an argument as above you would replace

     if (!i) {
       angle = 90 - mangle;
       mangle = angle - 360 * values[i] / total / 2;
     }

with

     if (!i) {
       if (opts.startFromFixedAngle) {
         angle = opts.startFromFixedAngle;
       } else {
         angle = 90 - mangle;
       }
       mangle = angle - 360 * values[i] / total / 2;
     }

In my case, I just wanted all pie charts to begin at the 90 degree mark so I simply removed "- mangle" from the code in the first block.

Upvotes: 3

Daniel
Daniel

Reputation: 37051

Ok , found it (and it works 100%)... over here: Added opts.startFromFixedAngle, so the 1st pie-slice will start paint…

Here is a working jsfiddle I just did : g raphael pie with starting angle set to 90

Don't forget to use the new argument startFromFixedAngle

Here is the code...

Apply the following to your g.pie.js

replace 

 angle = 0,

with 

 angle = opts.startFromFixedAngle || 0,

remove

 var mangle = angle - 360 * values[i] / total / 2;
 if (!i) {
     angle = 90 - mangle;

add

 var mangle;
 if (opts.startFromFixedAngle)
     mangle = angle + 360 * values[i] / total / 2;
 else {
     mangle = angle - 360 * values[i] / total / 2;
     if (!i) {
         angle = 90 - mangle;
         mangle = angle - 360 * values[i] / total / 2;
     }

Upvotes: 6

Related Questions