Drawing a dashed line across the tops of Flex Column Chart

Question

Hi all,

Please find the below code

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
 <![CDATA[
  [Bindable]
        public var testAC:Array = [
           {date:"without", close:50},
           {date:"with", close:45}           
        ];

 ]]>
</mx:Script>
 <mx:ColumnChart id="myChart" dataProvider="{testAC}">
  <mx:horizontalAxis>
   <mx:CategoryAxis categoryField="date"/>
  </mx:horizontalAxis>
  <mx:verticalAxis>
   <mx:CategoryAxis categoryField="close"/>
  </mx:verticalAxis>
  <mx:series>
   <mx:ColumnSeries dataProvider="{testAC}" xField="date" yField="close"/>
   <mx:LineSeries dataProvider="{testAC}" xField="date" yField="close"/>
  </mx:series>
 </mx:ColumnChart>
</mx:Application>

This code is drawing a colum chart with two columns and drawing a line across the top of both columns. I have two requirements :

1. the line need to be dashed
2. as of now the line starts from top right corner of the first column to the same corner of the second column. How can i shift the line to the left, so that it starts from center of first column to center of second column.

Regards, PK

Answer 1

For many of my charts with complex skinning I've been using Axiis. It's very Degrafa-like and would allow you to take a degrafa stroke and put it wherever you'd like on your 'dataCanvas'.

Here's an example that is pretty straight fwd: http://axiis.org/examples/HClusterStackExample.html

'Tisn't the best answer in the land, but using axiis is so simple, and yet it allows for complex fills and strokes that aren't allowed via mxml with plain-ol' flex charting.

Best of luck, Jeremy

Answer 2

Hi friends, after a long research i finally completed drawing dashed line chart. I used DashedGraphicUtilities provided by Adobe itself to draw the dashed line. I extender the LineSeries and used this DashedGraphicUtilities to draw the dashed line. That solved my first and mail problem. I will update this whenever i get the solution for the second.

And i got the solution for second problem also. The line chart was displaying perfectly as i needed, when i changed the graph type from ColumnChart to CartesianChart. I used column series and line series inside that and the line and columns were coming perfectly.

Regards, Anoop

Answer 3

You can draw a line between two values on your Cartesian Chart with

<mx:Script><![CDATA[
    private function connectTwoPoints(
        month1:String, value1:Number, 
        month2:String, value2:Number):void 
    {
        // Draw Line
        canvas.clear();
        canvas.lineStyle(4, 
            0xCCCCCC, 
            .75, 
            true, 
            LineScaleMode.NORMAL, 
            CapsStyle.ROUND, 
            JointStyle.MITER, 
            2);
        canvas.moveTo(month1, value1);
        canvas.lineTo(month2, value2);
    }
]]></mx:Script>

<mx:annotationElements>
    <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
</mx:annotationElements>

The line that you draw will be an "Annotation Element" using the "Cartesian Data Canvas". Annotation Elements are drawn in the foreground. Perfect Example:
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_13.html