4 Replies Latest reply: May 29, 2013 5:41 AM by jfb00 RSS

    Dynamically adding ColumnSeries doesn't work

    Farhad Navaei

      I created the following code to create different series dynamically:


      <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
              creationComplete="application1_creationCompleteHandler(event)"
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
              <fx:Script><![CDATA[
                  import mx.charts.series.ColumnSeries;
                  import mx.collections.ArrayCollection;
                  import mx.collections.Sort;
                  import mx.collections.SortField;
                  import mx.events.FlexEvent;
      
                  [Bindable]
                  public var Loc01:ArrayCollection = new ArrayCollection([
                      {date:"2002", close:41.87, loc: "Location 01"},
                      {date:"2005", close:48.06, loc: "Location 01"},
                      {date:"2006", close:48.06, loc: "Location 01"},
                      {date:"2002", close:157.59, loc: "Location 02"},
                      {date:"2003", close:160.3, loc: "Location 02"},
                      {date:"2003", close:45.74, loc: "Location 01"},
                      {date:"2004", close:42.77, loc: "Location 01"},
                      {date:"2004", close:150.71, loc: "Location 02"},
                      {date:"2002", close:45.74, loc: "Location 03"},
                      {date:"2003", close:42.77, loc: "Location 03"},
                      {date:"2004", close:150.71, loc: "Location 03"},
                      {date:"2005", close:156.88, loc: "Location 02"}
                  ]);
      
              protected function application1_creationCompleteHandler(event:FlexEvent):void
              {
                  // TODO Auto-generated method stub
                  var obj:Object;
                  var arr:Array = [];
                  var i:int;
                  var ac1:ArrayCollection;
                  var NS:ColumnSeries;
                  var sortA:Sort = new Sort();
                  var sortByLocation:SortField = new SortField("loc",false,false,false);
                  var sortByDate:SortField = new SortField("date", true, false, false);
      
                  sortA.fields=[sortByLocation, sortByDate];
                  Loc01.sort=sortA;
      
                  Loc01.refresh();
      
                  i=0;
                  arr[i] = Loc01[0].loc;
                  for each(obj in Loc01){
                      if(arr[i] != obj.loc)
                      {
                          i++;
                          arr[i] = obj.loc;
                      }
                  }
                  var str: String;
                  i=0;
                  for each(str in arr){
                      ac1 = new ArrayCollection();
                      for each(obj in Loc01){
                          if(str == obj.loc)
                          {
                              ac1.addItem(obj);
                          }
                      }
                      ac1.refresh();
                      if(!myChart.series[i])
                          myChart.series.push(new ColumnSeries());
                      NS = myChart.series[i];
                      NS.dataProvider = ac1;
                      NS.yField = "close";
                      NS.horizontalAxis = h1; 
                      NS.displayName = str;
                      NS.verticalAxis = v1;
                      NS.id = "cs" + i.toString();
                      i++;
                  }
      
              }
      
          ]]></fx:Script>
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
      
          <mx:Panel x="49" y="30" width="868" title="Column Chart With Multiple Axes">
              <!--mx:Legend width="769" dataProvider="{myChart}"/-->
              <mx:ColumnChart id="myChart" width="601" showDataTips="true" dataProvider="{Loc01}">
                  <mx:horizontalAxis>
                      <mx:CategoryAxis id="h1" categoryField="date"/>
                  </mx:horizontalAxis>
      
                  <mx:horizontalAxisRenderers>
                      <mx:AxisRenderer placement="bottom" axis="{h1}"/>
                  </mx:horizontalAxisRenderers>
      
                  <mx:verticalAxisRenderers>
                      <mx:AxisRenderer placement="left" axis="{v1}"/>
                  </mx:verticalAxisRenderers>
                  <mx:verticalAxis>
                      <mx:LinearAxis id="v1" minimum="30" maximum="170"/>           
                  </mx:verticalAxis>
                  <mx:series>
                      <mx:ColumnSeries id="cs0"/>
                  </mx:series>
              </mx:ColumnChart>
          </mx:Panel>
      </s:Application>
      

       

       

      The hard coded ColumnSeries (the first one) works fine, but the next series which are created dynamically don't work. What's wrong in my code? Any help would be much appreciated.