<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#818282">
<mx:Script><![CDATA[
import mx.controls.Label;
import mx.charts.series.items.LineSeriesItem;
import mx.collections.ArrayCollection;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.ChartItem;
[Bindable]
public var profits:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:1300},
{Month:"Feb", Profit:750},
{Month:"Mar", Profit:1100},
{Month:"Apr", Profit:1000},
{Month:"May", Profit:980},
{Month:"Jun", Profit:1500},
{Month:"Jul", Profit:2060},
{Month:"Aug", Profit:1700},
{Month:"Sep", Profit:1690},
{Month:"Oct", Profit:2200},
{Month:"Nov", Profit:2550},
{Month:"Dec", Profit:3000}
]);
private function connectTwoPoints(month1:String,
value1:Number,
month2:String,
value2:Number
):void {
canvas.clear();
canvas.lineStyle(4,
0xff0000,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2
);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
l1.text = "Month: " + month1;
l2.text = "Profit: " + value1;
l3.text = "Month: " + month2;
l4.text = "Profit: " + value2;
chartHasLine = true;
}
private var s1:String = new String();
private var s2:String = new String();
private var v1:Number = new Number();
private var v2:Number = new Number();
// Set this to true initially so that the chart doesn't
// draw a line when the first item is clicked.
private var chartHasLine:Boolean = true;
private function handleChange(event:Event):void {
var sci:LineSeriesItem =
LineSeriesItem(myChart.selectedChartItem);
if (chartHasLine)
{
canvas.clear();
s1 = sci.item.Month;
v1 = sci.item.Profit;
addLabelsToColumn(s1,v1);
chartHasLine = false;
} else
{
s2 = sci.item.Month;
v2 = sci.item.Profit;
addLabelsToColumn(s2,v2);
connectTwoPoints(s1, v1, s2, v2);
}
}
[Bindable]
public var columnLabel:Label;
private function addLabelsToColumn(s:String, n:Number):void {
columnLabel = new Label();
columnLabel.setStyle("fontWeight", "bold");
columnLabel.setStyle("color", "0x660000");
columnLabel.text = s + ": " + "$" + n;
// This adds any DisplayObject as child to current canvas.
canvas.addDataChild(columnLabel, s, n);
}
]]></mx:Script>
<mx:Panel title="Vertical Line For Column Chart" x="364" y="30" width="479" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF" height="563" borderColor="#A4A09C" color="#000000" headerColors="red">
<mx:LineChart id="myChart"
dataProvider="{profits}"
selectionMode="single"
change="handleChange(event)"
width="458">
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{profits}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
id="series1"
xField="Month"
yField="Profit"
displayName="Profit"
selectable="true"
/>
</mx:series>
</mx:LineChart>
<mx:RadioButton id="b1"
label="Connect One Points"
click="connectTwoPoints('Jan', 1300, 'Jan', 0);"/>
<mx:RadioButton id="b0"
label="Connect Two Points"
click="connectTwoPoints('Jul', 2060, 'Jul', 0);"/>
<mx:RadioButton id="b2"
label="Connect Three Points"
click="connectTwoPoints('Sep', 1690, 'Sep', 0);"/>
<mx:HBox visible="false">
<mx:VBox>
<mx:Label text="First Item"/>
<mx:Label id="l1"/>
<mx:Label id="l2"/>
</mx:VBox>
<mx:VBox >
<mx:Label text="Second Item"/>
<mx:Label id="l3"/>
<mx:Label id="l4"/>
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:Application>
DEMO
