10 Replies Latest reply on Jun 24, 2008 4:24 AM by MarceFlex

    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
        • 1. Re: Zooming on a chart in Flex
          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?
          • 2. Re: Zooming on a chart in Flex
            davidmedifit Level 1
            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
            • 3. Re: Zooming on a chart in Flex
              derm116 Level 1
              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

              • 4. Re: Zooming on a chart in Flex
                derm116 Level 1
                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?!
                • 5. Re: Zooming on a chart in Flex
                  BSchow Level 1
                  quote:

                  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!



                  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.
                  • 6. Re: Zooming on a chart in Flex
                    davidmedifit Level 1
                    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
                    • 7. Re: Zooming on a chart in Flex
                      davidmedifit Level 1
                      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
                      • 8. Zooming on a chart in Flex
                        derm116 Level 1
                        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 into a chart and out of a chart?!

                        Derm
                        • 9. Re: Zooming on a chart in Flex
                          derm116 Level 1
                          Hi all,

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

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

                          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).getAxis(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).getAxis(CartesianTransform.HORIZONTAL_AXIS)) ;
                          vAxis = LinearAxis(CartesianTransform(dataTransform).getAxis(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
                          • 10. Re: Zooming on a chart in Flex
                            MarceFlex
                            Hello,
                            I'm currently working in exactly the same example for Pan & Zoom, and I'm trying to add the sliders and a reset function for this code you found. Did you manage to complete it? Any advice will be much appreciate it!
                            Thanks!