xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"
height="600">
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.ChartItem;
private function connectTwoPoints(month1:String,value1:Number,month2:String,value2:Number):void {
canvas.clear();
canvas.lineStyle(4,0xCCCCCC,.75,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.MITER,2);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
l1.text = "Month: " + month1;
l2.text = "Expense: " + value1;
l3.text = "Month: " + month2;
l4.text = "Expense: " + 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 does not
// draw a line when the first item is clicked.
private var chartHasLine:Boolean = true;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{month:"Jan", profit:20, expenses:15, amount:145},
{month:"Feb", profit:1, expenses:2, amount:60},
{month:"Mar", profit:15, expenses:5, amount:3}
]);
private function handleChange(event:Event):void {
var sci:ColumnSeriesItem =
ColumnSeriesItem(myChart.selectedChartItem);
if (chartHasLine) {
canvas.clear();
s1 = sci.item.month;
v1 = sci.item.expenses;
chartHasLine = false;
} else {
s2 = sci.item.month;
v2 = sci.item.expenses;
connectTwoPoints(s1, v1, s2, v2);
}
}
dataProvider="{expenses}" selectionMode="single"
change="handleChange(event)">
includeInRanges="true" />
displayName="Expense" selectable="true" />
click="connectTwoPoints('Jan', 1500, 'Mar', 500);" />