PDA

View Full Version : How to set the startAngle in pie chart?



mrprabu
21 Feb 2014, 1:40 AM
Hi,

How to start start angle in pie chart, Kindly refer below my pie chart image, I have to set the start angle from red arrow position (green area should start from there)

47993

Regards,
Prabu

scottmartin
21 Feb 2014, 5:14 AM
What version of Ext are you using and where is startAngle coming from?

Can you share your code?

Scott.

scottmartin
21 Feb 2014, 5:15 AM
I see .. you are using touch charts?

scottmartin
21 Feb 2014, 5:38 AM
In reviewing this, those properties for creating custom sprites on the chart, and are not going to affect the chart series.

Here are a few good articles that explain this better:
http://blogs.walkingtree.in/2013/04/20/using-draw-package-in-sencha-touch/
http://blogs.walkingtree.in/2013/04/27/creating-a-custom-draw-sprite/

mrprabu
23 Feb 2014, 7:26 PM
Dear Scott,

I am using default ext chart only not touch chart. Here I placed my code

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 2 },
{ 'name': 'metric two', 'data': 12 }
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
donut:80,
colorSet : ['#a2c94c','#666666'],
highlight:false,
animate: false,
showInLegend: false
}]
});

a.premkumar
24 Feb 2014, 4:46 AM
Hi Prabu,

I was trying the same thing. Regarding to change the starting point of the Pie, You have to override the 'drawSeries()' function of pie series. Here I give you a snippet that might help you.



// First slice

if (first == 1) {
first = 2;
me.firstAngle = angle = me.accuracy * value/ totalField/ 2;

// Find this part of code on the drawSeries function of your Pie series.
// You have to include the below line of code. To change the starting point.

angle = -25000;

for (j = 0; j < i; j++) {
slices[j].startAngle = slices[j].endAngle = me.firstAngle;
}
}

// And see in the below line, I have changed the negative sign to positive.
// This is to change the render direction of chart from anti-clockwise to clockwise.

//endAngle = angle - me.accuracy * value / totalField;
endAngle = angle + me.accuracy * value / totalField;



Regards,
Premkumar. A

mrprabu
24 Feb 2014, 8:16 PM
Thanks Prem.. it works

a.premkumar
24 Feb 2014, 8:57 PM
You are welcome..:)

mrprabu
25 Feb 2014, 12:44 AM
Hi Prem,


its is starting from anti-clockwise. any suggestion to start from clockwise

a.premkumar
25 Feb 2014, 9:17 PM
Hi Prem,


its is starting from anti-clockwise. any suggestion to start from clockwise




//endAngle = angle - me.accuracy * value / totalField;

endAngle = angle + me.accuracy * value / totalField;



Please find the above code in drawSeries function. Change the negative sign to plus. It will turn the chart from anti-clockwise to clockwise.

Regards,
Premkumar. A

mrprabu
25 Feb 2014, 10:37 PM
its works.. Thanks prem

a.premkumar
25 Feb 2014, 11:39 PM
:) Welcome