Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 06-29-2012, 05:47 PM   #1
Registered User
Join Date: Jun 2012
Posts: 35
Default Creating a Zoom Box and Scroll Bars

Hi, I am trying to create a project that will display a chart in its entirety but will allow a user to select a portion of the chart with a zoom box to zoom in on that portion of the data. Once the user zooms in on a portion of the graph, however, I would like scroll bars to appear that allow the user to scroll to other portions of the chart.

I have created this chart and zoom box functionality using a tutorial from 'Ninja Captain' called "Flex Chart Zoom Window" that worked excellent.

However I can't figure out how to add the scroll bar features to the chart. The main obstacle I am facing is that to use the zoom box in this form the x-axis minimum and maximum are restricted to the data selected by the user. This was of implementing the zoom box means that I cannot scroll to other areas of the graph because they are no longer included once I am zoomed in.

Can anyone help me figure out what design strategy needs to be employed to get these functionlities working together?

Thank you!
tnel is offline   Reply With Quote
Old 06-29-2012, 09:25 PM   #2
Registered User
Join Date: Jun 2012
Posts: 35
Default Working on solution

I have figured out a potential solution now but the code is not giving me the output I am expecting. When I draw a zoom window with the mouse the chart zooms in to the appropriate size and I am able to scroll across the data. However, the chart is always aligned such that the left-most data is visible when zooming in, even if I selected to zoom in on data towards the right side of the chart. I believe the problem is the code in my 'endDraw' method but I don't know what's wrong with it.

Here is the code I am currently using:

	import mx.charts.chartClasses.IAxis;
	import mx.collections.ArrayCollection;
             	private function categoryLabelFunction(labelValue:Object, previousValue:Object, axis:IAxis):String
	     var index:int = int(labelValue);
	     if(index >= 0 && index < lineWipStats.length)
	          return lineWipStats[index].DaysToOut;
                  return "";
	//Declares the zoom variables
	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
		 dragEnd = new Point(columns.mouseX, columns.mouseY);
		 //Finds 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;
		{	TL.x = dragEnd.x;
			BR.x = dragStart.x;
		if(dragStart.y < dragEnd.y)
		{	TL.y = dragStart.y;
			BR.y = dragEnd.y;
		{	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.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);				 
              //Clears the drawing canvas and sets the new coordinates
	private function endDraw(event:MouseEvent):void
	      zooming = false;

                   negProp = TL.x / wipChart.width;
	      wipChart.width = (wipChart.width / (BR.x-TL.x)) * wipChart.width;
	      wipChart.x = -1 * (negProp * wipChart.width);
<s:Scroller id="scroll"
	width="100%" height="100%">

		<!-- Creates the WIP Position Chart -->
		<mx:ColumnChart id="wipChart" 
                                                     width="100%" height="100%"
			<!-- Defines the axes -->
				<!-- This linear axis simulates a category axis to allow zooming -->
				<mx:LinearAxis id="days"
				<mx:LinearAxis id="product" 
				<mx:AxisRenderer verticalAxisAlignment="vertical"
                              	<!-- Defines the chart series -->
			     <!-- Columns = Days from Out -->
			     <mx:ColumnSeries id="columns"
					 displayName="Within 'X' Days from Out"
			<!-- Zoom Window is Drawn Here -->
				<mx:CartesianDataCanvas id="chartCanvas"/>

Last edited by tnel; 06-29-2012 at 09:27 PM.
tnel is offline   Reply With Quote

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 06:32 AM.

Follow actionscriptorg on Twitter


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.