I wanted the ability to color charts based on their value, giving them red/yellow/green colors based on if they were lower/equal to/higher than a given value. The ability to use gradients instead of solid colors was also a requirement. I basically wanted to do something like this:

The columns below the line are red, on the line are yellow, and above the line are green. The need might arise to do more colors than this, so the code should be flexible

But almost as important as the final look of the graph itself was the ability to re-use the code without having to rewrite parts of it for each implementation. And I wanted to be able to use it in a flex application using only mxml, but still be able to use it in ActionScript if needed.

In the end I wanted to be able to define the threshold or goal as part of the data that the graph used and the code would color the columns based on that data (if it was greater than/less than/equal to). So the code to use the “coloring object” would look something like this (where we define High/Mid/Low colors):

<mx:series>
  <mx:ColumnSeries xField="Month" yField="Income" displayName="Income2">
    <mx:itemRenderer>
      <mx:Component>
        <utils:ColoredSeriesItemRenderer valueField="Income" thresholdField="Goal">
          <utils:thresholdGradients>
            <mx:Object>
              <mx:High><mx:Object gradient="[0x55dd55,0x005500]" /></mx:High>
              <mx:Mid><mx:Object gradient="[0xdddd55,0x555500]" /></mx:Mid>
              <mx:Low><mx:Object gradient="[0xdd5555,0x550000]" /></mx:Low>
            </mx:Object>
          </utils:thresholdGradients>
        </utils:ColoredSeriesItemRenderer>
      </mx:Component>
    </mx:itemRenderer>
  </mx:ColumnSeries>
 
  <mx:LineSeries xField="Month" yField="Goal" displayName="Goal"/>
</mx:series>

But to be flexible I also wanted to be able to define the goal in the code, where I could give it as many ranges with associated colors as I wanted. This code would look something like this:

<mx:series>
  <mx:ColumnSeries  xField="Month" yField="Income" displayName="Income1">
    <mx:itemRenderer>
      <mx:Component>
        <utils:ColoredSeriesItemRenderer valueField="Income">
          <utils:ranges>
            <mx:Array>
              <mx:Object lowerLimit="280" color="0xFF0000" />
              <mx:Object lowerLimit="240" upperLimit="280" gradient="[0xFFFF00,0x55FF55]" />
              <mx:Object lowerLimit="220" upperLimit="240" gradient="[0x5555FF,0x000099]" />
              <mx:Object lowerLimit="200" upperLimit="220" gradient="[0x0000FF,0x00FF00,0xFF0000]" />
              <mx:Object upperLimit="200" color="0xFFFF00" />
            </mx:Array>
          </utils:ranges>
        </utils:ColoredSeriesItemRenderer>
      </mx:Component>
    </mx:itemRenderer>
  </mx:ColumnSeries>
</mx:series>

Creating a custom item renderer allowed me (and now you too) to change the colors of the columns as they were being created. This works so much better than other solutions I saw (laying a filter on top of the columns) because it automatically changes when the column changes.

I created a new object out of it so you can just drop it in the directory where you keep your other library files (and change the package name if needed) and start using it. I have included it along with some sample files in a handy zip file for you…

I hope this saves you all the time it could have saved me (if I would have found something similar).

Download the ColoredSeriesItemRenderer.as object with two full examples that you can compile and try in a handy zip file.

If you are not familiar with including custom made objects into an mxml file then you’ll need to know about packages. In the sample code I used a package name of “utils”, which means that the actionscript object is defined with an “utils” package declaration and is in an “utils” subdirectory. Also, the example files will require you to define the xml namespace in the Application tag. This is done by adding something like this: xmlns:utils=”utils.*”

Creating graphs with Adobe’s Flex 2 is a pretty simple task, just throw together some short XML and you’re done. But like most “easy” technologies things get a little more difficult when you want to do more advanced things like making sections of the graphs stand out or keeping multiple graphs in sync with one another. In this tutorial I will take you through how to give your graphs a little more “flash” and how to make things happen in one graph when you click on another graph.

If you haven’t already you can download the free Flex 2 SDK from Adobe. And you can download a free trial of the Flex 2 charting library.

In your favorite text editor (Eclipse anyone?) start a new file and start with some basic code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
  xmlns:local="*" xmlns:view="view.*">
 
<mx:Script>
  <![CDATA[
    import mx.collections.ArrayCollection;
 
    [Bindable]
    private var profitPeriods:ArrayCollection = new ArrayCollection( [
    { period: "Qtr1 2006", profit: 32 },
    { period: "Qtr2 2006", profit: 47 },
    { period: "Qtr3 2006", profit: 62 },
    { period: "Qtr4 2006", profit: 35 },
    { period: "Qtr1 2007", profit: 25 },
    { period: "Qtr2 2007", profit: 55 } ]);
  ]]>
</mx:Script>
 
  <mx:Panel x="10" y="10" width="100%" height="100%" title="Profit By Period">
 
    <mx:PieChart id="profitPie" dataProvider="{profitPeriods}" showDataTips="true" width="100%" height="100%">
      <mx:series>
        <mx:PieSeries field="profit" nameField="period" labelPosition="callout" showDataEffect="{interpolate}" />
      </mx:series>
    </mx:PieChart>
  </mx:Panel>
</mx:Application>

Getting more advanced

This code basically creates a sample dataset and a pie chart to display it. Nothing fancy and if we were using an XML feed we wouldn’t have any need for ActionScript at all, since we are only using it to create the data in this example.

Now let’s say that your customer (or boss) wants to have the data shown in multiple ways. For our example let’s say that he wants to see a pie graph, a bar graph and a data grid. So he can see the data in whatever way he wants to. No problem there, throwing another chart and grid on the page is just a few more lines of xml, but what if they are to interact? Say your boss wants to be able to click on a piece of the pie chart and have the same record highlighted in the pie chart, the column chart and the data grid. Now we’re going to have to whip out the ActionScript.

We are going to need three methods, one to highlight the pie graph, one for the column chart and a final one for the data grid. Then we can call all three of these methods whenever a chart or grid is clicked on. We are using three methods instead of just one giant method in case we ever want to use them again, in a different circumstance.

import flash.display.DisplayObject;  //The items in the column chart are DisplayObjects
 
private var prevSelectedColumn:DisplayObject;
/*
We want to be able to "unhighlight" whatever column we highlighted last time, so
we'll create a variable to keep it simple. If you are using a graph with
multiple datasets then you'll obviously want to loop through them and reset them
that way instead of using this method.
*/
 
/*
* This function will highlight a column/bar in a column/bar chart
* @param barName  The name/id of the bar/column chart
* @param barIndex The position of the column you want to highlight
*/
private function barHighlight( barName:String, barIndex:int ):void
{
  if (prevSelectedColumn)  //If we selected something before, unselect it:
  {
    prevSelectedColumn.alpha = .8;
    prevSelectedColumn.filters = [];  //remove the filters
  }
 
  //This gets the individual column that we are looking for
  prevSelectedColumn = this[barName].series[0].getChildAt( barIndex );
 
  if (prevSelectedColumn)  //highlight the new column:
  {
    prevSelectedColumn.alpha = 1;
    prevSelectedColumn.filters = [new GlowFilter(), new DropShadowFilter()];
  }
}
 
/*
* This function will highlight a row in a data grid
* @param dataGridName The name of the data grid that contains the row to highlight
* @param rowIndex   The position of the row in the grid to highlight
*/
private function rowHighlight( dataGridName:String, rowIndex:int ): void
{
  this[dataGridName].selectedIndex = rowIndex;  //the easy one...
}
 
/*
* This function "explodes" a piece of pie from a pie chart
* @param pieName  The name of the pie chart that is to be modified
* @param pieIndex The index of the pie piece that is to be modified
*/
private function pieHighlight( pieName:String, pieIndex:int ):void
{
  var explodeData:Array = [];  //create an empty array
  explodeData[ pieIndex ] = 0.15; //Set the index of our pie piece to > 0
  this[pieName].series[0].perWedgeExplodeRadius = explodeData;
  /*
  The pie's wedges can be "exploded" outward to highlight them. The amount is
  controlled by an array, so we just create a empty array (which would set
  everything to no padding) and add padding for the index that is to be
  highlighted. This has the added bonus of un-highlighting the piece that was last
  highlighted (if any). Sweet!
  */
}

Adding events

Of course, this is using inline ActionScript. If you want to separate it into another file you’ll have to use “Application.application” instead of “this” (see the downloadable GraphHighlighting.as file below). That should give us a snazzy little effect every time we click on an item in any of the charts or in the grid. But they won’t be doing any effects unless we add event handlers to our objects. Let’s do that now.

So change the xml for your pie chart and add this to the PieChart tag:

itemClick="pieChartClick(event, 'profitGrid', 'profitBar');"

And then you can add the ActionScript to handle that event (which, of course, will call our handy three functions):

/*
* This is run when the pie chart is clicked on
* @param event    The click event
* @param dataGridName The string name of the data grid that should be highlighted
* @param barName  The string name of the column chart that should be highlighted
*/
private function pieChartClick( event:ChartItemEvent, dataGridName:String, barName:String ):void
{
  pieHighlight( event.currentTarget.id , event.hitData.chartItem.index );
  rowHighlight( dataGridName, event.hitData.chartItem.index);
  barHighlight( barName, event.hitData.chartItem.index );
}

Then do this for the other chart and the datagrid and you’ll be set.

Conclusion and downloads

So, if you did your calculations correctly, remembered to carry the one and crossed your fingers you probably ended up with something like this:

Actually, it probably won’t look like that, but the sample code download does (see below).

It is more likely that you’ll probably be making the charts communicate using different data (click on one part of a chart and get detailed information in another chart), but this should at least get you started in the right direction.

Download the complete inline ActionScript example: This file is the complete example and you should be able to save it and compile it with the mxml compiler that came with the Flex 2 SDK (assuming you have the charting library, or the charting trial library).

Download the “external” ActionScript methods: This file is what you can use if you want to keep these functions in your library for future use. I put this in the FlexAS.GraphHighlighting package, so if you don’t change the package name you should put this into a “FlexAS/GraphHighlighting/” subfolder off of your main flex directory.