Simple Chart Overlay

One of the screens I created for work is a “dashboard” type that allows the view to quickly see the current status of service call volume.   There are multiple charts on the display, but one of them is a column chart that shows the current day’s numbers vs. the prior week of the same day.  By having this information, the viewer can see if the volume of calls is in a “normal” range, because the it fluctuates throughout the day and the week, but is similar based on the day of the week.  Friday’s call volume is usually lower than Wednesday volume.  When I initially created the display in Flex 3, I had to worry about putting both column charts in the same x and y spot in order for the overlay to work.  With the Group component, it makes it much easier, because it automatically puts the items stacked upon each other.

The example creates some random data of the number of red, green and yellow apples picked in an hour.  The random data is created for all of the previous day’s hours and then a 15 second timer creates the current day’s hours one by one.  In the real chart, the data is update every 15 minutes. The bottom chart is added first, which is the “Yesterday” values and the top chart is added next, which is “Today” values.  The “Yesterday” values are slightly hidden by using a alpha setting in the “Today” chart.

// Bottom Chart for "Yesterday" values

<mx:ColumnChart id="countsYesterday" width="100%" height="100%" showDataTips="true" dataProvider="{acChartYesterday}">

// Top Chart for "Today" values
<mx:ColumnChart id="countsToday" width="100%" height="100%" showDataTips="true" dataProvider="{acChartToday}" alpha=".65">

To help with the color offset, I picked colors for the “Yesterday” values that seem to be faded version of the “Today” colors.  You could use any colors for the columns, but having less bright values in the back help with contrast.  It also helps when the values for “Today” are greater than for “Yesterday”.  The only downfall for doing things this way is that the datatips for the bottom chart cannot be seen.  But, I’m sure the datatip function could be modified to get both values.

View Source