2 Replies Latest reply on Sep 5, 2007 3:02 AM by Giribabums

    dynamically creating series in column chart

    Giribabums
      I want to create n number of series dynamically when i run my application.
      where n can be any value it depends on the data which i retrieve from database. below i pasted the example
      ( n = CountMax=4 )

      in this example i am facing problem, chart series are not showing. i dont know the reason why its not showing, if anyone got the solutions for the problem please let me know.

      <?xml version="1.0"?>
      <!-- Example showing using mx:ChartSeries vs using AS to create chart series programmatically -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="drawChart()" layout="absolute">
      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      import mx.charts.series.ColumnSeries;
      import mx.charts.series.LineSeries;
      import mx.collections.ArrayCollection;

      [Bindable]
      public var categoryArray:ArrayCollection = new ArrayCollection();
      [Bindable]
      public var sArray:ArrayCollection = new ArrayCollection();
      public function drawChart():void
      {
      var histMax:int = 25;
      var histMin:int = 5;
      var countMax:int = 4;
      var tmpArr:Array = new Array();
      categoryArray.removeAll();
      for(var n:int = 0; n < 10; n++)
      {
      tmpArr[n] = histMin + Math.round((2 * n) / 20 * (histMax - histMin));
      categoryArray.addItem({data:tmpArr[n]});
      }

      var tmpseries:Array = new Array(10);

      var cs:ColumnSeries = new ColumnSeries();
      columnchart1.series = [cs];

      // Add a series to the chart with the x-values and y-values
      // from the arrays and set the series type to a column chart
      for(var chartSeries:int = 0; chartSeries < countMax; chartSeries++)
      {
      for(var i:int = 1; i < 10; i++)
      {
      tmpseries = 3 * Math.random();

      }

      sArray.addItem({data:tmpseries});
      //columnchart1.dataProvider = sArray;
      cs = new ColumnSeries();
      cs.dataProvider= sArray;
      cs.displayName = 'Series';
      cs.yField = 'data';
      columnchart1.series[chartSeries] = cs;
      }
      }
      ]]>
      </mx:Script>
      <mx:Panel title="Dynamic Series Adding Sample" width="195%" height="90%" layout="absolute">
      <mx:ColumnChart id="columnchart1" height="338" width="396" showDataTips="true" type="clustered" x="10" y="0">
      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{categoryArray}" categoryField="data"/>
      </mx:horizontalAxis>
      <mx:series>
      <mx:ColumnSeries dataProvider="{sArray}" yField="data" displayName="Series"/>
      </mx:series>
      </mx:ColumnChart>
      </mx:Panel>
      </mx:Application>
        • 1. Re: dynamically creating series in column chart
          Deeptika Gottipati Adobe Employee
          There is an error in the given code that data is not added properly to the series' dataProvider.
          Please use the following code

          • 2. dynamically creating series in column chart
            Giribabums Level 1
            Hi Deeptika,

            Thanks for you reply, Now I am Seeing a light at the end of the TUNNEL. :).

            Note: There is no need to specify the dataprovider for series in mxml, cause we are adding dynamically in actionscript.

            There is an error in my code. Attached the correct code with this message, run in debug mode and watch the values of tmpArray and sArray. To run in debug mode place a break point by pressing Ctrl+Shift+b and press F11. Watch the variable in Expressions window. F6 step over and F8 refresh. waiting for your reply.

            i can explain u clearly the requirement, just send me a test mail to this id giribabu.m@in.v2solutions.com. i will send u sample chart image so that u can understand the requirement.