13 Replies Latest reply on Feb 1, 2012 8:22 AM by kavi.udaya

    Different colors to the same series of Area Chart.

    VladBlinov

      Hello.

       

      How can I implement different colors to the same series of AreaChart.

      Example: http://www.openntf.org/Projects/pmt.nsf/HomeLookup/22DFD8D1A5CEEFBA86257584001725FD/$file/ AreaChart.JPG

       

      I tried to use fillFunction and replace updateDisplayList function in mx.skins.ProgrammaticSkin clas. But it does not work for AreaChart.

      Thank you.

        • 1. Re: Different colors to the same series of Area Chart.
          rtalton Level 4

          You should be able to use the "fills" style of AreaSeries to do this.

          • 2. Re: Different colors to the same series of Area Chart.
            rtalton Level 4

            Oops, it appears that AreaChart ignores the "fills" style, and instead can only use a single "areaFill" style.

            • 3. Re: Different colors to the same series of Area Chart.
              rtalton Level 4

              An update...

              The "fills" style is not ignored, it is used for the chart item renderers, NOT the filled area. The fillFunction affects the chart items, also, NOT the fill area.

              It looks like you would have to modify the AreaSeies' areaRenderer class to get this to work, but areaRenderer is only instantiated once for the entire chart series, so dunno about that.

              Good luck!

              • 4. Re: Different colors to the same series of Area Chart.
                VladBlinov Level 1

                Thank you for your reply).

                I came to the same conclusion. All the methods that I used previously modify item renderers (points on graph), but i need to modify areaRender.

                 

                I created a modified class myRenderer. I need to draw the most colorful segments and I need an array of data - the coordinates on my schedule. All I have is unscaledWidth and unscaledHeight ((parameters updateDisplayList ()), the size of canvas.

                • 5. Re: Different colors to the same series of Area Chart.
                  VladBlinov Level 1

                  Update!

                   

                  God I'm so stupid).

                  mx.skins.ProgrammaticSkin contains:

                   

                  public function get data():Object {

                  return _data;

                  }

                   

                   

                  public function set data(value:Object):void {

                  _data = value;

                  invalidateDisplayList();

                  }

                   

                  data is all that I need. Yes).

                  • 6. Re: Different colors to the same series of Area Chart.
                    rtalton Level 4

                    Hi, can you share code on how you accomplished this? Thanks!

                    • 7. Re: Different colors to the same series of Area Chart.
                      VladBlinov Level 1

                      of course.

                       

                      i modified mx.skins.ProgrammaticSkin class (create myRenderer)

                      there I changed updateDisplayList()

                       

                      In fact, having a set of data, I own paint color field.

                      see AreaRenderer.as in your flex sdk

                       

                      and then:

                      areaRenderer="myRenderer"

                      • 8. Re: Different colors to the same series of Area Chart.
                        rtalton Level 4

                        This would be very useful. Perhaps you could post the code for your modifications to updateDisplayList()? Thanks.

                        • 9. Re: Different colors to the same series of Area Chart.
                          VladBlinov Level 1

                          i think my code is not perfect, but...)

                           

                          override protected function

                          updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {

                          super.updateDisplayList(unscaledWidth, unscaledHeight);

                           

                          var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("areaFill"));

                          var stroke:IStroke = getStyle("areaStroke");

                          var form:String = getStyle("form");

                           

                          var g:Graphics = graphics;

                          g.clear();

                           

                           

                          if (!_data)

                          return;

                           

                          var boundary:Array = _data.filteredCache;

                          var n:int = boundary.length;

                          if (n == 0)

                          return;

                           

                          var xMin:Number;

                          var xMax:Number = xMin = boundary[0].x;

                          var yMin:Number;

                          var yMax:Number = yMin = boundary[0].y;

                           

                          var v:Object;

                           

                          for (var i:int = 0; i < n; i++)

                          {

                          v = boundary[i];

                           

                          xMin = Math.min(xMin, v.x);

                          yMin = Math.min(yMin, v.y);

                          xMax = Math.max(xMax, v.x);

                          yMax = Math.max(yMax, v.y);

                           

                          if (!isNaN(v.min))

                          {

                          yMin = Math.min(yMin, v.min);

                          yMax = Math.max(yMax, v.min);

                          }

                          }

                           

                           

                           

                          for (i = 0; i < n-1; i++)

                          {

                           

                          fill = new SolidColor(fills[i % fills.length],ATransparency);

                          fill.begin(g, new Rectangle(xMin, yMin, xMax - xMin, yMax - yMin),null);

                          GraphicsUtilities.drawPolyLine(g, boundary, i, i+2,"x", "y", noStroke, form);

                          g.lineTo(boundary[i+1].x, _data.renderedBase);

                          g.lineTo(boundary[i].x, _data.renderedBase);

                          g.endFill();

                          }

                           

                           

                          fill = new SolidColor(0,0);

                          fill.begin(g, new Rectangle(xMin, yMin, xMax - xMin, yMax - yMin),null);

                          GraphicsUtilities.drawPolyLine(g, boundary, 0, n,"x", "y", stroke, form);

                          g.lineStyle(0, 0, 0);

                           

                          g.endFill();

                          }

                          • 10. Re: Different colors to the same series of Area Chart.
                            rtalton Level 4

                            The first part of this code is from AreaRenderer.as updateDisplayList() method.

                            Is that where you put your code changes, or is it in the ProgrammaticSkin.as updateDisplayList() method (like your comments indicated)?

                            Thanks again.

                            • 11. Re: Different colors to the same series of Area Chart.
                              VladBlinov Level 1

                              Here a modified class entirely.

                               

                              package

                              {

                              import mx.charts.series.items.AreaSeriesItem;

                              import mx.skins.ProgrammaticSkin;

                              import mx.core.IDataRenderer;

                              import flash.display.Graphics;

                              import mx.charts.chartClasses.GraphicsUtilities;

                              import mx.graphics.IFill;

                              import mx.graphics.IStroke;

                              import mx.graphics.Stroke;

                              import flash.geom.Rectangle;

                              import mx.graphics.SolidColorStroke;

                              import mx.graphics.SolidColor;

                               

                               

                              public class myRenderer extends mx.skins.ProgrammaticSkin

                              implements IDataRenderer {

                               

                              private var _chartItem:AreaSeriesItem;

                              private static const ATransparency:Number = 0.1;

                              private static const fills:Array = [0xff0000,0x0000ff,0x000000];

                               

                              private static var noStroke:SolidColorStroke = new SolidColorStroke(0, 0, 0);

                               

                              private var _data:Object;

                               

                              public function myRenderer() {

                               

                              }

                               

                               

                              public function get data():Object {

                              return _data;

                              }

                               

                              public function set data(value:Object):void {

                              _data = value;

                              invalidateDisplayList();

                              }

                               

                              override protected function

                              updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {

                              super.updateDisplayList(unscaledWidth, unscaledHeight);

                               

                              var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("areaFill"));

                              var stroke:IStroke = getStyle("areaStroke");

                              var form:String = getStyle("form");

                               

                              var g:Graphics = graphics;

                              g.clear();

                               

                               

                              if (!_data)

                              return;

                               

                              var boundary:Array = _data.filteredCache;

                              var n:int = boundary.length;

                              if (n == 0)

                              return;

                               

                              var xMin:Number;

                              var xMax:Number = xMin = boundary[0].x;

                              var yMin:Number;

                              var yMax:Number = yMin = boundary[0].y;

                               

                              var v:Object;

                               

                              for (var i:int = 0; i < n; i++)

                              {

                              v = boundary[i];

                               

                              xMin = Math.min(xMin, v.x);

                              yMin = Math.min(yMin, v.y);

                              xMax = Math.max(xMax, v.x);

                              yMax = Math.max(yMax, v.y);

                               

                              if (!isNaN(v.min))

                              {

                              yMin = Math.min(yMin, v.min);

                              yMax = Math.max(yMax, v.min);

                              }

                              }

                               

                               

                              //рисуем цветные сегменты

                              for (i = 0; i < n-1; i++)

                              {

                               

                              fill = new SolidColor(fills[i % fills.length],ATransparency);

                              fill.begin(g, new Rectangle(xMin, yMin, xMax - xMin, yMax - yMin),null);

                              GraphicsUtilities.drawPolyLine(g, boundary, i, i+2,"x", "y", noStroke, form);

                              g.lineTo(boundary[i+1].x, _data.renderedBase);

                              g.lineTo(boundary[i].x, _data.renderedBase);

                              g.endFill();

                              }

                               

                              //и линию графика c прозрачной заливкой

                              fill = new SolidColor(0,0);

                              fill.begin(g, new Rectangle(xMin, yMin, xMax - xMin, yMax - yMin),null);

                              GraphicsUtilities.drawPolyLine(g, boundary, 0, n,"x", "y", stroke, form);

                              g.lineStyle(0, 0, 0);

                               

                              g.endFill();

                              }

                              }

                              }

                              • 12. Re: Different colors to the same series of Area Chart.
                                rtalton Level 4

                                Thanks so much! I am going to try this in a project.

                                • 13. Re: Different colors to the same series of Area Chart.
                                  kavi.udaya

                                  I have exactly the same custom component to draw positive and negative figures. But the issue comes when i have added showDataEffect effects on this chart.

                                   

                                  When there is positive and negative values then the transition is not happening as expected.

                                   

                                  Can anyone help me on this.