Controlling LineChart x axis with HSlider

<?xml version="1.0"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
  creationComplete="populateAxis()">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] private var expenses:ArrayCollection = new
ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300},
        {Month:"Apr", Profit:2000, Expenses:1500, Amount:450},
        {Month:"May", Profit:1000, Expenses:200, Amount:600},
        {Month:"June", Profit:1500, Expenses:500, Amount:300},
        {Month:"July", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Aug", Profit:1000, Expenses:200, Amount:600},
        {Month:"Sept", Profit:1500, Expenses:500, Amount:300},
        {Month:"Oct", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Nov", Profit:1000, Expenses:200, Amount:600},
        {Month:"Dec", Profit:1500, Expenses:500, Amount:300}
      ]);
     
      [Bindable] private var ac:ArrayCollection = new
ArrayCollection();
     
      private function populateAxis():void{
        ac.removeAll();
        for(var a:uint = 0; a < expenses.length; a++){
          if(a < hs.value){
            ac.addItem(expenses.getItemAt(a));
          }
        }
      }
    
      private function formatDT(value:Number):String{
        return nf.format(value);
      }
    ]]>
  </mx:Script>
  <mx:NumberFormatter id="nf" precision="0"/>
  <mx:HBox width="100%" horizontalAlign="center">
    <mx:Label text="Adjust X Axis:"/>
    <mx:HSlider id="hs" minimum="1" maximum="{expenses.length}"
      snapInterval="1" dataTipFormatFunction="formatDT"
      value="12" change="populateAxis()" liveDragging="true"/>
  </mx:HBox>
  <mx:Panel title="Line Chart">
    <mx:LineChart id="myChart" dataProvider="{expenses}"
      showDataTips="true">
      <mx:horizontalAxis>
        <mx:CategoryAxis
          dataProvider="{ac}" categoryField="Month"/>
      </mx:horizontalAxis>
      <mx:series>
        <mx:LineSeries yField="Profit" displayName="Profit"/>
          <mx:LineSeries yField="Expenses"
displayName="Expenses"/>
      </mx:series>
    </mx:LineChart>
    <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>