Iwo Banaś - Flex Blog » Flex 3

Scrolling and zooming chart with CategoryAxis

Iwo Banas — Fri, 07 Aug 2009 20:12:44 +0000

Title of this post is a little bit misleading because it is not possible to use ChartScroller directly with CategoryAxis. This is because ChartScroller relays on axis minimum/maximum properties which are not present in CategoryAxis. Luckily it is possible to simulate CategoryAxis behavior with LinearAxis which is supported by ChartScroller. I will describe how to do it in this post.

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:

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.

Scrolling and zooming chart with ChartScroller

Iwo Banas — Fri, 10 Jul 2009 14:00:54 +0000

Some time ago I presented scrolling chart by using modified axis renderer (ScrollableAxisRenderer). I rethought this concept and come to the point that axis renderer should render axis not scroll the chart, so chart scrolling should be implemented as separate component. This is especially true in case of charts with many axes and renderers. My new idea was to create nonvisual component which will take reference to a chart and add appropriate listeners modifying axes minimum/maximum to achieve scrolling /zooming.

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:

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.

Creating MDataGrid date filter

Iwo Banas — Wed, 01 Jul 2009 12:33:50 +0000

In this post I will describe how to create custom filter for MDataGrid (my extension of Flex 3 DataGrid described in one of the previous posts and hosted on http://code.google.com/p/reusable-fx/). I will guide you through creation of date filter as an example.

I consider extensibility one of the most important feature of well designed reusable component and that’s why I am trying to make process of creating new MDataGrid filters as straightforward as possible.

Following “Favor object composition over class inheritance.” rule I decided to split filtering functionality among a number of classes rather than write another thousand lines of DataGrid code. At the first glance the solution may look complicated but after understanding responsibilities of “filters” and “filter editors” it is really straightforward.

Filter editors are the components displayed below column header after clicking filter button. Filter editor know nothing about business logic of filtering, their only responsibility is to present current state of the filter to the user and modify filter according to users actions. Filter editor may be any component implementing IColumnFilterEditor interface. The default implementation of this interface is FilterEditorBase class extending Box which is used as a base class for all standard MDataGrid filter editors. In the presented example we will create filter editor in MXML extending FilterEditorBase class.

Filter classes are where actual filtering takes place, they implement filterFunction which is used to eliminate items from MDataGrid data provider. Filters are also responsible for examining MDataGrid and presenting information about MDataGrid content to filter editors. In our example filter will present minimum and maximum dates found in given column. All filters extends ColumnFilterBase class.

To implement date filtering mechanism two classes have to be implemented: filter class (DateRangeFilter) and filter editor class (DateChooserFilterEditor).

DateRangeFilter

DateRangeFilter extends ColumnFilterBase class and defines four fields: dataMinimum, dataMaximum, minimum and maximum.

dataMinimum and dataMaximum represents a earliest and latest dates found in MDataGrid. These fields are updated by updateOriginalDateRange() function.

minimum and maximum defines the range of dates which will be displayed in MDataGrid. By default minimum is set to dataMinimum and maximum is set to dataMaximum which means that all data are displayed (filter is inactive). It is important to call commitFilterChange() function inside minimum/maximum setter to inform MDataGrid that filter value have changed.

DateRangeFilter also overrides two functions defined in ColumnFilterBase:

isActive getter checks if filter is active i.e. if it may eliminate any items form MDataGrid. In our case isActive getter simply checks if minimum and maximum differs from dataMinimum and dataMaximum.

override public function get isActive():Boolean
{
    return (minimum != dataMinimum || maximum != dataMaximum);
}

filterFunction checks if item passed as an argument should be eliminated. First date displayed in column associated with this filter is extracted from given item and then it is compared against minimum and maximum. If the value is within the range true is returned (item is not eliminated) other ways false is returned (item is filtered out). If no date is fond for the given item true is returned. filterFunction is called many times for every MDataGrid item so it should not be computationally expensive.

override public function filterFunction(obj:Object):Boolean
{
    var value:Date = itemToDate(obj);

    if (value)
    {
        if (minimum && value < minimum)
        {
            return false;
        }
        if (maximum && value > maximum)
        {
            return false;
        }
    }
    return true;
}

You can find two additional functions in DateRangeFilter code: itemToDate() is responsible for extracting date from data item and originalCollectionChandeHandler() refresh dataMinimum and dataMaximum when MDataGrid original collection (copy of data provider) changes.

DateChooserFilterEditor

Good news: creating filter editors in MXML is much simpler than coding filter and the effect is instantly visible!

To make curly brackets binding simpler it is good idea to create strongly typed, bindable reference to filter instance edited by filter editor. The code below is the only code placed in