I want to draw a custom background in my flex chart with vertical axis is linear and horizontal axis is category. In background i want to shade the regions according to data given by user. I tried CartesianDataCanvas and gridlines in chart backgroundelements but not getting a good solution. Anyone have an idea? i prefer using script without mxml. Thanks in advance..
I am adding my code to show the issue i faced while using CartesianDataCanvas. It is working perfectly in Area chart, but i want to draw in Bubble chart. As bubble series is not starting from the begining of horizontal category axis, CartesianDataCanvas start drawing from the mid point of the first bubble. But i am trying to draw the rectangle in the whole width of chart.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
<fx:Script><![CDATA[
import mx.charts.ChartItem;
import mx.charts.LinearAxis;
import mx.charts.chartClasses.CartesianCanvasValue;
import mx.charts.chartClasses.CartesianTransform;
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.core.INavigatorContent;
import mx.events.FlexEvent;
[Bindable]
public var profits:ArrayCollection = new ArrayCollection([
{Month:'jan', Profit:130},
{Month:'feb', Profit:75},
{Month:'mar', Profit:110},
{Month:'apr', Profit:300}
]);
[Bindable]
public var ratios:Array=['25','25','25','50'];
[Bindable]
public var colors:Array=['0xff0000','0x00ff00','0x0000ff','0xc0c0c0']
private function draw():void {
canvas.clear();
canvas2.clear();
if(colors.length==ratios.length){
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var sumRatio:Number=getSum(ratios);
var nextMax:Number=0;
for(var j:int=0, colnum:int=colors.length-1;j<colors.length;j++,colnum--){
canvas.beginFill(uint(colors[colnum]));
canvas2.beginFill(uint(colors[colnum]));
var minPt:Array;
var minimumPoint:Point;
if(j==0){
minimumPoint=new Point(0,0);
}else{
minimumPoint=new Point(0, canvasHeight*nextMax);
}
minPt= canvas.localToData(minimumPoint);
var division:Number=Number(ratios[colnum])/sumRatio;
var maxPt:Array = canvas.localToData(new Point(canvasWidth,minimumPoint.y+canvasHeight*division));
nextMax+=division;
canvas.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
canvas.endFill();
canvas2.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
canvas2.endFill();
}
}
}
private function getSum(array:Array):Number{
var sum:Number=0;
for(var i:int=0;i<array.length;i++){
if(!isNaN(Number(array[i]))){
sum+=Number(array[i]);
}
}
return sum;
}
]]></fx:Script>
<s:HGroup>
<mx:AreaChart id="myChart" showDataTips="true"
dataProvider="{profits}"
selectionMode="single" creationComplete="draw()"
>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas" alpha="0.2" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{profits}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
id="series1"
xField="Month"
yField="Profit"
displayName="Profit"
selectable="true"
>
</mx:AreaSeries>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:BubbleChart id="mybubChart" showDataTips="true"
dataProvider="{profits}"
selectionMode="single" creationComplete="draw()"
>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas2" alpha="0.2" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{profits}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:BubbleSeries
id="series2"
xField="Month"
yField="Profit"
radiusField="Profit"
displayName="Profit"
selectable="true"
>
<mx:fill>
<mx:SolidColor color="0x663399"/>
</mx:fill>
</mx:BubbleSeries>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{mybubChart}"/>
</s:HGroup>
</s:Application>
