I am using the standard Flex 3 BubbleChart component and I would like to customize a couple of the grid lines separately from the rest.
I would like to highlight a gridline in the X-direction as well as in the Y-direction to show a quadrant.
Is there any way to customize the look and feel of a subset of gridlines within a Flex chart (i.e. bubble chart)?
Any ideas or suggestions would be appreciated.
Thanks!
Check out this two nice articles:
Using chart grid lines
Drawing on chart controls
Related
Im trying to add border like in the image to flex charts. I used vertical and horizontal Axis renderers but that method id not proper solution. Guys do you have any idea to achieve this one?
Just put it inside a canvas and give it that colour and required padding.
I've created a line chart in flex and it works like expected. Now, I would like to add shading to the background for specific information. For example, this chart - http://research.stlouisfed.org/fred2/graph/?id=TOTALSL,TOTALNS, - shows a shaded background for recessions. How would I mimic this shading in a Flex linechart?
Thanks
You could draw it in the background of the chart using the drawing api.
edit:
I dont know of any code examples on the web, I've only done it in production code (aka I cant share it, sorry :( )
you will want to create a container and put it into the charts
<mx:backgroundElements>
You should pass into this container the min and max for the x-axis probably as separate properties and a dataprovider that describes when to show a highlighted section. You might have to compute the min and max based on the dataprovider you pass into the chart.
If you just want to show the highlighted area you will just use the drawing api and compute where to put on the x-axis based on your min, max, width of container, and data point (start and end values) from your dataprovider. It will look something like this in your updateDisplayList:
// code is not tested but a good start
var shadeStartX:Number = (max-min)/startPoint;
var shadeEndX:Number = (max-min)/endPoint;
var shadeWidth:Number = shadeEndX - shadeStartX;
...
this.graphics.drawRect(shadeStartX, 0, shadeWidth, unscaledHeight);
but if you want to have things like hover states and all that goodness I would suggest creating a display object that you pass the width in and adding that to the container at the computed x-axis to set it at.
Hi I feel that drawing something yourself is not the right way to go.
You should ideally use a PlotSeries inside the LineChart, and create a custom item renderer for each element in the series.
PlotSeries allows you to give your own custom image/object to draw at a specific date/point in the chart.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/PlotSeries.html
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_10.html
All the examples show the plotSeries with smaller objects but you can create an object which covers the chart vertically and has a constant width.
I have two requirements for a flex charting component:
The grid lines should always remain fixed to a scaling I define using an array of data. Something like a graph paper sheet.
Plot multiple line series data over this grid.
How does one get complete control over the background grid lines? I have tried a combination of annotation elements and setting the linechart background elements. If I get the grid right, I can't plot over it (Probably due to the scale). Can anyone share how would one go about designing a graphpaper like interface for linecharts in flex/actionscript?
I want to draw on a Flex AreaChart. This AreaChart has an AnnotationElement that is an CartesianDataCanvas.
When I draw some items on this CartesianDataCanvas, the chart looks good when the item fits inside the chart.
But when I draw an item that is bigger than the chart, the chart automatically resize and try to fit my item inside the chart. I dont want my chart to resize automatically like that, but rather not showing the item part lay outside the chart. What should I do?
Thank you a lot,
Henry
what about scaling it manually?
before you draw it on the canvas, determine the sizes of AreaChart including width/percentWidth and same for height, and scale your graphics to fit the canvas/AreaChart.
If you want to do it right, research this canvas to next properties:
explicitMaxWidth and postLayoutTransformOffsets and this too setLayoutBoundsPosition () from documentation about AreaChart & CartesianDataCanvas
And let us know :)
So I have extended the PlotChart that comes with Flex to have the ability to draw trend-lines. To do this, I have to get pixel positions. How can I convert (100px,100px) in pixels to a point on the graph, such as (0.7,1.0)?
You can draw on charts using the CartesianChartCanvas, here is the link to the LiveDoc: Drawing on Chart Controls
To answer your question more specifically, CartesianChartCanvas supports drawing by pixels.
You probably want to create a subclass of ChartElement, and add it to annotationElements for your chart. The docs for Flex 2 show an example: Livedocs
PlotSeries::dataToLocal(...) ended up working fine.