Learning Flex – Lesson 19, part II More Chart Customization

Chart Legends

The <mx:legend> tag uses it’s dataProvider property to determine what to display. This should be the id of the chart you want the legend for. It has style attributes to determine labelPlacement and direction of layout. It uses the displayName property of a series to determine what to place in the label.

Axis Renderers

You can customize the layout of an axis by using an <mx:AxisRenderer>; tag. This has properties such as canDropLabels, canStagger, title etc. The axis property is used to define which axis the renderer is to be used for. AxisRenderer tags are children of either an enclosing <mx:horizontalAxisRenderers>; or <mx:verticalAxisRenderers> tag.

Vertical axis titles default to rendering top to bottom. To get the more normal bottom to top, you can use an AxisRenderer with the property verticalAxisTitleAlignment set to vertical (thanks to McQuillen Interactive for that gem).

Data Tips

All charts support a boolean property showDataTips that when set to true, will show a tool tip type box when the user mouses over an element. By default, this shows the x and y value but you can specify a function for the property dataTipFunction to customize what’s displayed. This function should accept an object of type mx.charts.HitData and return String. The HitData object has a property item typed to Object which contains the dataProvider item the user has moused over on the chart.

Click Events

If a user clicks in a chart, a chartClick event will be dispatched if no data point is found under the mouse or itemClick if there is an item within the radius specified by mouseSensitivity (default 3 pixels) for the chart. The chartClick event provides the chart the user clicked on, the itemClick event provides a property hitData of type HitData that contains the chart dataProvider item the user clicked on the chart.

Data Selection

You can enable data point selection by setting the property selectionMode on the chart to none, single or multiple. You can select multiple points either by dragging a box around a number of points with the mouse or clicking them while holding down the ctrl/command key.

The selectability of individual chart series can be turned on or off by using the boolean selectable property on the series in question.

The change property on a chart can be used to define a call back function that will be called when the selection in a chart changes. The event fired contains a hitSet property which is an Array of HitData objects corresponding to the chart points selected.

It’s also possible to programatically  select chart items by setting the selectedIndex property for a single point or selectedIndices Array property of a series for multiple points.

Chart Animations

Three built in animations are provided for charts. They are subclasses of the mx.charts.effects.SeriesEffects class and are specified for a series showDataEffect or hideDataEffect attributes.

  • seriesInterpolate – this effect moves the graphics that represent the existing data in a series to the new points. It creates a smooth animation between the two sets of data. This effect is only valid for showDataEffect.
  • seriesSlide – this effect slides the chart data into and out of the chart boundaries. If you use seriesSlide with the hideDataEffect trigger, the series slides from the current position to off screen in the specified direction. For showDataEffect, the effect is reversed, from the specified direction into the chart.
  • seriesZoom – this effect implodes and explodes the chart data into and out of the focal point specified.

Customizing Chart Appearance

You can set styles using CSS for the chart as a whole, individual series in a chart or the axes. Many style elements may also be set inline as attributes of the relevant MXML tag. For instance, you may use the <mx:stroke> tag to specify the style of a chart’s item renderer and <mx:lineStroke> to define a line chart’s lines or <mx:areaStroke> for an area chart.

Here’s a more customized version of the line chart I had in the previous post:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.charts.LinearAxis;

      [Bindable]
      public var notorious:ArrayCollection = new ArrayCollection(
      [ { money: 1000, problems: 1 },
      {money: 5000, problems: 2 },
      {money: 20000, problems: 4 },
      {money:100000, problems: 6 },
      {money:150000, problems:10 } ]);

      private function renderMoney(value:Number, previousValue:Number,axis:LinearAxis):String{
        return dollars.format(value);
      }
    ]]>
  </mx:Script>
  <mx:CurrencyFormatter currencySymbol="$" id="dollars" useThousandsSeparator="true"/>
    <mx:Style>
      LineChart {
         fontFamily:TimesRoman;
         fontSize:14;
     fontWeight:bold;
      }
    </mx:Style>

  <mx:Panel title="Notorious Line chart">
    <mx:LineChart id="myChart"
           dataProvider="{notorious}"
           showDataTips="true">
      <mx:series>
        <mx:LineSeries yField="money" xField="problems">
          <mx:lineStroke>
            <mx:Stroke color="0x33FF33" weight="7" />
          </mx:lineStroke>
        </mx:LineSeries>
      </mx:series>
    <mx:verticalAxis>
            <mx:LinearAxis id="vert" title="Money" labelFunction="renderMoney" />
        </mx:verticalAxis>
    <mx:horizontalAxis>
            <mx:LinearAxis title="Problems"/>
        </mx:horizontalAxis>
    <mx:verticalAxisRenderers>
      <mx:AxisRenderer axis="{vert}" verticalAxisTitleAlignment="vertical"/>
    </mx:verticalAxisRenderers>
        <mx:backgroundElements>
           <mx:Image
                source="@Embed('01-large-cash-money.gif')"
                alpha=".4"
           />
        </mx:backgroundElements>
    </mx:LineChart>
  </mx:Panel>
</mx:Application>

here’s a picture of the “improved” chart:

customized "Notorious" graph

(cash money image courtesy of   http://mindmillion.com/MONEY/)

For other chart components, you should take a look at Kap IT Lab or ILOG Elixir from IBM for charts that are free for non commercial use or the open source project Axiis if you want to construct your own data visualizations.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: