This is a guide to help you modify the Flex charting components’ default styles to create charts that are more attractive and easier to comprehend.

I have a fairly long history with building charting components in Flash and Flex. My first job involved developing a suite of “drag and drop” charts and other modeling tools in Flash for a financial modeling application. Now I am working at Gallup, Inc. (the guys who do “the Gallup Poll”…) and have authored a Flex application which renders charts for gallup.com articles. Along the way I’ve studied works by Edward Tufte (he’s been called “the DaVinci of data visualization”) as well as Stephen Few (who offers some great practical application to Tufte’s theory) and others. Given all the research that has been done in human perception and data visualization, I feel that the default styles for the Flex charting components need a bit of tweaking to really optimize their usability. (Also, from what I’ve seen of the ILOG Elixir library, those charts need A LOT of tweaking… but let’s try to stay on topic ;). This article will kick off a series where I will share some of my tricks for making charting components that are both aesthetically pleasing and easy to comprehend.

Getting Started

I’m going to focus on the 3 basic chart types: LineChart, ColumnChart, and BarChart, and you can apply many of these tricks to other more complex types. I created a simple application which sticks one of each chart type in a TabNavigator, gives them some data providers, and sets up the series. Its pretty basic, no special styles are applied. I realize that this would be a very poor structure for a real application - I’m organizing it in the way that best illustrates the techniques below.

From this point on you may find it useful to follow along with the source in the final application.

Application - Source

Develop a Color Scheme

I could write an entire post on the use of color (and I might in the future), but I’ll cover this briefly. Usually, you want all of your series to have equal visual weight, so the two obvious options are to vary the hue, or to vary the brightness and saturation. One thing to keep in mind when varying hue though, is that about 1 in 76 people (thats 3.5 million in the US alone) have some sort of color deficit, the most common being red-green color blindness. Selecting red and green colors that don’t vary significantly in brightness can make your chart very difficult to interpret for a fairly significant part of the population. It also might make your colors indistinguishable when printed in grayscale. Let’s play it safe by using the second option. A great resource that I have used on many occasions is Color Brewer, which was developed by Cynthia Brewer to create good color schemes for maps. The same schemes work great for graphs too! I set it to “sequential” and selected a blue scheme which should work very nicely.

To apply your selected colors, set the “fill” property on each series. You can bind to a SolidColor object created in actionscript, or inline a <fill> tag in mxml.

Changing The Default Styles

First thing’s first: the drop shadows have to go. I’m all for using filters and effects in Flex applications, but they really tend to get in the way of the data when used in charts. This is an easy fix. Just set seriesFilters="[]“ for each chart.

Similarly, since outlining bars will also add extra clutter, I will set stroke="{null}" for each series (BarSeries and ColumnSeries).

Now, because we want to override a lot of default settings on the Axis, AxisRenderers and GridLines, we’ll have to explicitly lay them out in mxml for each chart type. For the BarChart it will look something like this:

AxisRenderers

Rather than the fat blue axis that is available by default, I prefer to use a thinner light gray stroke instead. The only purpose of the axis line is to provide a little visual separation between the categories (or dates) and the data - so it doesn’t need a lot of visual weight. The axis that runs along the LinearAxis (eg the horizontal one on a BarChart, or the vertical one on a ColumnChart) won’t be necessary at all. It will be implied by the grid lines which will all come to an end right at the axis. To turn it off, set showLine="false".

The next part is a little devious. For simple graphs, we don’t need tick marks — we’ll be using Gridlines, so they would be redundant, but you may have noticed by now that I set tickPlacement="outside" and tickLength="n" for all of the axes. What I’m doing is using an invisible (alpha = 0) stroke for the tick marks, and setting their width to create additional space between the labels and the graph. This isn’t crucial, but I think the few pixels of extra white space does a lot to enhance the appearance and readability of the graph.

GridLines

Even the grid lines are often non-essential to the readability of the graph. When the data permits it, I prefer to use Ely Greenfield’s bar labels and leave the gridlines off all together. This results in a super clean and modern look. For the sake of example though, I included them here.

You always want the grid lines to run perpendicular to the LinearAxis. (The only time I can think of that you would want them running both ways is in a chart with 2 linear axes, like a scatter plot). You control this by setting direction="vertical" or direction="horizontal" on the GridLines element. Likewise, we only want to display the origin (i.e. 0) for the same direction. So on a ColumnChart, you would set direction="horizontal", verticalShowOrigin="false" and horizontalShowOrigin="true". On a BarChart, you would set direction="vertical", verticalShowOrigin="true" and horizontalShowOrigin="false".

I chose to make the stroke for the origin the same as the stroke for the Axis: light gray with 3 pixel weight. The stroke for the grid lines themselves should be very faint - no more than 1 pixel wide and only slightly lighter or darker than the background color. We don’t want the grid lines to compete for the viewer’s attention along with the actual data.

The final trick I employed here was offsetting the gridlines -.5 pixels. This solves a glitch where the top line doesn’t always display. Try removing the line x="-.5" in the SampleBarChart class and you will see what I mean. Obviously this is a hack, but it has worked pretty well for me thus far.

LineCharts

There aren’t many differences here except we are setting the “lineStroke” style instead of “fill” on the series. My rule of thumb is that the thickness of the line should approximately equal width/number of points or 3, whichever is less. This is a very general heuristic, but will help ensure that in very dense data sets, the thickness of the line doesn’t obscure the data points. Because this isn’t easy to generalize for all different types of dataProviders and because my data set isn’t dynamic, I just set the weight to 3.

I also added a labelFunction to the DateTimeAxis so that the dates would show up in a more readable format. “Feb 2008″ is much more readable than “2/08″.

The Final Product

That’s it! You could further improve on this example by adding a legend, selecting a better font, and maybe embedding the text - but I’ll leave that for you to experiment with. Of course these settings won’t work for every situation, but I think it makes for a good starting point for whatever types of data you might come across. As you probably have noticed, the emphasis is all on simplicity. By removing the extra “fluff”, you create a chart where the data is the main focus and enable the user to have the best possible experience.

If you have additional suggestions, or questions regarding chart styles feel free to comment.

Application - Source

These are some of the plugins I’ve been experimenting with lately to improve workflow, performance, etc.

AnyEdit Tools

Adds a bunch of useful tools into the right-click context menu, in a submenu called “Convert”. My personal favorites are the “Convert -> Leading tabs to spaces” and “Convert -> Leading spaces to tabs”. I know that the Flex Coding Conventions tell you not to use tabs, but I prefer tabs to spaces in my own code because it keeps everything nicely formatted and easy to maintain. If I need to say, paste some code into a blog entry, I use the AnyEdit tools to convert those tabs back to spaces so that it displays correctly. I also frequently copy and paste bits of code found on websites, the user documentation, etc. into my source, and want to convert those tabs back to spaces. Huge time saver!

• Convert -> Camel <-> Underscores
• Convert -> Leading tabs to spaces
• Convert -> Leading spaces to tabs
• Convert -> Chars to html entities
• Convert -> Html entities to chars
• Convert -> To / From Unicode notation
• Convert -> To / From Base64

RegEx Editor

This is a “View” that you can add to your perspective via Window -> Show View -> Other -> Regex Util. You can enter a regular expression and a string to test against. It supports syntax highlighting and has very useful tooltips for characters that are part of regular expression syntax.

Mylyn

I’m experimenting with using this at work to connect to our JIRA repository. (You could use it to connect to Adobe’s bug tracking system too). Also works for Bugzilla, Trac, and possibly others. Its cool that it pops up a message right in Eclipse whenever a new task is assigned to you, and also that you can tightly integrate it into your regular workflow. The downside is that it seems to be lacking some of the basic features that the web interface has which (because of our system’s configuration) prevents me from being able to create new tasks. Maybe I just need to wait another version or two?

Heap Status

I wrote a separate blog post about this a while back, its cool to be able to get a glimpse of how the VM is managing your memory.

Keep Resident

Uses some Windows hooks to try and keep Eclipse in memory as much as possible. Use this if you are experiencing frequent “hang-ups” with your IDE.

The performance of Eclipse (and other large Java applications) has long suffered due to the Windows virtual memory manager. Windows has a tendency to preemptively swap Java processes out of physical memory, even when there is still plenty of physical memory available. This interacts very poorly with Java processes, which do not have good locality and touch a lot of memory. The problem is exacerbated when Java performs garbage collection, which causes the Java process to touch lots of memory that has been paged out to disk. Ever had Eclipse randomly hang for 15-20 seconds? This is most likely the culprit.