Simple scenario

The simplest and quite common scenario is having one data provider containing objects with single property determining category and further properties determining values of the series. Such data provider may look something like this (code copied from Flex API examples):

[Bindable]
public var dp:ArrayCollection = new ArrayCollection( [
    { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
    { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
    { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
    { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
    { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);

In such case we have to do three things to simulate CategoryAxis behavior with LinearAxis:

• Declare only yField property of series (not xField).
• Create label function converting data provider index to category name.
• Declare LinearAxis using created label function with interval property set to 1.

Label function may look like this (If xField of series is not specified Flex passes item index as labelValue so all we have to do is find correct item and return category value):

public function categoryLabelFunction(labelValue:Object,
                        previousValue:Object, axis:IAxis):String
{
    var index:int = int(labelValue);

    if (index >= 0 && index < dp.length)
        return dp[index].Month;
    return "";
}

As you can see chart MXML code is only slightly modified compared to code using standard CategoryAxis:

<mx:ColumnChart id="columnChart" width="100%" height="100%"
    gutterLeft="50" gutterRight="40" dataProvider="{dp}">
    <mx:series>
        <!-- Note that xField is not specified -->
        <mx:ColumnSeries yField="Profit" />
        <mx:ColumnSeries yField="Expenses" />
        <mx:ColumnSeries yField="Amount" />
    </mx:series>
    <mx:horizontalAxis>
        <!-- LinearAxis simulating CategoryAxis -->
        <mx:LinearAxis interval="1"
            labelFunction="categoryLabelFunction" />
    </mx:horizontalAxis>
</mx:ColumnChart>

View source is enabled, you can download zipped sources from here.

More complex scenario

In some cases you may need to use xField series properties. For example you may be using separate data providers of different length for different series. In such case additional parse function have to be created to convert category name to numeric value which can be placed along LinearAxis. You can find full example of such scenario here.

View source is enabled, you can download zipped sources from here.

It was the challenge to find the way to easily convert mouse position to data coordinates and vice versa. According to documentation DataTransform objects should be used for this purpose, but unfortunately this documentation is quite incomplete. I especially like this sentence “In theory, a chart can contain multiple overlaid DataTransform objects.” – what does it mean “in theory” ? Having two vertical or horizontal axes is quite common case and in such case different data transformation have to be done for each axis. If charting sources were open it would at least be possible to figure out how data transformation is working reading code…

Anyway, finally I have found that chart series (Series) inherits two function (localToData() and dataToLocal()) to transform points to and from data coordinates. Using these functions I have implemented component named ChartScroller.

All you have to do to enable chart scrolling/zooming using ChartScroller is create instance of ChartScroller and pass reference to the chart to it. You can do it in MXML using the code similar to the one below:

<charts:ChartScroller id="scroller" chart="{chart}" />

<mx:ColumnChart id="chart" width="100%" height="100%"
    gutterLeft="40" gutterRight="10" dataProvider="{dp}">
    <mx:series>
        <mx:ColumnSeries id="series1" xField="x" yField="y2" />
        <mx:ColumnSeries id="series2" xField="x" yField="y1" />
    </mx:series>
</mx:ColumnChart>

ChartScroller is hosted on http://code.google.com/p/reusable-fx/. Currently charts with LinearAxis or DateTimeAxis are supported.

Basic Example

View source is enabled, you can download zipped sources from here.

Example – using ChartScroller with many axes

You can use ChartScroller for chart with multiple axes, so that different axes can be scrolled separately. To scroll/zoom concrete axis grab series using this axis or axis renderer.

View source is enabled, you can download zipped sources from here.

Example – ChartScroller properties

This example demonstrates how you can adjust behavior of ChartScroller by setting some of it public properties.

ChartScroller dispatches change event every time axis minimum/maximum value is modified. It also dispatches valueCommit event after specified time from last modification. This event may be used to retrieve new data or update other controls based on new axes minimum/maximum values. I will present example retrieving data from remote service on valueCommit event in separate post.

I decided to enable scrolling the chart by dragging the axis so that if one wants to see what’s beyond the left edge of chart (s)he can simply drag the charts horizontal axis and scroll it right. To enable zooming the data I chose to use mouse wheel. Generally these ideas was based on popular maps services interfaces.

This example is deprecated, consider using ChartScroller instead!!!

Prototype implementation

Implementation of fully working prototype was really straightforward. In just a few hours I tangled standard column chart with a bunch of event listeners and scrolling/zooming was working. This is what I like in Flex. The next challenge was to create reusable component which could be applied to any chart.

Reusable component implementation

After some investigation I decided to create a subclass of AxisRenderer which will automatically register required listeners and modify corresponding axis minimum and maximum values. I have faced some problems with lack of (or undocumented) functions transforming mouse position along axis renderer to data values. It’s a pity that Flex charting sources are closed, if they were open surely I will find much useful code hidden as private or mx_internal. Anyway, after some playing with debugger I have created my own implementation based on axis minimum/maximum values and renderers gutters. You can see the result below.

TODOs

There are still few things to be done to improve this component.

• The most important is to add event dispatched certain time after user finished moving or zooming the chart. Such event would allow developer to update chart data provider basing on selected minimum and maximum values.
• Cursor might be changed to indicate grabbing axis.
• Area of axis containing labels might also be mouse sensitive.
• If you have any other ideas add a comment!

This example demonstrates scrolling and zooming chart using ScrollableAxisRenderer.
View source is enabled, you can download zipped sources from here.