1 Reply Latest reply on Jul 28, 2008 2:06 PM by dustismo

    Creating an AxisRenderer object in ActionScript

    cdchapma
      Creating an AxisRenderer object in ActionScript

      In the source below I'm dynamically Creating a Chart in ActionScript and I'm dynamically adding series to the chart. This works fine , but the data in each series represents various units of measure (Data Ranges) so the chart is less useful for seeing the change in each series when using one Linear axis. Thus my problem, for each series that's graphed, I'd like to give each series it's own Linear/Vertical axis so that each graph is shown properly. It's easy to define AxisRenderers in mxml for each Verticle Axis when you have a static set of data and then assign each dataset to the left or right side of the graph with the "placement" variable on the AxisRenderer object, however I need to accomplish the same task using Actionscript since I will have a dynamic number of series that will get added to the graph. Below is my best attempt to logically accomplish this task but it doesn't accomplish the task of creating a new Vertical axis for each series that gets added to the chart.:confused: Does anyone have some source that demonstrates how to accomplish this task. I'd like to alternate which side each series is shown on (left/right) but I'd just settle for getting a separate Linear Axis/Vertical Axis/YAxis for each series at this point. The Adobe article Using Multiple Axes demonstrates the task I'm trying to accomplish([URL=" http://livedocs.adobe.com/flex/3/html/charts_types_12.html#227567" multiple axes[/URL]).

      Source:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

      <mx:Script>
      <![CDATA[
      import mx.charts.LinearAxis;
      import mx.charts.AxisRenderer;
      import mx.charts.CategoryAxis;
      import mx.collections.ArrayCollection;

      import mx.charts.series.LineSeries;
      import mx.charts.DateTimeAxis;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
      import mx.controls.Alert;
      import mx.charts.HitData;
      import mx.events.ToolTipEvent;
      import mx.managers.ToolTipManager;

      [Bindable]
      private var PointData:ArrayCollection;
      [Bindable]
      private var Points1AC:ArrayCollection;
      [Bindable]
      private var Points2AC:ArrayCollection;

      public function initApp():void
      {
      Points1XML.send();
      }

      // *****************************************************//
      // Event handler function to manage returned
      // RealTime Historian data.
      // *****************************************************//
      private function LoadPoints1(event:ResultEvent):void
      {
      Points1AC = event.result.HistorianData.Point.PointData;

      TrendData2(Points1AC);
      }

      // *****************************************************//
      // Event handler function to manage returned
      // RealTime Historian data.
      // *****************************************************//
      private function TrendData2(PointsAC:ArrayCollection):void
      {
      var NameList:ArrayCollection = new ArrayCollection();

      // var PointNamesAC:ArrayCollection = new ArrayCollection();

      var TempObjectA:Object = PointsAC[0];

      NameList.addItem(TempObjectA.PointName);

      for each(var Point:Object in PointsAC)
      {
      // Create an Array of unique Point names.
      for each(var TempName:String in NameList)
      {
      if (NameList.contains(Point.PointName) == false)
      {
      NameList.addItem(Point.PointName);
      }

      }

      }

      // Iterate over names and create a new series
      // for each one.
      for each (var Name:String in NameList)
      {
      var TempAC:ArrayCollection = new ArrayCollection;

      for each(var PointB:Object in PointsAC)
      {
      if (PointB.PointName == Name)
      {
      TempAC.addItem(PointB);
      }
      }

      // Create the new series and set its properties.
      var localSeries:LineSeries = new LineSeries();
      localSeries.dataProvider = TempAC;
      localSeries.yField = "Value";
      localSeries.xField = "DateTime";

      // Set values that show up in dataTips and Legend.
      localSeries.displayName = Name;

      // Back up the current series on the chart.
      var currentSeries:Array = myChart.series;

      // Add the new series to the current Array of series.
      currentSeries.push(localSeries);

      // Add the new Array of series to the chart.
      myChart.series = currentSeries;

      //----

      // Create a horizontal axis.
      var hAxis:CategoryAxis = new CategoryAxis;

      hAxis.dataProvider = TempAC;

      hAxis.categoryField="DateTime";

      myChart.horizontalAxis = hAxis;

      //----
      // Create a verticl axis for each series
      var vAxis:LinearAxis = new LinearAxis;

      var VAxisRenderer:AxisRenderer = new AxisRenderer();
      VAxisRenderer.axis = vAxis;

      myChart.verticalAxis = vAxis;

      VAxisRenderer.placement = "right";
      }
      }

      // *****************************************************//
      // This Function alerts users of any errors encountered
      // when calling the HTTPServices to retrieve data
      // *****************************************************//
      private function showFault(event:FaultEvent):void
      {
      /* trace("The application has encountered an error!!!")
      trace(event.fault.faultCode+":"+event.fault.faultString); // Display any resulting errors encounterd calling the HTTPService */
      Alert.show(event.fault.faultString, 'Alert Box', mx.controls.Alert.OK);
      }

      ]]>
      </mx:Script>

      <mx:HTTPService id="Points1XML"
      url="Points1.xml"
      result="LoadPoints1(event)"
      fault="showFault(event)">
      </mx:HTTPService>

      <mx:Panel title="Line Chart with Variable Number of Series">
      <mx:LineChart id="myChart" showDataTips="true">
      </mx:LineChart>
      <mx:Legend dataProvider="{myChart}"/>
      </mx:Panel>
      </mx:Application>