Chart Slicer Component Released

Author: Thomas Gonzalez



Today I am releasing a chart slicer component that behaves like the one seen on Google Finance.

I had several requests for the source code for my Google Finance sample, but regretfully the code is embarrassingly sloppy, and I am not sure when I will be getting back to cleaning it up.  One of the components within that example is this chart slicer control, which I have now created a simple example for, with source code included.

This control can target any Flex cartesian chart, although I have only tested it with a few, so I am sure people will find edge cases (or perhaps not so edge cases) that break the component.   It is easy enough to change the display in the control from an area chart to any of the MicroCharts included with a little customization.

This component has a liberal use of Degrafa to make all the magic work, from custom skins on the sliders, to the microcharts used to represent the data, to the tick marks within the slider track the reference the positioning of the items in the target chart.  You will also notice some extra logic that has the sliders snap into alignment with the actual item renderers of the target chart.   With larger data sets this is less noticeable, but with small ones it is very effective.   

Many thanks to Doug McCune for his HSlider control, and the efforts put forth by Brandon Meutzner.

You can see the example and download the code here.   As usual all code is released under an MIT license.

 

4 Responses to “Chart Slicer Component Released”

  1. Anonymous

    I don't always have a direct need for your components, but I learn tremendously from studying your code. Thanks for your efforts and generosity. Nice component.


  2. Thomas Gonzalez

    @Anon, that is probably one of the biggest compliments I have received since I started releasing these components. Thank you. Feedback like that is what makes it worthwhile for me.

    I am looking at writing a series of articles for InsideRIA, if that comes together I will definitely blog it.

    - Tom


  3. Anonymous

    Hi,

    I have also been learning from your example which is fantastic. I keep getting hung on the render of the second vertical axis, was wondering if you had the time to point me in the right direction.

    Thanks for the tut and code!


  4. Anonymous

    Me too. Thank you for setting a great example and for sharing. This stuff will help my application kick ass!


Leave a Reply