3 Replies Latest reply on Dec 1, 2009 8:42 PM by niangao

    Can I assign different color to a series part by part in LineChart?

    niangao

      I have a scenario that I need to change the color for a part of a series in a LineChart, and then with

      the corresponding Legend.

       

      for example,  the X-axis data of the chart is from 1 to 20,

      I would like to change the color of the series within the range 1 to 10 to red,

      range 10 to 15 to green, etc...

       

      Any ideas?

        • 1. Re: Can I assign different color to a series part by part in LineChart?
          Subeesh Arakkan Level 4

          Hi,

           

          Create a custom ItemRenderer for the series and do your colouring logic inside the renderer.

           

          Check this example

           

          http://cookbooks.adobe.com/post_Using_a_programmatic_renderer_in_your_ColumnChart-2021.htm l

          • 2. Re: Can I assign different color to a series part by part in LineChart?
            Subeesh Arakkan Level 4

            Hi,

             

            Check this custom renderer class. Use it as the lineSegmentRenderer.  This will atleast get you started

             

            <mx:LineSeries lineSegmentRenderer="CustomLineRenderer"/>
            

             

            package
            {
                import mx.charts.series.items.LineSeriesItem;
                import mx.core.IDataRenderer;
                import mx.skins.ProgrammaticSkin;

             

                public class CustomLineRenderer extends ProgrammaticSkin implements IDataRenderer
                {
                    private var _segment:Object;

             

                    public function get data():Object
                    {
                        return _segment;
                    }

             

                    public function set data(value:Object):void
                    {
                        _segment = value.element;
                        invalidateDisplayList();
                    }

             

                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                    {
                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                        graphics.clear();
                        var items:Array = _segment.items as Array;
                        for (var i:int = 0; i < items.length; i++)
                        {
                            var item:LineSeriesItem = items[i] as LineSeriesItem;
                            graphics.lineStyle(3, getColor(item.yValue as int), 1);
                            if (i == 0)
                                graphics.moveTo(item.x, item.y);
                            graphics.lineTo(item.x, item.y);
                        }
                    }

             

                    private function getColor(value:int):uint
                    {
                        var color:uint = 0x000000;
                        if (value > 1900)
                            color = 0xFF0000;
                        else if (value > 1600)
                            color = 0xFF0000;
                        else if (value > 1400)
                            color = 0x00FF00;
                        else if (value > 900)
                            color = 0x0000FF;
                        return color;
                    }
                }
            }

            1 person found this helpful
            • 3. Re: Can I assign different color to a series part by part in LineChart?
              niangao Level 1

              Thanks a lot, I am trying to figure out this problem with your help.