Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to set the startAngle in pie chart?

  1. #1
    Sencha User
    Join Date
    Jan 2013
    Location
    Singapore
    Posts
    57
    Answers
    2
    Vote Rating
    1
      1  

    Default Answered: How to set the startAngle in pie chart?

    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)

    pie.jpg

    Regards,
    Prabu
    Regards,
    Prabu

  2. 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.

    Code:
                    // 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

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    What version of Ext are you using and where is startAngle coming from?

    Can you share your code?

    Scott.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    I see .. you are using touch charts?

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    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/...-sencha-touch/
    http://blogs.walkingtree.in/2013/04/...m-draw-sprite/

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Location
    Singapore
    Posts
    57
    Answers
    2
    Vote Rating
    1
      0  

    Default

    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
    }]
    });
    Regards,
    Prabu

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    Chennai, India
    Posts
    92
    Answers
    8
    Vote Rating
    5
      0  

    Default

    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.

    Code:
                    // 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

  8. #7
    Sencha User
    Join Date
    Jan 2013
    Location
    Singapore
    Posts
    57
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Thanks Prem.. it works
    Regards,
    Prabu

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Location
    Chennai, India
    Posts
    92
    Answers
    8
    Vote Rating
    5
      0  

    Default

    You are welcome..

  10. #9
    Sencha User
    Join Date
    Jan 2013
    Location
    Singapore
    Posts
    57
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Hi Prem,


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

  11. #10
    Sencha User
    Join Date
    Mar 2012
    Location
    Chennai, India
    Posts
    92
    Answers
    8
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by mrprabu View Post
    Hi Prem,


    its is starting from anti-clockwise. any suggestion to start from clockwise
    Code:
    //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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •