1 person found this helpful
In order to draw on a PieChart wedge, you're going to need to use the PolarDataCanvas:
With the PolarDataCanvas, you draw using data coordinates as opposed to pixel coordinates. E.g you would use Date objects on the X axis and Numbers for the Y axis: like so polarDataCanvasInstance.
drawCircle(new Date(), 85, 45);
You don't need to find out the X,Y coordinates of the start and end positions of the wedge corner if you know what the data is, because you will draw from that.
If you wish to draw in the background, add a PolarDataCanvas instance to the backgroundElements array of your chart.
If you wish to draw in the foreground, add a PolarDataCanvas instance to the annotationElements array of your chart.
Thanks to showing interest on this post. I need to connect two pie-charts using graphics. This connected line may vary in it's shape based on wedge corner points.
I look at the 'polarDataCanvasInstance'. It helps to draw graphis on single pie-chart.
any help? Meanwhile i will walk-through 'polarDataCanvasInstance' fully.
1 person found this helpful
OK, now I get it. So you would need to place your two PieCharts in a s:Group or mx:Canvas. On top of the pie charts, lay another s:Group on which you will do some drawing on its graphics:Graphics object.
In your case, you need to use dataToLocal() (will give you pixel coordinates in your chart) then localToGlobal() (convert to Application coordinates) then globalToLocal() (convert to the Top Group or Canvas coordinates you want to draw in) :
Using the dataToLocal() method
The dataToLocal() method converts a set of values to x and y coordinates on the screen. The values you give the method are in the "data space" of the chart; this method converts these values to coordinates. The data space is the collection of all possible combinations of data values that a chart can represent.
The number and meaning of arguments passed to the dataToLocal() method depend on the chart type. For CartesianChart controls, such as the BarChart and ColumnChart controls, the first value is used to map along the x axis, and the second value is used to map along the y axis.
For PolarChart controls, such as the PieChart control, the first value maps to the angle around the center of the chart, and the second value maps to the distance from the center of the chart along the radius.
The coordinates returned are based on 0,0 being the upper-left corner of the chart. For a ColumnChart control, for example, the height of the column is inversely related to the x coordinate that is returned.
Finally i did it . I did the same way what you described above. But it is not a straightforward approach to do it. I did code walk-through in Pieseries, Polartransform and WedgeItemRenderer for this.
Soon i will post the source code here.
//Get co-ordinates by passing pie chart item index or passing angle.
private function GetChartCoordinates(iItemIndex:int = -1, iAngle:Number = -1, psrTarget:PieSeries = null):Point
var iOuterRadius:Number = 0.0;
//trace(iAngle + " > 0 " + "&&" + psrTarget.items.length);
if (iItemIndex > -1 && psrTarget.items.length > iItemIndex)
iAngle = (psrTarget.items[iItemIndex].startAngle + psrTarget.items[iItemIndex].angle);
iOuterRadius = (psrTarget.items[iItemIndex].outerRadius);
else if(iAngle > -1 && psrTarget.items.length > 0)
iOuterRadius = (psrTarget.items.outerRadius);
return new Point(0, 0);
//This is copied from WedgeItemRenderer.as which is used to draw wedge background in Piechart.
if (psrTarget.getStyle('stroke') && !isNaN(psrTarget.getStyle('stroke').weight))
iOuterRadius -= Math.max(psrTarget.getStyle('stroke').weight/2 , SHADOW_INSET);
iOuterRadius -= SHADOW_INSET;
//This calculation is written after walk-through Pieseries and Polartransform source code.
if(iItemIndex > -1) //In this case user supplied Angle. Angle should be from (0 - 100).
iAngle = (iAngle / (2 * Math.PI)) * 100;
iOuterRadius = (iOuterRadius / (psrTarget.dataTransform as PolarTransform).radius) * 100;
//This will give local co-ordinate for given data value.
//Read "http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff.html#WS2d b454920e96a9e51e63e3d11c0bf69084-7c10" for more refernce.
//under heading "Using the dataToLocal() method".
objPoint = psrTarget.dataToLocal(iAngle, iOuterRadius);
//Converts the target point to global coordinate.
objPoint = psrTarget.localToGlobal(objPoint);
objPoint = canWorkingArea.globalToLocal(objPoint);