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 = "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;
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.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);
}
selectionMode="single" change="handleChange(event)">
includeInRanges="true" />
displayName="Profit" selectable="true" />
click="connectTwoPoints('Jan', 2000, 'Mar', 1500);" />