Jozef Chúťka's blog

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: