1 Reply Latest reply on Mar 28, 2008 4:02 PM by Chris_W_Dolan

    Standard Error Bars in charts

      I would like to know if anyone has used std. error bars (as in statistics) in column or bar charts and how that was accomplished. I didn't see anything about it in the flex docs.
        • 1. Re: Standard Error Bars in charts

          Frustrating that these aren't included by default, isn't it...
          I'm sure the questioner long since has solved his problem or given up, but since I've been unable to find any solutions myself and have had to reinvent the wheel, I'll try and point anyone else looking in the right direction.

          One way to do it is to create your own IDataRenderer (or extend or facade an existing one). You'll want to make sure you're passing a standard deviation as part of your series data and then in the updateDisplayList method draw it yourself, grabbing the deviation from the data.item. You'll need to scale it appropriately... for instance, extend CircleItemRenderer and add an updateDisplayList along the lines of:

          override protected function updateDisplayList(unscaledWidth:Number,
          super.updateDisplayList(unscaledWidth, unscaledHeight);
          if (data.hasOwnProperty('item') && data.item.hasOwnProperty('deviation')) {
          // figure out the scale (I'm certain there must be a more appropriate way to do this)
          var scale:Number = data.y / data.item.value;
          var deviation:Number = data.item.deviation as Number;
          var g:Graphics = graphics;
          var stroke:IStroke= new Stroke(0,1,1,false,'normal','square');
          // figure out the center
          var trueX:Number = unscaledWidth / 2 - .5; // otherwise seems to be off to the side, for me
          var trueY:Number = unscaledHeight / 2;
          // draw the error bar
          g.moveTo(trueX,-(deviation * scale) + trueY);
          g.lineTo(trueX,(deviation * scale) + trueY);
          g.moveTo(trueX, trueY);
          // draw little T's on the end of the error bar
          g.moveTo(trueX -2, -(deviation * scale) + trueY);
          g.lineTo(trueX +2, -(deviation * scale) + trueY);
          g.moveTo(trueX -2, (deviation * scale) + trueY);
          g.lineTo(trueX +2, (deviation * scale) + trueY);

          From there you should be able to futz with it to make it look pretty.

          Hope someone finds this helpful.