I have few questions about ColumnChart please (screenshot and code below):
How to get rid of the shadow drawn behind each column? I've tried adding <mx:filters /> but it hasn't helped
How to get rid of the padding between columns, so that they touch each other sidewise (like stairs) SOLVED
How to get rid of the warning Data binding will not be able to detect assignments to "horizontalAxis"? I've tried moving that code block around to get rid of the axis parameter, but can't find the right spot. SOLVED
<mx:ColumnChart id="_chart"
type="overlaid"
dataProvider="{_ac}" >
<mx:filters /> <!-- doesn't remove shadows -->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="yw"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers> <!-- warning -->
<mx:AxisRenderer axis="{_chart.horizontalAxis}" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="yw"
yField="max"
displayName="Лидер недели"
/>
<mx:ColumnSeries
xField="yw"
yField="pos"
displayName="Выигрыш"
/>
<mx:ColumnSeries
xField="yw"
yField="neg"
displayName="Проигрыш"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{_chart}"
direction="horizontal"
width="100%" />
UPDATE:
Sunil has helped with question #3, thanks!
And the problem #2 is solved by columnWidthRatio="1"
So now I just need to know, how to get rid of the shadows - as per question title :-)
For your first question, simple add seriesFilters="{[]}" to mx:ColumnChart attributes.
Related
I am trying to use "mouseSensitivity" property of ColumnChart in flex.
From the example tutorial I have learnt how this property works.
But In my program it seems not working. By that what I mean is even though if I give very less value say mouseSensitivity=1 and if I place mouse pointer far away from the data point, even then its attracted to the nearest data point. Which is not desirable in my program.
<mx:ColumnChart id="energyChart" mouseSensitivity="1" dataProvider="{energyXml.scenario}" selectionMode="single" chartClick="energyChart_chartClickHandler(event)" >
<mx:series>
<mx:ColumnSeries id="energySeries" />
<mx:LineSeries id="lineSeries" />
</mx:series>
</mx:ColumnChart>
Sorry guys...
I got why its going wrong, Initially I gave line series width as '100', so flex taking mouse pointer as in its range even though its not in the "mouseSensitivity" range....
Thanks...
This is a fairly simple question I would think.
here is the code (I cut it down for an easy read)
<fx:Declarations>
<s:AnimateColor id="rw"
target="{targetRatioCol}"
colorFrom="0x000000"
colorTo="0xFFFFFF"
colorPropertyName="color"
duration="5000"
repeatCount="0"
repeatBehavior="reverse"
/>
</fx:Declarations>
....
<mx:LineSeries id="targetRatio" displayName="Target" xField="Month" creationComplete="rw.play();" yField="targetRatio" verticalAxis="{v2}"
>
<mx:lineStroke>
<mx:SolidColorStroke id="targetRatioCol" color="0xFFFFFF" weight="4" />
</mx:lineStroke>
</mx:LineSeries>
the chart shows the line but the animation doesn't work.
My question is why isn't this working?
Thanks in advance
Nat
I don't think that the Chart redraws when the animation is played. Charts are a very strange beast. If I were you, I'd create an item renderer for the line which has the animation within it so that you'd only redraw the line.
I've got a Grid like this in my Flex 4 app. When the view that contains this Grid is visible, and the view is changed to another view, my application tries to play the Crossfade effect as the transition to the other view. My transition is defined like this:
<s:transitions>
<s:Transition fromState="*" toState="*">
<s:Parallel>
<s:CrossFade duration="150" target="{this}" />
</s:Parallel>
</s:Transition>
</s:transitions>
This applies the transition to any view. There's only one effect in there at the moment but it's in a Parallel block since I've experimented with multiple transitions.
Now, when I'm on a view where this Grid is visible, and I try to transition to another view, I get an "Invalid BitmapData" error. HEre's the complete stack trace:
ArgumentError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData/ctor()
at flash.display::BitmapData()
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:99]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
at spark.utils::BitmapUtil$/getSnapshot()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:63]
at spark.effects::AnimateTransitionShader/getValueFromTarget()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\effects\AnimateTransitionShader.as:283]
at mx.effects::Effect/http://www.adobe.com/2006/flex/mx/internal::captureValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\Effect.as:1462]
at mx.effects::CompositeEffect/http://www.adobe.com/2006/flex/mx/internal::captureValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\CompositeEffect.as:377]
at mx.effects::CompositeEffect/captureStartValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\CompositeEffect.as:358]
at mx.core::UIComponent/commitCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9778]
at mx.core::UIComponent/setCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9701]
at mx.core::UIComponent/set currentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6087]
at main/previousButton_clickHandler()[C:\Data\dev\Flex\main\src\main.mxml:48]
at main/__previousButton_click()[C:\Data\dev\Flex\main\src\main.mxml:241]
I experimented with adding and removing controls from the grid, and eventually narrowed it down to a a VGroup I've got in the grid. If I remove that VGroup (and all it's children), the transition plays fine. Add it back in, and everything blows up again. I tried using a VBox instead of a VGroup, but there was no change--same error. I also tried getting rid of horizontalAlign="center", and again, no change.
Some further experimenting reveals that if I only have one child in the VGroup, then the transition works. As soon as I get two children in the VGroup, however, it throws the error.
Additionally, if I remove the VGroup completely and simply make the Labels direct children of the GridItem, it fails (same Invalid BitmapData error). So it seems that perhaps the real culprit is having multiple controls at the same level in the control tree? E.g., two controls work if they are in a linear parent-child relationship inside the GridItem (GridItem->VGroup->Label), but two labels at the same level (whether their immediate parent is the VGroup or the GridItem) causes the Invalid BitmapData error.
I'm unaware of any other control I could use to accomplish what I'm trying to do with the Grid control, which is layout things in a table, with some cells that span into other rows or columns. TileLayout would work if I didn't need to span into other rows and columns in a few cases.
I've thought about using absolute positioning, but that will make it difficult (impossible?) to easily add/remove other controls into the "grid," which is what I want to do. When we're running subscription promotionals, we'll add text into certain cells noting how the promotional affects (or does not affect) that particular pricing option.
Suggestions?
Here's what the grid looks like.
<mx:Grid id='membershipGrid' >
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
<s:Label text="One Year" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="Two Year" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="5 Year" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem>
<!-- Comment out this VGroup, and everything works fine -->
<s:VGroup horizontalAlign="center">
<s:Label text="Monthly Autorenew" fontWeight="bold"/>
<s:Label text="Payment plan option is not available" fontStyle="italic" />
<s:Label text="for multiple year memberhips." fontStyle="italic" />
</s:VGroup>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<s:Label text="Standard Membership" />
</mx:GridItem>
<mx:GridItem>
<s:RadioButton id="standardOneYear" group="{membershipTypeSelection}"
label="{pricing.getMembership(MembershipName.STANDARD_ONE_YEAR).currencyPrice}" />
</mx:GridItem>
<mx:GridItem>
<s:RadioButton id="standardTwoYear" group="{membershipTypeSelection}"
label="{pricing.getMembership(MembershipName.STANDARD_TWO_YEAR).currencyPrice}" />
</mx:GridItem>
<mx:GridItem>
<s:RadioButton id="standardFiveYear" group="{membershipTypeSelection}"
label="{pricing.getMembership(MembershipName.STANDARD_FIVE_YEAR).currencyPrice}" />
</mx:GridItem>
<mx:GridItem horizontalAlign="center">
<s:RadioButton id="monthlyAutorenew" group="{membershipTypeSelection}"
label="{pricing.getMembership(MembershipName.MONTHLY_AUTORENEW).currencyPrice}" />
</mx:GridItem>
</mx:GridRow>
Not sure if this helps but when I was facing similar issues trying to get a Spark Wipe effect to work as a transition I had to use a MX:Box component as a container for the Spark Group containers so that it would work. These Spark transitions seem to be very temperamental.
Answer: don't use a Spark transition. I had to give up. Bummer, huh?
Is there a way to prevent a component from rendering in Flex (to save memory or processing power)?
I tried doing something like:
<components:AddNewItemGroup id="addItemGroup"
visible="false"
enabled="false"
horizontalCenter="0" bottom="0" />
I noticed that the component gets rendered but it's just not visible or functional.
If you want to prevent a component from being rendered, you need to remove it from the display list using the removeChild method in Actionscript.
How about setting "includeInLayout='false'" too ? The doc says it will not draw the component ... but maybe it will still "render" it ...
http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_4.html
For the desired effect, use:
<components:AddNewItemGroup
id="addItemGroup"
visible="false"
includeInLayout="false"
enabled="false"
horizontalCenter="0" bottom="0" />
I have a flex line chart. Instead of the default behavior of having to hover over parts of the line to see the data points, is there a way to change the rendering of each point and have them always displayed? (almost like a connect the dots type view).
Try this
<mx:LineChart>
<mx:series>
<mx:LineSeries dataProvider="{arr1}">
<mx:itemRenderer>
<mx:Component>
<mx:CrossItemRenderer/>
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
you can change CrossItemRenderer with DiamondItemRenderer or any other
For an example look at the bottom of this page: Using strokes with chart controls
you will need to set the 'showAllDataTips' property of the LineChart to true e.g.
<mx:LineChart id="linechart" height="100%" width="45%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{expensesAC}"
showAllDataTips="true">
That will display all of the data tips for that chart
I am constructing the line series using ActionScript and also using line mx:lineStroke in MXML to change the color of the line. The problem is that the CircleItemRenderer I am using with this line does not take the color of the line, instead takes some default color. Is there a way that, say orange triangles shown for a blue line can be changed to blue triangles, and thus being consistent with the line color.
Solution:---
<mx:SolidColor id="fillColor" color="0xbbbbbb" alpha="1"/>
<mx:Stroke id="lineStroke" color="0xbbbbbb" weight="2" alpha="1"/>
<mx:series>
<mx:LineSeries yField="yvalue" xField="xvalue"
form="curve"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
fill="{fillColor}"
lineStroke="{lineStroke}" stroke="{null}" />
</mx:series>
As posted in response to another question on the same subject...
If you're using <mx:LineSeries>, then set the following property:
itemRenderer="mx.charts.renderers.CircleItemRenderer"
When constructing a LineSeries in ActionScript, then set the itemRenderer style on your LineSeries object before adding to the series array:
lineSeries.setStyle("itemRenderer", new ClassFactory(mx.charts.renderers.CircleItemRenderer));
Don't forget to...
import mx.charts.renderers.*;
You don't have to stick to the circle item renderer either, you can use any of the item renderers found in the renderers package.