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

    programitically adding column series in flex chart is not showing the chart

    Giribabums
      <?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 adding column series in flex chart is 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>