1 Reply Latest reply on May 28, 2009 11:11 AM by _Natasha_

    PlotSeries (One serie and multiple itemRenderer)

    lerooooogk Level 1

      Hi all,

       

      I'm working in charts, concretely with a PlotChart.

       

      Its code:

       

      <mx:PlotChart  id="plot" width="100%" height="100%"
                      dataProvider="{chartList.arrRouting}"
                      showDataTips="true">
                    <mx:horizontalAxis>
                         <!--<mx:CategoryAxis categoryField="time"/>-->
                         <mx:DateTimeAxis  alignLabelsToUnits="true" dataInterval="2"
                              dataUnits="hours" parseFunction="myParseFunction"/>
                    </mx:horizontalAxis>
      
                     <mx:verticalAxis>
                     <mx:CategoryAxis dataProvider="{chartList.arrcoll2}"/>
                     </mx:verticalAxis>
                     
                     <mx:series>
                          <mx:PlotSeries id="pSeries" xField="time" yField="node"
                               fillFunction="myFillFunction"/>                    
                     </mx:series>     
                               
      </mx:PlotChart>
      

       

      DataProvider is an array like this: [event:'NodeConnected', time:'23:53', node:'A']

                                                       [event:'NodeDisconnected', time:'02:53', node:'A']

                                                       [event:'RemoveRouteTo', time:'01:53', node:'B'];

                                                       [event:'NewRouteTo', time:'23:53', node:'C']............................

       

      And I use a fill function:

       

                private function myFillFunction(element:ChartItem, index:Number):IFill{
                     var c:SolidColor = new SolidColor(0x00CC00);
                     var item:PlotSeriesItem = PlotSeriesItem(element);
                     if (item.item.event == 'NewRouteTo'){
                          c.color =0x01DFD7;
                          
                          return c;
                     }
                     if (item.item.event == 'RemoveRoute'){
                          c.color = 0xF7FE2E;
                          
                          return c;
                     }
                     if (item.item.event == 'NodeConnected'){
                          
                          return c;
                     }else {
                  c.color = 0xFF0000;
                 
                     }
                     return c;
                }
      

       

      Then, I want to change the itemRenderer (icon) acorrding to param Event. As I have only one serie all items are with a circle (default Item Renderer),

      I try to put in myFillFunction the next code: pSeries.setStyle("itemRenderer", new ClassFactory(mx.charts.rendereres.CrossItemRenderer)); but doesnt work.

       

      Is it possible to do that?

       

       

      Thanks in advance,

        • 1. Re: PlotSeries (One serie and multiple itemRenderer)
          _Natasha_ Level 4

          Hi,

          if you set itemRenderer for series, all items will be rendered using this class.

          If you want to have different pictures for items in one series you should create your own itemRenderer and change the symbol accoding data.

          For example,

           

          public class MyCoolItemRenderer extends ProgrammaticSkin implements IDataRenderer

          {

          ... // do something

          override protected function updateDisplayList(unscaledWidth:Number,

            unscaledHeight:Number):void

          {

          super.updateDisplayList(unscaledWidth, unscaledHeight);

           

          var stroke:Stroke = getStyle("stroke");

           

          var g:Graphics = graphics;

          g.clear();

           

          g.lineStyle(stroke.weight, stroke.color, stroke.alpha);

           

          switch (data.event)

          {

               case "NewRouteTo":

                    g.drawCicle(0, 0, unscaledWidth); // just an example. You can show the way of rendering items in SDK source

                    break;

          }

          g.endFill();

           

          }

          }