Zooming on a chart in Flex

[derm116]

Hi all,

I'm trying to zoom into a chart in Flex! I've tried a few different approaches
to zooming but am having the same problem with them all! I'm zooming into the
chart similar to if I was zooming into a jpg! That is the axis can disappear or
I zoom in towards them as well! Not sure if I'm explaining this well but what I
want is to zoom into the graph but to always be able to see the axis - zoom
into points on the graph!?

I was wondering if anyone had any ideas or know of any examples of how I might
do this?

Any help would really be greatly appreciated as I can't seem to get my head
around this!!!

Thanks,
Dermot

[BSchow]

So...if I'm reading the question right, what you want to do is, say, have a
chart for a given month...and click on the chart to "zoom in" (or drill down)
to see data for a given day? Something like that?

[davidmedifit]

Hi Dermot - I'm not sure if you've tried this, or if it will help, but I've
done something similar by setting the horizontal and vertical axis
programmatically from within the Flex app. You have to define these axis within
the code (see attached code). Then you would change the minimum and maximum of
each axis using action script.

Now, potential problems are how you trigger calling the actionscript function
(maybe clicking a datapoint). Also, I'll be honest, I was using this for a map
application, and I knew the lat/lon value of each continent, so it was easier
than having to look at dynamically created data. Still, in theory you should be
able to make it work also.

I'm not sure if you have looked at Flex 3 - there is "zoom" functionality in
charting but I haven't had a chance to look at it yet (maybe there is some more
infrormation on the Adobe site / documentation).

Cheers,

Davo

<mx:verticalAxis>
<mx:LinearAxis id="vAxis"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis id="hAxis"/>
</mx:horizontalAxis>

vAxis.maximum = w;
vAxis.minimum = x;
hAxis.maximum = y;
hAxis.minimum = z;

[derm116]

Hi David,

Thanks a mil for your help!
I'm a bit confused about what you mean! I get about setting the vertical and
horizontal max and mins but not exactly sure what to set them to?

What I have is the following bubblechart

<mx:BubbleChart id="chart" width="100%" height="100%"
dataProvider="{dgCollection}">

<mx:verticalAxis>
<mx:LinearAxis id="vAxis" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis id="hAxis" />
</mx:horizontalAxis>

<mx:series>
<mx:BubbleSeries id="bubbleSeries" yField="FundWt"
xField="BenchWt" radiusField="ActiveWt"/>
</mx:series>

</mx:BubbleChart>

But as for what to set vAxis.maximum and hAxis.maximum to I haven't a clue?!
The data I'm taking in is dynamic so I don't know starting off what the max and
min are going to be - it depends what comes in?!

I'm also a bit confused about how to reset the max and min when the user zooms
in? I was thinking that I'd need to set up some kind of mouse listener to see
where the user wants to zoom into and then reset the max and min accordingly
but again not really sure how to go about doing this?

Any ideas? Thanks again for your help!

Derm

[derm116]

Hi BSchow,

Allowing the user to view data by day, month, quarter and year is something
else I need to do but haven't really looked into how t do it much yet! Any
ideas on how to do this would also be greatly appreciated!

What I'm trying to do at the moment though is just to be able to zoom into
specific areas of the graph! As this graph could potentially be displaying a
lot of data the user needs to be able to zoom into specific areas if they wish!
This is a bubble chart so it's axis values will vary depending on the data been
taken in! What I'm trying to do is when the user zooms into a certain area the
axis changes showing the values for that area?!

[BSchow]

[q]Originally posted by: derm116
Hi BSchow,

Allowing the user to view data by day, month, quarter and year is something
else I need to do but haven't really looked into how t do it much yet! Any
ideas on how to do this would also be greatly appreciated!
[/q]

Well, I can help with this part anyway. What you want to do is add an
itemClick field to your chart tag (whatever that might be). Set it equal to a
function, that you'll then add to your Script tag (if you already have one; if
not you should add it for this). Inside this function, you can change the
dataProvider of your chart to whatever you want.

[davidmedifit]

Derm,
Yeah I agree with you, finding the max/min would be a problem for dynamic
data, although you could make it relative to the data point that was clicked.
Like with what " BSchow" said - you'll know the X/Y of the chart or datapoint
that was clicked, so you could make the max / min 20 points
above/below/left/right, etc. Alternatively, you could loop through your data
and get min/max values based on some other metric, like the quarter or month.

I really think though that your ultimate solution will be the new Flex 3
charting features that allow the zooming you want natively. I haven't had a
chance to take a look at this but I've seen demo's of it and it looks pretty
good. It's something I plan on looking at more, I can let you know what I find,
by posting back here.

Cheers,

David

[davidmedifit]

Dermo,
This kind of prompted me to get cracking at this new feature, and there is
a chapter titled "Selecting chart items" in the "Adobe Flex 3 Data
Visualization Developer Guide" PDF that is available from the downloads section
of the Flex page on Adobe (adobe.com/flex).

I hope thats what you are looking for.

Davo

[derm116]

Hey Dave,

Thanks for all your help! I've had a look at some of the charting features
added in to Flex 3 which I have to admit are pretty cool! However, the only
zoom I could find was on seriesZoom which seems to be just an effect for
changing series in a chart - that is getting a series to zoom in and out?!

Derm

[derm116]

Hi all,

Thanks again for all the help! Reqoeking an example I found on quietly
scheming at

[url]http://www.quietlyscheming.com/blog/charts/interactive-bubble-chart/[/url]

I managed to get an initial zoom function working with the mouse scroller
using cartesian transforms! What I'm trying to do now is have a nav bar with
buttons to pan to the left, right, up and down and a zoom slider bar! I'm
having some issues trying to get this to work and was wondering if anyone had
any experience doing one before or new of any good examples?

One of the main issues I'm having is the zoom function I wrote from the code
at quietly scheming was in an actionscript file extending chart element! I've
created an mxml file with some buttons for my navbar but can't extend chart
element! As a result I am getting an error on the following line

vAxis =
LinearAxis(CartesianTransform(dataTransform).getAx is(CartesianTransform.VERTICAL
_AXIS));

as it can't find dataTransform! I've tried creating a variable of type chart
element but don't think it's working!?

I am using the follwing initialize function to set up the variables I'll be
using

public function init():void {
hAxis =
LinearAxis(CartesianTransform(dataTransform).getAx is(CartesianTransform.HORIZONT
AL_AXIS));
vAxis =
LinearAxis(CartesianTransform(dataTransform).getAx is(CartesianTransform.VERTICAL
_AXIS));
_startMin = new Point(hAxis.minimum,vAxis.minimum);
_startMax = new Point(hAxis.maximum,vAxis.maximum);
_centre = new Point(((hAxis.maximum - hAxis.minimum)/2),((vAxis.maximum -
vAxis.minimum)/2));
}

and all my functions are similar to this one for panning up

private function panUp():void{
trace(hAxis);
hAxis.maximum = hAxis.maximum * 0.10;
hAxis.minimum = hAxis.minimum * 0.10;
vAxis.maximum = vAxis.maximum;
vAxis.minimum = vAxis.minimum;
}

However I keep getting null object references for all the functions in my
initialize function!? Can't seem to figure out why this won't work as similar
code works for my zooming and panning with the mouse?!

Anyone have any ideas? Any help really would be greatly appreciated!

Thanks in advance,
Derm

[Unregistered]

Hello derm116,

Were you able to create the Zoom Slider and Nav Bar? I am working on a similar case and any assistance would be appreciated.

Thanks