email: godds@scottlogic.co.ukAn oddness in default behaviour that can throw those new to Flex Charting is that segments in charts that should correspond to a data point are missing. By this I mean charts like those in the following example:
When what is actually desired is the following:
This is achieved by setting the filterData property on the Series to false, for example:
<mx:LineSeries filterData="false" />However, it is worth understanding the functionality that ties in with this property to appreciate the potential consequences. Adobe states:
When possible, set the filterData property to false. In the transformation from data to screen coordinates, the various series types filter the incoming data to remove any missing values that are outside the range of the chart; missing values would render incorrectly if drawn to the screen. For example, a chart that represents vacation time for each week in 2003 might not have a value for the July fourth weekend because the company was closed. If you know your data model will not have any missing values at run time, or values that fall outside the chart’s data range, you can instruct a series to explicitly skip the filtering step by setting its filterData property to false. [ref]
What is actually happening under the covers is that the series a collection of “all the data points” and a collection of “all the data points I think I want to draw”. When filterData is true, i.e. by default, the series creates the collection of “all the data points I think I want to draw” by iterating through the collection of “all the data points” and throwing away any that are null or NaN or that fall outside the axes minimum and maximum values. By contrast, when filterData is false, the two collections are identical. Knowing this it is obvious why the segments are missing in the example above: with the LineSeries if a data point is not to be drawn then the line segments to that data point will not be drawn; with the ColumnSeries if a data point is not to be drawn then the column representing that data point will not be drawn.
Performance-wise, it is worth noting that performance gained by the removal of data point filtering step by setting the filterData property to false will be offset against the performance lost by drawing data points that have no bearing on the view of the chart, i.e. data points that are one or two data points removed from those around the axes maximums. As such, the performance gain/loss and appearance gain/loss should be considered on a case by case basis.
An approach that can be used to get the best of both worlds is to extend the applicable series class and override the updateFilter method to ensure that data points that have no bearing on the view of the chart are filtered out, but any others aren’t. This could, for example, amount to filtering out any data points that do not lie in the range of the x-axis and that are not adjacent in the x-axis to a data point that does lie in the range of the x-axis.
An unfortunate note about the filterData property is that there is a bug when setting it to false on a LineSeries no data tips will show on the series (as can be seen in the example above). The bug has been filed with Adobe and has recently been marked fixed, however, the fix has not yet been released. The bug report details the relatively simple but somewhat nasty workaround that can be used in the meantime.
At Scott Logic the functionality relating to the filterData property as well as the property itself have been carefully manipulated to produce the various zooming and panning capabilities in our Hindsight application and the research charts available through our Market Overview pages.
The source code is now available.
For Area Series when filterData property is set to false.. it gives run time error and doesn’t render the chart.. what should be done for that? because items array of areasSeries shows only non-null values.. what if i want all values in items array including all nulls..
Any pointers would be highly appreciated…
Thanks in advance.
Hi Sayali,
This is a known bug. The bug report includes a workaround in its comments. I hope this solves your problem.
Graham
Can you provide the code for the 2 line charts so I can compare the differences.
Thanks,
Pat
Hi Pat,
Here is a link to the source code. I’ve added a link to it in the article as well. I noticed that there was a code snippet missing as well so I have reintroduced it. Hope that provides all the information you are after.
Graham
Actually, FilterDataOff crashes with:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.charts.series::AreaSeries/updateTransform()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\series\AreaSeries.as:1620]
at mx.charts.chartClasses::Series/validateTransform()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\Series.as:1571]
at mx.charts.chartClasses::Series/updateDisplayList()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\Series.as:828]
at mx.charts.series::AreaSeries/updateDisplayList()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\series\AreaSeries.as:852]
at mx.core::UIComponent/validateDisplayList()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6351]
at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:677]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8633]
at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8573]
Thanks for the post and link to the Adobe bug. This is exactly what I was looking for.
On an area series when filter data is set to true – the area is still filled in on missing data. This behavior is not like the line series example above where there is a blank area in the line.
Any thoughts?
Thanks
Keith
Hi Keith,
I believe this is due to how the default AreaRenderer does its drawing: it simply fills all area below the line. To “fix” this you would have to create a custom series renderer that replaces the default begin fill -> draw polyline -> end fill approach with a repeated begin fill -> draw line segment -> end fill approach. That way it would be simple enough to not fill the areas where there is no line segment.
Hope this helps,
Graham
Hi Graham,
Thanks – I was able to get around this by “tricking” flex. I did this by creating a data object that sets the area_maximum_value = area_minimum_value. I then inserted this data at the beginning of the missing data and at end of the missing data. I believe flex renders the “area” along this missing space, but as the max and min are the same there is no area to draw. A bit of a hack, but it worked.
I am now, however, faced with the same issue on an area chart and this method does not work. I will look into a custom renderer.
Keith
P.S Funny your post was on 4/12 and I swear I checked it as late as the 15th or 20th and didn’t see a reply.
Hi, So I am having the area problem as well. But my issue is a little different. I have missing values that I desire and have those set using the NaN. The problem is on my AreaChart it is placing those values on the chart. So I see my area filled in down to the NaN value which is placed at 0. The dataTip has NaN in it as the value even. If I understand your solution correctly, you are saying that changing the AreaRenderer would fix this. But I don’t understand how this would work if my NaN (missing) value is actually getting plotted on the chart. I would think it would just fill out to that value instead of the prior valid value before it. Any ideas?
Thanks,
Dave
Hi Dave,
I’m afraid I don’t quite follow what you are describing. Do you have an example you could share to give me a better idea of what is happening and what you want to happen?
Regards,
Graham
Sure, I would like to see a gap in my area chart where missing values are. I have assigned the value NaN to the values I don’t want to show. This works perfectly in line charts. However in the area chart it actually plots the value that should be missing. It places the point at 0 on the y axis. So when the area fill draws it draws it from the last known good point, lets say 10, down to 0 or the missing. It should just be drawing it to the 10 and filled in. So what you see is an angle down from 10 to 0. It should just stop at the last know good value of 10. Also since the missing data point is plotted you get a dataTip with value of NaN. That should never happen. Does this make sense?
It’s laborious to find knowledgeable individuals on this topic, however you sound like you know what you’re speaking about! Thanks
You must take part in a contest for top-of-the-line blogs on the web. I will suggest this web site!