1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    35
    Vote Rating
    0
    jakejamessteele is an unknown quantity at this point

      0  

    Default Adding Error Bars to Chart?

    Adding Error Bars to Chart?


    I have a working column chart, but I need to display error bars. For anyone who doesn't know what error bars are they are:

    http://support2.dundas.com/onlinedocumentation/webchart2005/ChartType_Images/ErrorBarsChart.png

    Was wondering the best method to go about doing this? Even if you don't post code would be helpful to get some pseudo code that would lead me in the right direction.

    Thanks,
    Jacob

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      1  

    Default


    Quote Originally Posted by jakejamessteele View Post
    I have a working column chart, but I need to display error bars. For anyone who doesn't know what error bars are they are:

    http://support2.dundas.com/onlinedocumentation/webchart2005/ChartType_Images/ErrorBarsChart.png

    Was wondering the best method to go about doing this? Even if you don't post code would be helpful to get some pseudo code that would lead me in the right direction.

    Thanks,
    Jacob
    I would imagine the answer would be to create a custom series. I haven't done much of anything with charts, so I can't really speak to anything beyond that. However, you might take a look at http://www.sencha.com/forum/showthre...PI-Gauge/page2. While it's certainly not what you're after, it does show how custom series can be created, and might give some inspiration for how to approach making your own for this particular scenario.

    If you do create one, please share with the community if you can--i'm sure there are others that could benefit from your work!

    Good luck!
    Before pasting your code, see if you can make a working example using Sencha Fiddle: https://fiddle.sencha.com/

    Not only will it let everyone see what you're talking about with their own eyes, but it also makes debugging your issue 19 billion times easier

    Embedding your newly created Fiddle is super-easy: Using Sencha Fiddle in the Forums

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    35
    Vote Rating
    0
    jakejamessteele is an unknown quantity at this point

      0  

    Default


    Thanks mate, I ended up creating a custom series for Cartesian that displays line bars when you send in a errorBarsCfg object

  4. #4
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Awesome, glad you figured it out!

    Anyway you can share your solution with the community? I imagine that there may be others who could benefit from what you've figured out.

    Thanks!
    Before pasting your code, see if you can make a working example using Sencha Fiddle: https://fiddle.sencha.com/

    Not only will it let everyone see what you're talking about with their own eyes, but it also makes debugging your issue 19 billion times easier

    Embedding your newly created Fiddle is super-easy: Using Sencha Fiddle in the Forums

  5. #5
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,294
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    It would be much more efficient to draw the error lines instead of creating a fake series.

    You would need to use the Ext.draw package

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    35
    Vote Rating
    0
    jakejamessteele is an unknown quantity at this point

      0  

    Default


    Hey,

    I cant post all the code as I wrote it while at work haha so I don't own the rights. But I will say that I do use the Draw class, I just added a method to Cartesian and called it.

    Small look at the vertical bars, the x,y are grabbed from the chart's path variable.

    Code:
    me.errorBars.push(Ext.create('Ext.draw.Sprite', {
                                    type: 'path',
                                    path: ['M', x, y, 'V', parseInt(y - ((me.errorBarsCfg.amount * me.errorSize) / 2)), 'H', parseInt(x - 10), 'H', parseInt(x + 10), 'H', x, 'Z', 'V', parseInt(y + ((me.errorBarsCfg.amount * me.errorSize) / 2)), 'H', parseInt(x - 10), 'H', parseInt(x + 10)],
                                    stroke: me.errorBarsCfg.stroke,
                                    'stroke-width': me.errorBarsCfg['stroke-width'],
                                    zIndex: 5000
                                }));
    You would still need to call .show() on this as well.

Thread Participants: 2