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.
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...
I have a simple Form containing two input boxes. as shown in the code below :
<s:Form>
<s:FormItem width="242" label="Name:">
<s:TextInput x="1" y="0"/>
</s:FormItem>
<s:FormItem width="242" label="Evaluate at:">
<s:TextInput/>
</s:FormItem>
</s:Form>
the problem is the input boxes are y distances apart and i want to bring them a little bit closer. if i had used the <s:VGroup/> or <s:HGroup/>, there is the gap property to close up the gap but that property is not in the Form tag.
How can I close the gaps using the Form tag?
The way I did it was to create a skin for all my forms. Then in CSS I set the skin I created to be the default form skin.
Copy FormSkin create YourFormSkin.mxml
Copy FormItemSkin create YourFormItemSkin
Modify the gap in YourFormSkin.mxml
Modify contentGroup LEFT property in FormItemSkin.mxml, change contentCol:0 would be the least gap. The numbers are relative to the columns setup by the form layout.
Create or edit your CSS file to include:
s|Form{
skinClass:ClassReference("your.project.view.skins.YourFormSkin");
}
s|FormItem{
skinClass: ClassReference("your.project.view.skins.YourFormItemSkin");
}
Now you can customize every form in your application by just editing your two skin files.
You can do Flextras' way of doing it (I don't like it because I'm not a fan of AS code for layout stuff), or you can do this:
<s:Form>
<s:layout>
<s:FormLayout gap="0" />
</s:layout>
<s:FormItem width="242" label="Name:" height="25">
<s:TextInput x="1" y="0"/>
</s:FormItem>
<s:FormItem width="242" label="Evaluate at:" height="25">
<s:TextInput/>
</s:FormItem>
</s:Form>
FormItem is a container, and extends SkinnableContainer. As such, it uses a layout class; and the gap property is usually set on the layout class.
So, assuming you're using one of the layouts that support the gap property, you can do something like this:
myFormItem.layout.gap = myNewGap;
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 am trying to overlay a label onto an AdvancedDataGrid when there are no results returned from a call for the data.
Here is a mockup of what I am trying to accomplish http://i.stack.imgur.com/6Djga.png
I tried following this previous answer: Drawing an overlay in custom flex component, but this would not work for me because an AdvancedDataGrid is not a Container (and as such does not have a rawChildren property).
I would prefer not to need to mess with the data provider, because this table will be used in many location which will have different columns and labelFields.
Any suggestions welcome.
To give a quick example as to what Flextras mentioned:
<s:Group>
<mx:DataGrid dataProvider="{myDataProvider}">
<mx:columns>
<mx:DataGridColumn dataField="test1" />
<mx:DataGridColumn dataField="test2" />
<mx:DataGridColumn dataField="test3" />
<mx:DataGridColumn dataField="test4" />
</mx:columns>
</mx:DataGrid>
<s:Label text="Overlay text here" visible="{myDataProvider.length == 0}" x="10" y="35" />
</s:Group>
Put the AdvancedDataGrid in a container along with the label overlay. Position the label on top of the DataGrid; and change it's visibility based on the dataProvider's length.
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.