I would like to represent legend items' markers as lines for my Lineseries and not as boxes(by default) . I have managed it through setting markerWidth and markerHeight in a Legend tag. However, I have not only lineseries, but also plot series in my chart, which has diamond form marker. So, whenever I squeeze the box to a form of line in my legend, my plot series' marker is getting ugly.So, my questions:
1.Is there any way to control legend items separatly without creating a legend manually, item by item?
if I add item by item, how can I get the same style for my marker as related series have? (e.g. same shape and color as item renderer)
The way I'd do it is to create a custom LegendItem subclass that has a custom property with a getter/setter pair that takes a value of type function. Then I'd provide a ClassFactory that supplies the function as the LegendItem for your Legend. You'd call the function within the LegendItem to figure out what renderer to make based on the series.
I forget exactly when you'd do this in the Flex life-cycle--I've been out of Flex for almost 2 years. It's possible that there's a smarter/simpler way to do this that I've also forgotten. But it should work.
Related
I have figured out how to create custom html tooltips by using roles via googleVis. I can easily modify the content using html but I cannot understand how I can control the tooltip box itself.
My problem was generated because some of the custom tooltips I created are falling outside my chart area and I tried (unsuccessfully) to find a way to control the tooltip position. Idealy I would like to make them behave in the exact same way default tooltips behave in googleVis (always stay withinin the chart area).
When I later implemented the same concept into a line chart I found that I have another problem as well. The tooltip is falling on the line so I cannot see what is the exact point that refers to the tooltip.
Would it be possible for example to keep the callout style of default googleVis tooltip and change the content with HTML?
Additionally, do you know if there is any way to control more tooltip properties like border and background color?
i was also looking for the same
1) when laying out your data, make sure it has columns alternating between, say, data and tooltips, data and tooltips,... that way it is possible to customize tooltips for multiple columns (it does not work if you just append - à la cbind - a set of tooltips columns to your data frame).
Additionally try this http://rcharts.io/viewer/?6644957#.VHcpEkvrdbg
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.
Is it possible to restrict flex bar chart y-axis count?
I have a very big name coming in my y-axis and i want to reduce or restrict it to 5 characters and on rollover i want to display it in full.
You can use the labelFunction of the axis. Check out the examples here: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_displayingdata_06.html
You should easily be able to add a mouseOver event listener to put your tool tip on.
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 quick question about rendering the advanceddatagrid cells.
I need to programatically color the cell of the datagrid based on the conditions. Lets say, the stock quotes. If there is an increase from the previous day, I need to have the cell colored in GREEN and in RED, when there is a decrease.
Now, the important part here is, I need to do these things dynamically, which means, when the user enables the comparison/conditions, then the cells are colored. And when the user disables the comparison, then it again goes back to its default behavior.
I know I have to use renderers. But not sure, how to use it for the cells and that too dynamically. Can anyone please explain how to go for it?
Thanks
Item renderers are components used to define the appearance of a component's "items" or subcomponents. In the case of the ADG, the "items" are the individual cells. You can create a completely custom class to function as the renderer (given it implements certain required interfaces) or, in most cases, you extend an existing component. Since the default renderer for ADG cells doesn't support background colors, you have to create or extend a component that does and use that as the renderer. That is the basic premise that these tutorials, linked to in the following question, work from:
Setting background color for datagrid row in Adobe Flex
After creating an itemRenderer that supports a background color, you have two options as to where you can define your "conditions"; inside of the itemRenderer or using the ADG's styleFunction (additionally requiring that your itemRenderer defines a "background" style).
In your case, you could include both today's and yesterday's stock price values in the data sent to each cell and compare the two to determine the color used to draw the background. Again, more on that in the tutorial links provided above. In either the itemRenderer or the styleFunction, you would compare properties on the itemRenderer's/styleFunction's data object (corresponding to the row you're looking at), e.g.:
if(data.today > data.yesterday)
{
// set color or return style
}
else ...
To "toggle" custom cell colors, switch between your custom renderer and the default (colorless) renderer. In other words, set the itemRenderer property to your custom itemRenderer class when you need display the colors and set it to "null" when you want the "default behavior".