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.
Related
pls check link. I want to set the plot height of all charts equally, how to do it?
link here: jsfiddle.net/doanvh/vqn24y5w/14/ (type http:// left link)
Image here
You can find the highest value of the height among all charts and based on the found value, modify the rest. I have modified your example a little bit by adding a function (look for the updatePlotHeights function between script tags, HTML tab) that performs a simple calculation that makes all charts' heights equal. Also I have decreased charts' widths in order for you to display them horizontally to compare them.
Example:
http://jsfiddle.net/BlackLabel/qbs6k3Lp/
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'm having difficulty with Flex charts. I'm working on a complete rewrite of a flex app that has a fair bit of charting involved, and I've been instructed to get the look and feel as close to the previous version as possible (for the initial release).
I can't seem to find the style property which dispays a blue, tabbed sort of effect of the chart axes. As I don't have the rep to post an image, I'll direct you to the adobe live docs 'using line charts' page (sorry, I can only post one link because of the anti spamming mechanism, see link in the edit below) - the effect is present on the vertical axis of the chart at the top of the line charts examples page.
It seems to be some kind of default setting, but I have not been able to pin it down, not even when copying chunks of the old code.
If anyone has any ideas as to how to get hold of this style, or as to what could be removing this style, I'd be extremely grateful.
Thanks for reading.
Edit:
Sorry I will try to clarify:
If you look at the chart at the top of the using line charts page in the Adobe Live docs, the vertical axis has a thick, blue tabbed style, but the horizontal axis does not.
I am trying to gain control over this blue tabbed style - specifically I want to make it appear on the horizontal axis and remove it from the vertical axis of a line chart. However, I cannot find the property which sets this style.
I know it is possible to alter this style, as I have seen examples of charts with the look I need, however there does not appear to be an obvious way to alter it.
I hope this is a bit clearer. Thanks.
The blue bar that comes by default is a stroke. The white divisions within it are minor ticks.
To style it differently, you need four parts:
a chart (e.g. LineChart)
an Axis (e.g. LinearAxis)
an AxisRenderer
a Stroke (e.g. SolidColorStroke)
Then you'll have to connect these parts:
var chart = new LineChart();
var vAxis = new LinearAxis();
var stroke = new SolidColorStroke();
stroke.caps = CapsStyle.NONE;
stroke.weight = 1;
stroke.color = 0x000000;
var axisRenderer = new AxisRenderer();
axisRenderer.axis = vAxis;
axisRenderer.setStyle("axisStroke", stroke);
// Only if you don't want minor ticks to display:
axisRenderer.setStyle("minorTickPlacement", "none");
chart.verticalAxis = vAxis;
chart.verticalAxisRenderers = [axisRenderer];
You'll find more on the topic here: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html
Its not enough clear for me, what do you want, but if you are looking for styling of charts look this, but if something about axis look this.
Anyway you should explain your goals, so we could help you.
In my application, I am using a BarChart to display data. However, the text in the category axis can be too long to display on the chart, so flex adjusts the font size automatically to the point that the data is either unreadable, or the text is partially visible.
The length of the text varies every time new data comes in, so I can't set the gutterLeft attribute to a static value at runtime.
Two things that come to my mind are:
Change the gutter dynamically according to new data
Have a scroll bar on the categoryaxis so that if any text won't fit in the space, the user can scroll to see it
Any help would be appreciated.
EDIT:
I have hundreds of rows of data being graphed at once, so I can't really use a legend for each item.
Also, I have no idea how to change the gutterLeft property with actionscript. Doing it in MXML is as simple as
gutterLeft="100"
but I cannot access the property using actionscript. I also tried to bind the gutterLeft variable to an integer and change that integer and it still didn't work. :|
the problem is that gutterleft is a style, and therefor needs to be set as one when using actionscript.
I was hoping to see your code to give a more detailed answer but what you want to do is:
mychart.setStyle("gutterLeft",500);
I have a Flex3 LineChart component using an CircleItemRenderer and the datapoints are being cut off because they are too close to the edge. Here's what it looks like:
http://img29.imageshack.us/img29/3850/chartx.png
As you can see, the circles on the left and right sides are being cut off.
How can I make the LineSeries area, plus the horizontal labels, narrower so it fits in the chart area?
Thanks!
I had the same issue and was able to resolve it by setting the clipContent attribute in the chart tag to false. I found this solution on Amy's Flex Diary.
You might want to set the maximum and minimum values in your LinearAxis in the horizontalAxis object. Check the API for more information: http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html
The Line Chart determines automatically these values to fill all the elements in the screen. You might want to change these values so the graph has some space at the sides.
You can set the padding property on the horizontalAxis and verticalAxis child objects as well...
Adjust the mask on the chart component.
I got this to work by changing the type from LineChart to ColumnChart. I still had all of the same axis definitions including Line Series. The results are the same Line graph, but more centered on the graph instead of touching the edges. None of the other padding or gutters were what I was looking for.
I got d solution.
create creationComplete event in LineChart
edit horizontalAxis's padding you want
e.target.horizontalAxis.padding = 0.2;