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...
Related
No matter what I do, my transitions won't work as expected. I'll explain the issues and then place the code at the bottom.
There are 4 States in my application.
goButton is present only in "State1" and "State2".
State1 and State2 are nearly the same, but the y property of the goButton is diffrent in each. So I've made a little transition that moves the Button back and forth. Good so far.
However, both "State1" and "State2" can also be Transitioned to "State3". But there's no goButton in "State3", so I've used the <s:Fade> and the <s:RemoveAction> effects to get rid of it.
The Transition from "State1" to "State3" works ok, but the Transition from "State2" to "State3" doesn't.
When I attempt to call the transition from "State2" to "State3" the goButton flickers/flashes quickly back to the position where it was in "State1" and only the the Transition to "State3" actually takes place.
this is my goButton
<s:Button id="goButton" includeIn="State1,State2" x="319" y="212" width="33" height="33"
click="goButton_clickHandler()"
icon="#Embed('file:///C:/Users/Felipe/Downloads/1317358341_magnifier_medium.png')"
toolTip="go"
x.State2="319" y.State2="275"/>
and these are the relevant Transitions:
<s:Transition fromState="State1" toState="State3" >
<s:Sequence>
<s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
<s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
<s:AddAction targets="{[lessonsDataGrid,backButton]}" />
<s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
</s:Sequence>
</s:Transition>
<s:Transition fromState="State2" toState="State3" >
<s:Sequence>
<s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
<s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
<s:AddAction targets="{[lessonsDataGrid,backButton]}" />
<s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
</s:Sequence>
</s:Transition>
My guess is that Flex always (don't ask me why) moves the component back to its original position before performing a Transition. I've tried a different version of this app in which I set the x and y properties of my goButton to what they are in "State2" and then set x.State1 = something else and y.State1 = something else and guess what happens? I get the exact inverse problem! Transition from "State2" to "State3" is ok but the Transition from "State1" to "State3" doesn't work, as the goButton flickers back to its original position (now it is the position in "State2") and only then does the Transition takes place.
Man this is driving me crazy.
__________________//______________________________
__________________ //____________________________
EDIT
I've added a link to the app >>>>HERE<<<<<< You can see the issue by selecting the option 'selected tags' and then clicking the 'goButton' . You'll see what I'm talking about. View source is available!!!
It looks like it's looking for an x,y for the goButton in State3. If you don't set one explicitly, it falls back to the default. Adding
x.State3="{this.x}" y.State3="{this.x}"
to <s:Button id="goButton" ... /> fixed it for me.
I think you're making this too complicated. Just set includeIn="state1,state3" for the button. No need for any add action. Then create one Fade transition that sets the goButton as its target. The Spark fade is smart enough to figure out how to handle that situation without further help from you.
Check out http://polygeek.com/2304_flex_simple-flex-4-component-checkedunchecked for more details.
>>>LL<<<<
OK I think I've singled out this behaviour and do believe it's a BUG or GLITCH.
I'll see if anyone has anything to add and if nobody shows up I'll file a bug report.
Steps to reproduce:
create a button that's present in two different states, in different x,y coordinates. For example, your button will have a value for x and for y and you'll have to set its position in the other state, something like x.State2 = something and y.State2=something
now create a transition from State2 (if State1 is your original State) to a third State called State3.
the transition should have a <s:Sequence> sequence of steps, preferably involving RemoveActions and Fades, like the ones I've used above.
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 have a list that displays photos like them:
<s:List id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreate.photos}"
height="450"
itemRenderer="PhotoRenderer" >
<s:layout>
<s:TileLayout orientation="columns"
requestedRowCount="4"
requestedColumnCount="3" />
</s:layout>
</s:List>
and PhotoRenderer has a code like this:
......
<mx:Image source="{_model.url + theAlbumPhoto.thumbPhotoURL}"
visible="{theAlbumPhoto.ready}"
maintainAspectRatio="true"
maxWidth="{Constants.DEFAULT_ALBUM_PHOTO_WIDTH}" maxHeight="{Constants.DEFAULT_ALBUM_PHOTO_HEIGHT}" />
........
Which works fine except when the number of photos get high and the scroll bar appears it starts behaving weirdly: it start showing photos different than the ones it supposed to and if I scroll back to beginning and scroll again to new photos other ones appears sometimes the correct ones and sometime not. Not sure how to resolve this, any ideas? you can also recommend different way than using s:List if that makes it easier.
I had the same problem with text List, i think its padding issue, organize the pading for all components it may help.
As I couldn't figure out what the problem was and couldn't reproduce it on stand alone application. I came up with the following code that solved the issue:
<s:Scroller id="photoScroller"
width="100%"
visible="{_model.photoAlbumToCreateOrUpdate.photos.length > 0}"
horizontalScrollPolicy="off" verticalScrollPolicy="auto"
skinClass="com.lal.skins.PhotoAlbumScrollerSkin"
top="50" bottom="0">
<s:DataGroup id="thumnPhotosList"
dataProvider="{_model.photoAlbumToCreateOrUpdate.photos}"
itemRenderer="AlbumPhotoThumbRenderer" >
<s:layout>
<s:TileLayout orientation="rows"
requestedRowCount="4"
requestedColumnCount="4" />
</s:layout>
</s:DataGroup>
</s:Scroller>
I had this same issue with an Image component in a custom item renderer I was using in a TileList. I fixed it without really knowing how, but the problem was the source property of the Image component in the item renderer.
The idea with item renderers is to use the data variable to access the item feeding the renderer. What do the _model and theAlbumPhoto variables refer to in your renderer? What I ended up doing was changing the source property to something more like data.image_path, and it decided to start working.
If you're happy with your solution, hopefully this can at least be of help to someone else.
I'm trying to reuse effects. To achieve this, i was hoping that i could bind some of the effect's properties to the effect's target. Here's what i wanted to do:
<mx:transitions>
<mx:Transition toState="Ready">
<mx:Parallel targets="{[b1, b2, b3]}" perElementOffset="200" duration="500">
<mx:Move xFrom="{target.x-100}" xBy="100">
<!-- possibly a fade effect too -->
</mx:Parellel>
</mx:Transition>
</mx:transitions>
<mx:VBox>
<mx:Button id="b1"/>
<mx:Button id="b2"/>
<mx:Button id="b3"/>
</mx:VBox>
The above code assumes, a state change on application createComplete to Ready state.
In my futile attempt with the above code, i tried to create 1 effect that would animate the entrance of 3 buttons all laid out using VBox. I'm (trying to) avoiding 2 things:
Absolute layout hence hand coded coordinates. I want to exploit the containers.
Effect code duplication
Results:
- Compiler complains target is not defined. I've tried to put whole list of ideas into that field but to no avail. I've tried:
{this.target.x}
{effectId.target.x}
{propertyThatReturnsTheObject.x}
Can this be done? Thanks in advance.
if you give the Move Effect an id, can you bind to {moveId.target}. Its not clear that your second case is it...
I suspect the compiler is looking for target in a different scope to the one you think it is...
Certainly, target isn't a bindable attribute, so this may be academic anyway.
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.