Learning Flex – Lesson 19, Visualizing Data

The Flex charting components are part of the Data Visualization component library, a separate  download found on the Flex SDK download page. Prior to Flex 3.4, components created with this library would show a trial watermark if used without a Flex Builder professional key. Version 3.4 no longer has this watermark but it’s my understanding that Adobe still expects you to have a professional license to use these components “for real”.

Flex supports the following chart types: area, bar, bubble, candlestick, column, high low open close (for stocks), line, pie and plot.

All these chart types have a similar construction – each chart type defines what kind of chart to display, has attributes for the data to render (dataProvider), whether tool tips are shown etc. Child tags then define axes, one or more series and styling elements.

Each chart must have a series defined before data will be rendered and each type of chart has it’s own series class that can be used (eg <mx:PieChart> has <mx:PieSeries>). Some charts allow you to mix different series types within the same chart. The series will define which field of the dataProvider is to be used for the chart.

The Axis class is required for any of the Cartesian charts to specify what data should be rendered for the horizontal and vertical axes. Subclasses are used to specify numeric (LinearAxis) or String based (CategoryAxis) data.

An AxisRenderer optionally defines how the axis will be shown (including labels, tick marks and title). CSS, text properties, label rotation and spacing (to allow labels to be dropped for readability) are items that can be specified by an AxisRenderer.

Other optional elements are backgroundElements for such things as background images and annotationElements for items like grid lines (both are subclasses of ChartElement).

Pie Charts

A PieSeries has a labelPosition style attribute which is used to define how labels are rendered for the chart. The available values are:

  • none – default, no labels
  • outside – draw labels around the boundary of the pie
  • callout – draw labels in two vertical columns on either side of the pie. The pie will shrink to accommodate them.
  • inside – labels are drawn approximately 70% along each wedge, labels will be shrunk to avoid interference. Labels shrunk below the calloutPointSize property are removed and larger wedge labels have priority if they overlap.
  • insideWithCallout – labels are drawn inside the pie but if they shrink below a legible size, they are converted to callouts.

The label will default to the data being rendered in the pie but this can be changed by using the property labelField to define an element in the dataProvider to use or labelFunction to specify a rendering function. This function should have the signature –

(data:Object, field:String, index:Number, percentValue:Number):String

The data is the dataProvider item being rendered, field is the name of the field in that item that’s being rendered, index is the index into the dataProvider for this wedge and percentValue is the percentage of the whole this wedge represents.

You may also specify a nameField property which defines the field of the dataProvider to use as the name of the wedge in tool tip objects and legends.

You can generate a doughnut or wheel chart (a hollow center) by specifying the innerRadius property on the PieChart. This is a number between 0 and 1 as a fraction of the entire pie’s radius.

Pie charts can be “exploded” so wedges are drawn partially outside the pie. To explode all wedges uniformly, set the explodeRadius property on the PieSeries to a value between 0 and 1 representing the fraction of pie radius to use. To explode wedges by different amounts, define an array of values between 0 and 1 and pass this to the PieSeries perWedgeExplodeRadius property.

Here’s the code for a simple pie chart:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable]
      public var snowSports:ArrayCollection = new ArrayCollection(
      [ { sport: "Ski", percent: 48 },
      {sport: "Snowboard", percent: 46 },
      {sport: "Snowshoe", percent: 4 },
      {sport: "Other", percent: 2 }]);
    ]]>
  </mx:Script>
  <mx:Panel title="Pie Chart">
    <mx:PieChart id="myChart"
           dataProvider="{snowSports}"
           showDataTips="true">
      <mx:series>
        <mx:PieSeries field="percent"
                labelField="sport"
                labelPosition="callout"/>
      </mx:series>
    </mx:PieChart>
  </mx:Panel>

</mx:Application>

here’s a picture of the chart created:

Pie Chart Example

Line Charts

For a LineChart or other Cartesian graph, you specify the yField property of your series type to define which field of the dataProvider is to be used for for the y axis plot and an xField property to determine the x axis location. If you omit the xField, Flex arranges the data points in the order of the data in the dataProvider.

The axis labeling is defined using <mx:horizontalAxis> and <mx:verticalAxis> tags. Flex supports 4 types of axes:

  • CategoryAxis – map data of discrete values such as cities, teams etc. A CategoryAxis can optimize it’s rendering if it’s data is more static
  • LinearAxis – map numeric data to the axis. This can be used to provide valid numeric ranges, numbers to skip etc
  • LogAxis – map logrithmic data to an axis (labels for powers of 10)
  • DateTimeAxis – map time based values to an axis and format the labels. You may also disable particular dates from being shown (only show workdays or weekends for instance).

It is possible to define multiple axes for a chart. To do this, you create axes for each series being displayed.

Here’s the code for a simple line chart:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [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}]);
    ]]>
  </mx:Script>
  <mx:Panel title="Notorious Line chart">
    <mx:LineChart id="myChart"
           dataProvider="{notorious}"
           showDataTips="true">
      <mx:series>
        <mx:LineSeries yField="money"
                xField="problems"/>
      </mx:series>
    </mx:LineChart>
  </mx:Panel>
</mx:Application>

here’s a picture of the chart created:

Notorious BIG Chart

I’ll continue with charts in part 2 shortly.

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: