7 Replies Latest reply on Aug 18, 2009 12:36 AM by sergei_developer

    LineChart with scrolling


      Can anybody help me make LineChart with scrolling horizontal axis?

        • 1. Re: LineChart with scrolling
          atta707 Level 2

          I am going to assume that you have chart that is too wide for the available real estate on the screen and you want to scroll horizontally. If that is indeed the case, how about placing the chart with it's current height and width in a container like, for example, Box with fixed width and height and switching on the horizontal scrolling for it?


          Makes sense?



          • 2. Re: LineChart with scrolling
            chris.huston.t10 Level 3

            Another way that I have done this is with a horizontal scrollbar with the scrollbar changing the minimum and maximum parameters of the horizontal axis. Listen for the scroll event from the scrollbar and use the delta to change the minimum and maximum values that are bound to the horizontal axis of your line chart.


                public var min_data:int; //the minimum x-value for the line chart
                public var max_data:int; // the max x-value for the line chart

                [Bindable] private var x_min:int;
                [Bindable] private var x_max:int;


                private function scroll_chart(evt:ScrollEvent):void {
                    if (evt.detail != "thumbPosition") {
                        var scroll_delta:int = evt.delta;
                        if (evt.detail == "pageLeft" || evt.detail == "pageRight") {
                            scroll_delta = evt.delta/2;
                        x_min = Math.max(min_data, x_min + scroll_delta); //minimum value of the horizontal axis
                        x_max = Math.min(x_max + scroll_delta, max_data); //maximum value of the horizonatl axis




            1 person found this helpful
            • 3. Re: LineChart with scrolling
              sergei_developer Level 1

              Exactly I have too much date for dateprovider in LineChart, that I have chart too small. I want scrolling for date to scroll chart and see bigger chart.

              • 4. Re: LineChart with scrolling
                sergei_developer Level 1

                I fixed it with HScrollBar and created sublist method which cut my collection on subLists:


                public static  function getSubList(start:int,end:int,ac:ArrayCollection):ArrayCollection{
                            if(ac.length!=0 && ac.length>=end){
                                var returnCollection:ArrayCollection = new ArrayCollection();
                                for(var i:int=start; i<end ;i++ ){
                            return returnCollection;
                            else return null;


                /* start - start position( I defined as scrollPosition) and end  - end position(as scrollPosition +10(or other number for you) for our sublist .*/

                private function scrollChart(event:ScrollEvent):void{
                         setDataProviders(DateUtils.getSubList(mHSB.scrollPosition,mHSB.scrollPosition+10,expenses ));


                     private function setDataProviders(ac:ArrayCollection):void{

                // where myChart - our LineChart and hAxis- horizontalAxis

                • 6. Re: LineChart with scrolling
                  sergei_developer Level 1

                  Thanx, Natasha, but your link for all chart except linechart

                  • 7. Re: LineChart with scrolling
                    sergei_developer Level 1

                    Thanx,Masamune, you help me think in right way