Flex chart not displaying right values along x axis

Question

I don't know of any better way to ask this question.

If the below code is run (i know the cData sections are not visible in the preview, something causes it to be ignored).

The result does not represent the data correctly. 1. Flex ignores missing date 24 aug for DECKER. 2. It wrongly associates 42.77 to 23-Aug instead of 24-AUG.

Is there a way in flex, where the x-axis is a union of all available points ?

The below code is entirely from : Adobe website link

I have only commented 2 data points. //{date:"23-Aug-05", close:45.74}, and //{date:"24-Aug-05", close:150.71},

<?xml version="1.0"?>

 [Bindable]
  public var SMITH:ArrayCollection = new ArrayCollection([
    {date:"22-Aug-05", close:41.87},
    //{date:"23-Aug-05", close:45.74},
    {date:"24-Aug-05", close:42.77},
    {date:"25-Aug-05", close:48.06},
 ]);

 [Bindable]
  public var DECKER:ArrayCollection = new ArrayCollection([
    {date:"22-Aug-05", close:157.59},
    {date:"23-Aug-05", close:160.3},
    //{date:"24-Aug-05", close:150.71},
    {date:"25-Aug-05", close:156.88},
 ]);

[Bindable]
public var deckerColor:Number = 0x224488;

[Bindable]
public var smithColor:Number = 0x884422;

]]>

    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer placement="bottom" axis="{h1}"/>
    </mx:horizontalAxisRenderers>

    <mx:verticalAxisRenderers>
        <mx:AxisRenderer placement="left" axis="{v1}">
            <mx:axisStroke>{h1Stroke}</mx:axisStroke>
        </mx:AxisRenderer>
        <mx:AxisRenderer placement="left" axis="{v2}">
            <mx:axisStroke>{h2Stroke}</mx:axisStroke>
        </mx:AxisRenderer>
    </mx:verticalAxisRenderers>

    <mx:series>
       <mx:ColumnSeries id="cs1" 
            horizontalAxis="{h1}" 
            dataProvider="{SMITH}" 
            yField="close" 
            displayName="SMITH"
        >
            <mx:fill>
                <mx:SolidColor color="{smithColor}"/>
            </mx:fill>

            <mx:verticalAxis>
               <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
            </mx:verticalAxis>           
       </mx:ColumnSeries>           
       <mx:LineSeries id="cs2" 
            horizontalAxis="{h1}" 
            dataProvider="{DECKER}" 
            yField="close" 
            displayName="DECKER"
        >
            <mx:verticalAxis>
                <mx:LinearAxis id="v2" minimum="150" maximum="170"/>           
            </mx:verticalAxis>

            <mx:lineStroke>
                <mx:Stroke 
                    color="{deckerColor}" 
                    weight="4" 
                    alpha="1"
                />
            </mx:lineStroke>
       </mx:LineSeries>
    </mx:series>
 </mx:ColumnChart>
 <mx:Legend dataProvider="{myChart}"/>

Answer 1

After much searching ,

The above source used 2 different datasources and 2 different series. Each of datasource is associated with one series. So, there is a 1:1 between datasource : series.

However,

The accepted way to seams to be to use one data source and 2 series. The datasource has one field associated with each of the series. So , there is a 1:1 between dataField : series.

I resolved the problem using the second approach, but that means we have to manually construct a single datasource with right values.

Answer 2

If you switch to /* */style quotes instead of // does it fix the problem? I think the compiler thinks your array collection is all one line (regardless of line breaks) so you may not be able to use // style quotes in it.