Drawing a dashed line across the tops of Flex Column Chart - apache-flex

Question

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 :
the line need to be dashed
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

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

Answer 2

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 3

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