Flex: Charts zoom / range selector (version 2)

this is the second chart range selector.
some of the code here is also borrowed from somewhere (sorry for not remembering who from).

Demo is here
Source is here


18 Responses to Flex: Charts zoom / range selector (version 2)

  1. Tony Georgiev says:

    that’s really good job you are doing. I like your examples because they are different from the many other on the internet about range selector chart and it’s always nice to see another point of view

  2. Very interesting way of doing range selections.

  3. Phil says:

    Excellent example. I have been looking over the source code for a couple days now and have reproduced something similar… Now how would I go about UNZOOMING the graph back to its original view, lets say with a button on ‘click’

  4. shemesh says:

    Phil hi,
    what i did for UNzooming [in both cases] was to manage a “cache” – an array of each zoom data so the user can go back one step to the previous zoom position.
    meaning when the user zoomed in several times he could always go back one step or reset to the original.

  5. Frank says:

    Hi Shemesh,

    could you please actually post the Code for unzooming ?
    that would be great…


  6. shemesh says:

    Frank hi,
    mmmm… i will have to look for that code…

  7. Frank says:

    Hi Shemesh,

    thanks for your quick answer.

    This would be really kind.

    Another question, do you have any idea how this http://www.stretchmedia.ca/code_examples/chart_range_selection/main.html could work with multiple charts laying above each other and the range selector is changing the range of all charts (e.g i have 10 charts above each other an each chart has another range but one control (slider on the bottom handling the range of all)?
    Greetz and Thanks

  8. shemesh says:

    i m not working with Flex for some time now (i m on Silverlight now).
    i suppose you will need to save your start & end points on some global var that all charts can access.
    maybe use a model locator pattern to do this.
    shouldn’t be too hard.

  9. Frank says:

    Hi Shemesh,

    I have one question.
    Do you know if it is possible to drag annotation elements over charts?

    E.G. I have a draggable sprite, which I can drag everywhere over a chart.



  10. shemesh says:

    i don’t see any problem with that (although i haven’t tried it).
    the annotation element is a layer on top of the chart which you can exploit to do whatever you want.
    you can push a canvas in there and apply you’re drag-n-drop.

  11. Frank says:

    Hi Shemesh,

    I have now a canvas as annotation element.
    But this annotation element is covering the whole chart.
    I would like to drag only a small canvas over the chart (like a marker: about 15 x 15 pixel not covering the whole chart).
    Is this going?
    I didn’t get it work.

    Because right now it is as big as the chart.

  12. shemesh says:

    right! your top most container in an annotation element is always the size of its parent chart.
    refer to the canvas as your ‘stage’ – on it you can add ‘actors’ (e.g. your draggable sprite).
    look at the code of this sample, i have added an annotation element to the chart and everything happens INSIDE that element.

  13. Harold says:

    Hi Shemesh,

    Nice work with the Range Selector. Have you tried to do the same thing with Silverlight 2 ?


  14. shemesh says:

    actually YES!
    i do have the same for Silverlight 2!
    will be up in few days.

  15. Hi Shemesh,

    Any news from the Silverlight version ? I’m really interesting in it 🙂

    Thanks !

  16. shemesh says:

    the Silverlight version is here: Silverlight: DragSelect component

  17. Iwo Banaś says:

    Nice component!

    I am also working on open source chart scrolling / zooming component. In my component zooming is achieved by spinning mouse wheel and scrolling by dragging chart series. Currently my component supports charts with LinearAxis or DateTimeAxis. I have tested it with ColumnChart and LineChart but it should work with other subclasses of CartesianChart as well.

    You can find more details at:

    Iwo Banaś

  18. Arun says:

    Great work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: