0 Replies Latest reply on Mar 10, 2008 1:37 PM by Solerous

    Actionscript formatting for dynamic charts

    Solerous Level 1
      I have been trying to coax the creation of a chart in Actionscript with limited success. I can do it fine with mx components but somehow I cannot mimic the same chart in Actionscript. Here is the skeleton of the chart:

      <mx:Panel id="dynaChart" styleName="gradientBgrd" height="500" width="800">
      <mx:LineChart id="genericChart" paddingBottom="0"
      gutterTop="50" height="100%" width="100%">
      <mx:seriesFilters>
      <mx:Array/>
      </mx:seriesFilters>
      </mx:LineChart>
      <mx:Legend id="dynaLegend" paddingTop="50" paddingLeft="20" dataProvider="{genericChart}"/>
      </mx:Panel>

      And here is my Actionscript:

      public var series1:LineSeries;
      public var series2:PlotSeries;

      public function makeChart():void {
      // Define the category axis.
      var hAxis:CategoryAxis = new CategoryAxis();
      hAxis.dataProvider = axis1.data;
      hAxis.labelFunction = formatHorizLabel;

      hAxis.categoryField = "point1" ;

      var vAxis1:LinearAxis = new LinearAxis();
      vAxis1.labelFunction = formatVertLabel;
      vAxis1.title = axis1.title;

      var vAxis2:LinearAxis = new LinearAxis();
      vAxis2.labelFunction = formatVertLabel;
      vAxis2.title = axis2.title;


      // Add the series.
      var mySeries:Array=new Array();

      var ls:Stroke = new Stroke(0x330099, 2);
      series1 = new LineSeries();
      series1.setStyle("lineStroke", ls);
      series1.setStyle("lineSegmentRenderer", new ClassFactory(mx.charts.renderers.ShadowLineRenderer));
      series1.dataProvider = array1;
      series1.xField="point1";
      series1.yField="point2";
      series1.displayName = axis1.title;
      series1.verticalAxis = vAxis1;

      mySeries.push(series1);

      var plotStroke:Stroke = new Stroke();
      plotStroke.color = 0xff0000;
      plotStroke.weight = 1;
      var plotColors:Array = new Array(new SolidColor(0xff0000));
      var pColor:SolidColor = new SolidColor(0xff0000);

      series2 = new PlotSeries();
      series2.setStyle("itemRenderer", new ClassFactory(mx.charts.renderers.CircleItemRenderer));
      series2.setStyle('stroke', plotStroke);

      series2.setStyle("fill",0xff0000);
      series2.setStyle("radius", 1);
      series2.dataProvider = array2;
      series2.xField="point1";
      series2.yField="point2";
      series2.displayName = axis2.title;
      series2.verticalAxis = vAxis2;
      mySeries.push(series2);

      var ar1:AxisRenderer = new AxisRenderer();
      ar1.axis = vAxis1;
      ar1.placement = "left";
      var ar2:AxisRenderer = new AxisRenderer();
      ar2.axis = vAxis2;
      ar2.placement = "right";
      var ar3:AxisRenderer = new AxisRenderer();
      ar3.axis = hAxis;
      ar3.placement = "bottom";
      ar3.setStyle("canDropLabels", true);

      genericChart.horizontalAxisRenderers = [ar3];
      genericChart.verticalAxisRenderers = [ar2];

      genericChart.horizontalAxis = hAxis;
      genericChart.series = mySeries;

      }

      The data displays more or less correctly. The problems are primarily formatting issues:
      1) The bottom seems to somehow have 2 horizontal axis.
      2) If I add the left most axis as an AxisRenderer, I get two vertical axis on the left. But without the axis renderer, the title fails to display
      3) If I take out the assignment of the horizontalAxis (genericChart.horizontalAxis = hAxis;) no data shows at all.

      I feel I am very close to getting it working, but I am just unable to nail down the final details to get this to work. Thanks for any help you can offer.