1 Reply Latest reply on Oct 4, 2007 1:49 AM by Giribabums

    programitically creating column series to flex chart not showing the chart

    Giribabums Level 1
      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
      ( in this example i have taken n = 4 i.e., CountMax=4 if i change the CountMax=6 then it should generate 6series dynamically after calculating the values. ). just copy the below code and paste it in Flex builder and run the application.

      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. my actual requirement is to retrieve data from Salesforce account and want to populate the arraylist then display the chart.
      -----------------------
      <?xml version="1.0"?>
      <!-- Example showing using mx:LineSeries 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 = 6;
      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]});
      }

      // 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++)
      {
      var tmpseries:Array = new Array(10);
      for(var i:int = 1; i < 10; i++)
      {
      tmpseries = 3 * Math.random();
      }
      var cs:ColumnSeries = new ColumnSeries();
      columnchart1.series.join( = [cs];
      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="stacked" x="10" y="0">
      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{categoryArray}" categoryField="data"/>
      </mx:horizontalAxis>
      <mx:verticalAxis>
      <mx:LinearAxis baseAtZero="true" maximum="3" autoAdjust="true"/>
      </mx:verticalAxis>
      </mx:ColumnChart>
      </mx:Panel>
      </mx:Application>
        • 1. Re: programitically creating column series to flex chart not showing the chart
          Giribabums Level 1
          <?xml version="1.0"?>
          <!-- Example showing using mx:ColumnSeries 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.graphics.SolidColor;
          import mx.charts.HitData;
          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();

          public function drawChart():void
          {
          var histMax:int = 25;
          var histMin:int = 5;
          var countMax:int = 3;
          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 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++)
          {
          var tmpseries:Array = new Array(10);
          for(var i:int = 0; i < 10; i++)
          {
          tmpseries = 1 * Math.random();
          if(tmpseries
          > 0.5)
          {
          tmpseries = 1;
          }
          else
          {
          tmpseries
          = 0;
          }
          }

          var testArrCol:ArrayCollection = new ArrayCollection();
          for(var j:int =0; j < 10; j++)
          {
          var m:Number = tmpArr[j];
          var m1:Number = tmpseries[j];
          testArrCol.addItem({mData:m.toString(),nData:m1.toString()});
          }
          cs = new ColumnSeries();
          cs.dataProvider = testArrCol;
          cs.displayName = 'Series' + chartSeries;
          cs.xField = 'mData';
          cs.yField = 'nData';
          columnchart1.series[chartSeries] = cs;
          }
          }

          public function myTipFunction(hitData:HitData):String
          {
          return(ColumnSeries(hitData.element).displayName +" - "+ hitData.item.mData + "\n" + "Value : "+ hitData.item.nData);
          }
          ]]>
          </mx:Script>
          <mx:Panel title="Dynamic Series Adding Sample" width="98%" height="90%" layout="absolute">
          <mx:ColumnChart id="columnchart1" height="338" width="396" showDataTips="true" type="stacked" x="10" y="0" dataTipFunction="{myTipFunction}">
          <mx:horizontalAxis>
          <mx:CategoryAxis dataProvider="{categoryArray}" categoryField="data"/>
          </mx:horizontalAxis>
          <mx:verticalAxisRenderer>
          <mx:AxisRenderer visible="false"/>
          </mx:verticalAxisRenderer>
          </mx:ColumnChart>
          </mx:Panel>
          </mx:Application>