How to draw a line over a flex graph
Submitted by softking on Tue, 07/29/2008 - 11:48
In order to draw a line over a flex graph you can use a CartesianDataCanvas element.
In the following code below you can see how 2 CartesianDataCanvas items are created, then you can use them to draw over the graph
<mx:ColumnChart id="salesImpressionAggregated" type="stacked" dataProvider="{avarageSalesPerMinute}" showDataTips="true" width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis title="IMPRESSION" categoryField="slotId" labelFunction="horizontalAxis_labelFunc" />
</mx:horizontalAxis>
<mx:annotationElements>
<mx:CartesianDataCanvas id="middleCanvas" includeInRanges="true"/>
<mx:CartesianDataCanvas id="avarageCanvas" includeInRanges="true"/>
</mx:annotationElements>
<mx:series>
<mx:ColumnSeries yField="salesCount"
showDataEffect="{eff1}" hideDataEffect="{eff1}"
xField="slotId" displayName="Sales"/>
<mx:ColumnSeries yField="middle_time_between_impressions_slot"
showDataEffect="{eff2}" hideDataEffect="{eff2}"
xField="slotId" displayName="Middle Graph"/>
<mx:ColumnSeries yField="avarage_distance_sec_slot"
showDataEffect="{eff3}" hideDataEffect="{eff3}"
xField="slotId" displayName="Avarage"/>
</mx:series>
</mx:ColumnChart>Then use the CartesianDataCanvas instance to draw lines over the graph. the X,Y coordinates for the line are the coordinates of the Graph which makes it easy to connect 2 dots in the graph or create marker lines
avarageCanvas.lineStyle(2,0x0000FF,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2
);
avarageCanvas.moveTo(avarage_distance_sec_slot, 0);
avarageCanvas.lineTo(avarage_distance_sec_slot,10);