Flex: Showing and Hiding the Origins of a chart

There might be cases where you wanted to show or replace the vertical and horizontal origin's of the chart with a different type of line. Here's a simple example to demo the hiding and showing of the origin of the chart..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    creationComplete="completeHandler(event)">
 <mx:Script>
  <![CDATA[
   import mx.charts.HitData;
   import mx.charts.series.LineSeries;
   import mx.collections.ArrayCollection;
   import mx.collections.Sort;
   import mx.collections.SortField;
   import mx.events.FlexEvent;
   import mx.events.ListEvent;
   import mx.formatters.DateFormatter;
   
   //Records used in the chart
   [Bindable]
   private var myData:XML = 
    <records>
     <record>
      <x>-7.81</x>
      <y>-4.98</y>
     </record>
     <record>
      <x>-2.84</x>
      <y>-4.62</y>
     </record>
     <record>
      <x>-8.66</x>
      <y>2.52</y>
     </record>
     <record>
      <x>3.56</x>
      <y>6.86</y>
     </record>
     <record>
      <x>-9.54</x>
      <y>-8.05</y>
     </record>
     <record>
      <x>7.48</x>
      <y>0.37</y>
     </record>
     <record>
      <x>9.2</x>
      <y>9.5</y>
     </record>
     <record>
      <x>9.32</x>
      <y>-1.59</y>
     </record>
     <record>
      <x>1.77</x>
      <y>-0.86</y>
     </record>
     <record>
      <x>-8.61</x>
      <y>-1.75</y>
     </record>
    </records>;
   
   private var dateCollection:ArrayCollection;
   
   protected function completeHandler(event:FlexEvent):void
   {
    // Parsing the xml data into ArrayCollection
    var objArray:ArrayCollection = new ArrayCollection();
    var tempObj:Object;
    for(var i:int = 0; i < myData.record.length(); i ++)
    {
     tempObj = new Object();
     tempObj.x = myData.record[i].x;
     tempObj.y = myData.record[i].y;
     objArray.addItem(tempObj);
    }
    
    // Create the new series and set its properties.
    var localSeries:LineSeries = new LineSeries();
    localSeries.dataProvider = objArray;
    localSeries.yField = "y";
    localSeries.xField = "x";
    
    // Back up the current series on the chart.
    var currentSeries:Array = mainChart.series;
    // Add the new series to the current Array of series.
    currentSeries.push(localSeries);
    // Add the new Array of series to the chart.
    mainChart.series = currentSeries;
   }
   
   //We are customizing the datatip / tool tip of the
   //chart data.
   public function myDataTipFunction(e:HitData):String {
    var s:String = "";
    s += "x: " + e.item.x + "<br>";
    s += "y: " + e.item.y;
    return s;
   }
  ]]>
 </mx:Script>
 <mx:VBox verticalGap="5" width="100%" height="100%" 
    verticalAlign="middle">
  <mx:HBox width="100%" horizontalAlign="center">
   <mx:LineChart id="mainChart" 
        showDataTips="true" 
        width="95%"
        dataTipFunction="myDataTipFunction">
    <mx:Stroke weight="2" 
         alpha="1" 
         color="#00FF00" 
         id="horiOriginStroke"/>
    <mx:Stroke weight="2" 
         alpha="1" 
         color="#FF0000" 
         id="vertOriginStroke"/>
    <mx:backgroundElements>
     <mx:GridLines direction="both"
          horizontalShowOrigin="{chkHori.selected}"
          horizontalOriginStroke="{horiOriginStroke}" 
          verticalShowOrigin="{chkVert.selected}"
          verticalOriginStroke="{vertOriginStroke}"/>
    </mx:backgroundElements>
   </mx:LineChart>
  </mx:HBox>
  <mx:HBox width="100%"
     horizontalAlign="center">
   <mx:CheckBox id="chkHori" 
       selected="true"       
       label="Show Horizontal Origin"/>
   <mx:CheckBox id="chkVert" 
       selected="true" 
       label="Show Vertical Origin"/>   
  </mx:HBox>
 </mx:VBox>
</mx:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.