2 Replies Latest reply on Mar 3, 2010 7:11 AM by MattRamirez

    Controlling line chart x-axis with Hslider

    MattRamirez

      Hi all,

      I have created a statistics dashboard that shows user data via a line chart from an array collection. I have a HSlider component and want to define the range of the chart (category month, thumbCount="2") and although I can get the node value in a label as I move the slider I cannot work out what property(s) in the line chart to apply it to in order to alter the range.

      I have seen examples to alter the linear axis values but not to update the actual arraycollection. Any help would be gratefully received.

        • 1. Re: Controlling line chart x-axis with Hslider
          Gregory Lafrance Level 6

          This answers your question:

           

          <?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>
          

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Controlling line chart x-axis with Hslider
            MattRamirez Level 1

            Thanks Greg, that was really helpful

             

            I successfully managed to use the hslider to control duration of my line graph. I was wondering if you might give me some guidance on using two 'thumbs' to control the range of months when using an arraycollection as it does appear a lot more difficult. I have tried to use the removeItemAt() function to delete any array items below the value of the 'leftslider' but it does not work as expected, do the maximum and minimum values need to be transferred into two ArrayCollections?