0 Replies Latest reply on Jun 29, 2012 2:37 PM by tjnelso

    Problem with Repositioning Chart

    tjnelso Level 1

      Hi, I am currently working on a project for which I am trying to take a column chart and allow the user to click and drag the mouse to create a zoom window. When the mouse is released the chart is zoomed in on the area that was covered by the mouse.

       

      I also want a scroll bar to appear after the chart zooms in so the rest of the chart can be scrolled to in the zoomed-in view. I have written code to do both of these things but I am having a problem. When I drag over the chart to zoom in it zooms fine and the scroll bar appears but the issue is that the portion of the chart that is displayed is the left-most portion, no matter which part I selected to have the view zoom in on. The methods are called when there is a mouseDown, mouseMove, and mouseUp event on the chart, respectively.

       

         //Declares the zoom variables

         [Bindable]

         private var dragStart:Point;

         private var dragEnd:Point;

         private var TL:Point;

         private var BR:Point;

         private var zooming:Boolean = false;

        

         //Declares the scroll variables

         private var negProp:int;

        

        

         //-------------------------------------------------------------------------

         //Sets the start point for the zoom window

         //-------------------------------------------------------------------------

         private function startDraw(event:MouseEvent):void

         {

          zooming = true;

          dragStart = new Point(columns.mouseX, columns.mouseY);

         }

        

        

         //-------------------------------------------------------------------------

         //Draws the zoom window as the mouse moves

         //-------------------------------------------------------------------------

         private function showDraw(event:MouseEvent):void

         {

          if(zooming)

          {

           dragEnd = new Point(columns.mouseX, columns.mouseY);

          

           //Finds the top-left and bottom-right points of the zoom window

           TL = new Point();

           BR = new Point();

          

           if(dragStart.x < dragEnd.x)

           { TL.x = dragStart.x;

            BR.x = dragEnd.x;

           }

           else

           { TL.x = dragEnd.x;

            BR.x = dragStart.x;

           }

          

           if(dragStart.y < dragEnd.y)

           { TL.y = dragStart.y;

            BR.y = dragEnd.y;

           }

           else

           { TL.y = dragEnd.y;

            BR.y = dragStart.y;

           }

          

           //Keeps the zoom window from going off the canvas

           if(TL.x < 0)

            TL.x = 0;

           if(BR.x < 0)

            BR.x = 0;

           if(TL.x > chartCanvas.width - 1)

            TL.x = chartCanvas.width - 1;

           if(BR.x > chartCanvas.width - 1)

            BR.x = chartCanvas.width - 1;

          

           //Draws the zoom window

           chartCanvas.graphics.clear();

           chartCanvas.graphics.lineStyle(1, 0x000000, 0.25);

           chartCanvas.graphics.beginFill(0xd4ef0, 0.5);

           chartCanvas.graphics.drawRect(TL.x, TL.y, BR.x-TL.x, BR.y-TL.y);

           chartCanvas.graphics.endFill();

          }

         }

        

        

         //-------------------------------------------------------------------------

         //Clears the drawing canvas and sets the new coordinates

         //-------------------------------------------------------------------------

         private function endDraw(event:MouseEvent):void

         {

          zooming = false;

          chartCanvas.clear();

              

          negProp = TL.x / wipChart.width;

          wipChart.width = (wipChart.width / (BR.x-TL.x)) * wipChart.width;

          wipChart.x = -1 * (negProp * wipChart.width);

         }

       

       

      If anyone can help me I'd greatly appreciate it. Thank you.