Flex Charts – interpolating values in Series

interpolateValues

Recently, I felt into problem with chart when using interpolateValues parameter set to true. You expect it to work as described in Language Reference. And guess what, it works 🙂 , but make sure you provide correct numeric values (not strings – those were problematic in my case). Parameter interpolateValues is able to draw a continuous line by interpolating the missing value. Missing values means null (v1 in example) or when key is omited (v2).

If you want to use Charts in Flex, download data visualization components for your flex builder and copy content into sdk directory.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    backgroundColor="#ffffff">
<mx:Script>
<![CDATA[
    import mx.collections.ArrayCollection;
    
    [Bindable]
    private var dp:ArrayCollection = new ArrayCollection([
        {Month: "Jan", v1: 1000, v2: 900, v3: "800", v4: "700"},
        {Month: "Feb", v1: null, v3: null},
        {Month: "Mar", v1: 2000, v2: 1900, v3: "1800", v4: "1700"} 
    ]);
]]>
</mx:Script>

<mx:Stroke id = "s1" color="blue" weight="2"/>
<mx:Stroke id = "s2" color="red" weight="2"/>
<mx:Stroke id = "s3" color="green" weight="2"/>
<mx:Stroke id = "s4" color="yellow" weight="2"/>

<mx:LineChart id="lineChart" height="100%" width="100%" dataProvider="{dp}">
    <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="Month"/>
    </mx:horizontalAxis>
    <mx:series>
        <mx:LineSeries yField="v1" form="curve" displayName="v1" 
            lineStroke="{s1}" interpolateValues="true"/>
        <mx:LineSeries yField="v2" form="curve" displayName="v2" 
            lineStroke="{s2}" interpolateValues="true"/>
        <mx:LineSeries yField="v3" form="curve" displayName="v3" 
            lineStroke="{s3}" interpolateValues="true"/>
        <mx:LineSeries yField="v4" form="curve" displayName="v4" 
            lineStroke="{s4}" interpolateValues="true"/>
    </mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{lineChart}" direction="horizontal"/>
</mx:Application>

Notice numeric vs. string values in dataProvider. Result:

interpolateValues

3 comments so far

  1. ongmi June 3, 2010 04:31

    Thanks!!!!

  2. bachelor_two_seven June 8, 2010 22:10

    Thanks for this post. It was very helpful.

  3. Neeraj November 30, 2011 07:59

    This is really helpful.Such a wierd behaviour with Flex would have been very difficult to catch, if this post had not been there.Thanks a lot

Leave a comment

Please be polite and on topic. Your e-mail will never be published.