I have the next code
<mx:LineChart id="LEChart" width="900" height="600"
showDataTips="true" showAllDataTips="false"
rollOver="lineChart_rollOver(event)"
rollOut="lineChart_rollOut(event)">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:LinearAxis title="U/Uratedd" minimum="0.50" maximum="1.50"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LogAxis id="LE70" interval="10" minimum="1000" maximum="1.0E7" title="Life expectancy(h)"/>
</mx:horizontalAxis>
<!--<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{LE70}" canDropLabels="true"/>
</mx:horizontalAxisRenderers>-->
<mx:series>
<mx:LineSeries dataProvider="{FlexGlobals.topLevelApplication.arrLE70}" yField="zx" xField="fx" form="curve" displayName="Profit"/>
<mx:LineSeries dataProvider="{FlexGlobals.topLevelApplication.arrLE85}" yField="zx" xField="fx" form="curve" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{LEChart}" horizontalAlign="center" verticalAlign="middle"/>
I get this graphic
http://subefotos.com/ver/?e9e23ef45417b02a7f7f5bd582574788o.png
Is It possible to show all data tips only in one lineserie when I put the mouse on it?
Thanks in advance.
Related
I create a TileList with custom renderer.
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderStyle="solid"
borderColor="#B3B3B3"
borderWeight="1"
cornerRadius="2"
backgroundAlpha=".8"
backgroundColor="#F8F8FF"
dropShadowVisible="true"
>
<mx:Canvas id="cvsImage" width="100%" click="cvsImage_clickHandler(event)">
<s:HGroup width="100%" paddingBottom="0" paddingTop="5" >
<s:CheckBox id="cbImgSelect"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
</s:HGroup>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:BorderContainer width="100%" y="124" height="25" bottom="1" left="3" right="3"
backgroundColor="#FFFFFF" id="bcTitre" borderAlpha="0" >
<s:VGroup width="100%" y="124" height="25" bottom="0" left="0" right="0"
paddingBottom="0" paddingTop="0" gap="0" click="iconCanvasLabel_mouseUp(event)">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1" id="lType"
fontWeight="normal" width="99%" textAlign="center" toolTip="{data.imType}"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" id="lStade" toolTip="{data.imStade}"/>
</s:VGroup>
</s:BorderContainer>
</s:BorderContainer>
My TileList has allowMultipleSelection enable.
I'd to check CheckBox when item is selected by click or by selection (continus or not) and if CheckBox.selected=true I'd like to show color selection around selected item.
Could you help me to do that ?
Best regards
It seems that you're trying to resolve the issue from opposite side, which is wrong
I suppose yo can consider following way:
set mouseEnabled to false for checkBox so that all the list item triggers click
alter default selection behaviour by intercepting changing event and doing something like
protected function lst_changingHandler(evt:IndexChangeEvent):void {
evt.preventDefault();
var ids:Vector.<int> = (evt.currentTarget as List).selectedIndices;
(evt.currentTarget as List).selectedIndices = ids.concat(new <int>[evt.newIndex]);
bind checkBox selected state to the renderer selected one
So, I have a chart (simplified):
<fx:Declarations>
<mx:SolidColor id="solidColor" color="0x90ee90"/>
<mx:SolidColorStroke id="solidColorStroke" color="0x90ee90"/>
</fx:Declarations>
<mx:ColumnChart id="columnChart" width="100%" height="100%">
<mx:annotationElements>
<mx:CartesianDataCanvas id="cartesianDataCanvas" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:DateTimeAxis id="dateTimeAxis"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{dateTimeAxis}"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="linearAxis" baseAtZero="false"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{linearAxis}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries xField="time" yField="value" fill="{solidColor}" stroke="{solidColorStroke}"/>
</mx:series>
</mx:ColumnChart>
From time to time in chart is updated columnChart.dataProvider. I need to draw over this chart two horizontal lines (for min and max values) and yet something. I know that all of this can be drawn in annotationElements oncartesianDataCanvas.
The question is: At what point (or what event) should redraw the annotations so that they always match the actual data?
I tried to do it immediately after updating columnChart.dataProvider. But it's too early - in dateTimeAxis andlinearAxis did not have time to calculate the new min and max values. It is foolish to calculate them manually.
I believe you can try change event on ColumnChart as:
<mx:ColumnChart id="columnChart" width="100%" height="100%" change="handleChange(event)">
</mx:ColumnChart>
Then in the method handleChangeyou can do all the work.
How can i add a Group (with unknown size) to SkinnableContainer with a transformation effect?
Example
First, resize the SkinnableContainer smoothly to its final size and then fade in the Group.
Problem hereby
The Group-size is determined by adding it to the SkinnableContainer. Doing this, the SkinnableContainer gets the final size and the Group is shown, without playing the transition effect.
All examples i found are MXML- and State-based. But i need an Actionscript-only solution here.
<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
<s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
<mx1:WipeRight duration="9000"/>
</s:Parallel>
<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" duration="7000"/>
<mx1:WipeRight duration="5000"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="btn"
label="Toggle Panel visibility"
click="skinnableContainerPanel.visible = !skinnableContainerPanel.visible;" />
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" showEffect="{showEff}"
hideEffect="{hideEff}" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0" >
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>
In my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<mx:TabNavigator left="10" top="20" bottom="10" right="10" id="menuOption" >
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
My toggle bar inside transactionUI ::
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:ui="com.colan.*" xmlns:ui1="com.colan.ui.*"
backgroundColor="#373737" chromeColor="#181818"
contentBackgroundColor="#181818" color="#FDFDFD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.core.*;
]]>
</fx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="15%" >
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{viewStack}"
selectedButtonTextStyleName="mySelectedButtonTextStyleName"
/>
</mx:HBox>
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="85%" >
<mx:ViewStack id="viewStack"
visible="{toggleButtonBar.selectedIndex > -1}" width="100%" height="100%" >
<ui1:transaction label="Transaction"/>
<ui1:addClient label="Add Client"/>
<ui1:invoice label="Make invoice"/>
<ui1:workCatalogue label="Work catalogue"/>
<ui1:productCataloge label="Products Categories"/>
<ui1:suppliers label="Offers"/>
<ui1:calendarPlanUI label="Calendar"/>
</mx:ViewStack>
</mx:HBox>
</mx:VBox>
Please advice me...
FlexGlobals.topLevelApplication is meant to access the public variables/functions in your main application screen from any of its child screens.
For example..
If "transactionUI" NavigatorContent's ToggleButtonBar "calendarPlanUI" is for migrating to the main application "calanderUI" NavigatorContent.
Then you can straight away mention it then and there like
<ui1:calendarPlanUI label="Calendar" click="mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex = '2'"/>
But if by any chance you are trying for toggleButtonBar like this
mx.core.FlexGlobals.topLevelApplication.toggleButtonBar.selectedIndex = 1;
then I would like to mention that the main application's variables/functions/components can only be accessed using "topLevelApplication". Without creating an instance to transactionUI, you won't be able to use toggleButtonBar in other child screens/main app too.
how to change the bar chart color in bar charts?
Thanks,
AravindakumarThangaraju
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
]]></mx:Script>
<mx:Panel title="Bar Chart">
<mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="Profit"
>
<mx:stroke>
<mx:Stroke
color="0x808080"
weight="2"
alpha=".8"
/>
</mx:stroke>
</mx:BarSeries>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="Expenses"
>
<mx:stroke>
<mx:Stroke
color="0xC0C0C0"
weight="2"
alpha=".8"
/>
</mx:stroke>
</mx:BarSeries>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
instead of using stroke we can use
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
and mention the solid color id using fill property
<mx:series>
<mx:ColumnSeries
yField="work"
minField="age"
displayName="work"
fill="{sc1}"/>