DataGridColumn labelFunction Problem
I am trying to get the DataGrid to behave normally, as most
DataGrids do. Here's the setup....
For example:
ColumnA: Qty. (default value: 0)
ColumnB: Price (default value: 9.99)
ColumnC: (ColumnA * ColumnB)
In this case I'm using a labelFunction to calculate ColumnC.
When I run the program and select ColumnA (Qty.) and I change the
value from 0 to 1 and I hit the "ENTER" key, the calculation is
executed and ColumnC is updated as expected. But, if I hit the
"TAB" key instead, it moves the focus to the next editable cell on
that row, but it does not execute the calculation (labelFunction).
This to me seems like it should be a given, since most DataGrids in
most development platforms support this type of behavior (execute
on lostfocus/leavecell, etc). But, it looks like it's not built
into Flex 2.0's DataGrid.
My other thought, was to try to capture the "Leave Cell"
event....I was unable to find a "Leave Cell" event.
Any thoughts, ideas or suggestions would be greatly
appreciated!
- Mike
Well, my solution works only if you're not using any other
controls (as I just found out). Basically, this solution prevents
the user from ever moving the focus out to any other control.
So far, my experience with the implementation of the Datagrid
in Flex has been filled with frustration. There are a bunch of
"common" scenarios that are proving very difficult to implement.
For example:
1) It would be nice to be able to have a calculated column
that works. (I set up a labelfunction, but this doesn't update
until I leave the row, rather than leave a cell, also it doesn't
trigger when using the tab key...see #3).
2) It would be nice to be able to add a combobox to a
datagrid column (I know Flex can do this, but not easily, or
intuitively).
3) It would be nice to be able to control the tabbing
behavior in the datagrid, it's doesn't work as one would expect it
to. (I set focus to cell in code, then when I hit the tab key, it
moves the tab out of the datagrid. When I click back into the
datagrid and hit the tab key again...it works as I would expect.
But, when I update data in a column and tab off it doesn't trigger
the itemEditEnd event...and unfortunately there is no cell edit end
event).
I could go on, but those are my Top 3 problems right now. If
anyone has suggestions, ideas or solutions I would love to hear
them.
Thanks,
- Mike
Similar Messages
-
Editable Datagrid with LabelFunction Problems
Hi,
I'm having problems with a datagrid with editable columns and labelFunctions.
The problem is that when i leave the editable field by a way that wasnt with Escape Key, the datagrid apply again the labelFunction and destroy the number formattion adding a lot of numbers.
When the field is filled with 0000,00 he just adds more zeros, like 0.000.000,0000 and keep going after do the same process.
And when the field has a number different of zero, he apply the labelFunction then after he remove the labelFunction. After few times it just make the number vanish and the cell goes empty.
I read the documentation about editing cell and tryed to implement a solution to prevent the cell be edited, without sucess.
The source code goes attached for some advice on my problem.
Thanks, Fredy.Hi,
I solved a part of problem with some changes that i've made.
Now there is no problem with values different of zero, when i got just number, its fine, but still have problems with zero values.
The snippet code goes next, the bold part that was modified from the last sample.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.DataGridEventReason;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.formatters.NumberFormatter;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
[Bindable] private var collection:ArrayCollection = new ArrayCollection([
{code:1, description:"Item 1", value:4564654},
{code:2, description:"Item 2", value:00000000},
{code:3, description:"Item 3", value:00000000},
{code:4, description:"Item 4", value:00000000},
{code:5, description:"Item 5", value:00000000},
{code:6, description:"Item 6", value:00000000},
{code:7, description:"Item 7", value:00000000}
private var formatter:NumberFormatter;
private function formatterFunction(item:Object, column:DataGridColumn):String {
if (formatter == null){
formatter = new NumberFormatter();
formatter.decimalSeparatorTo = ",";
formatter.thousandsSeparatorTo = ".";
formatter.decimalSeparatorFrom = ",";
formatter.thousandsSeparatorFrom = ".";
formatter.useThousandsSeparator = true;
formatter.precision = 4;
return formatter.format(item[column.dataField]);
private function editEndHandler(event:DataGridEvent):void {
var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
var newVal:Number = isNaN(Number(myEditor.text)) ? myEditor.text as Number : 0.0000;
var oldVal:Number = Number(event.currentTarget.editedItemRenderer.data[event.dataField]);
// it solves the partial part of the problem, but still have some errors
if (event.reason == DataGridEventReason.CANCELLED || event.reason == DataGridEventReason.OTHER) {
return;
if (oldVal == newVal ) {
// i've tryed this, but the itemEditor still open
event.preventDefault();
// if I just put 'return', still have the same problem
// return;
]]>
</mx:Script>
<mx:Label text="Bug datagrid editavel com labelFunction"
fontSize="16"
fontWeight="bold" />
<mx:DataGrid dataProvider="{collection}"
editable="true"
itemEditEnd="editEndHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Código"
dataField="code"
editable="false"/>
<mx:DataGridColumn headerText="Descrição"
dataField="description"
editable="false"/>
<mx:DataGridColumn headerText="Valor"
width="300"
dataField="value"
labelFunction="formatterFunction"
editable="true"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
@Alex
Thanks for the answer.
I want to edit this column, but if there is no 'change' i dont want to apply again the label function and close the itemEditor.
I've tryed to call event.preventDefault() but i dont know what to do next.
Do you have some advice how to solve my problem?
This is just happening when i got zero values on my datagrid =/
Thanks all for the answers. -
DataGridColumn/Wordwrap problem
I have been attempting to get my data grid to properly word
wrap. The problem seem to be that the height of the row with the is
set for all rows by the first occurrence and not row by row. Is
this correct? Is it possible to make each row size to the contents?
I am currently using an itemRenderer as follows:
<mx:DataGridColumn headerText="Feature" dataField="@name"
wordWrap="true">
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data.@name}" selectable="false"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
ThanksSet the DataGrid property variableRowHeight ="true"
Vygo -
I am using ActionScript to dynamically create DataGridColumns
to display in a DataGrid. So far, I've been able to create the
columns with the appropriate dataField and headerText properties.
When trying to assign a label function, my column code no longer
works. The statement that I'm using is the following:
myDataGridCols[i+1].labelFunction = "dataGridNumberFormat";
If I were to hard code the tag in MXML, I would set the
labelFunction="dataGridNumberFormat". Any advice is greatly
appreciated.Thank you for taking the time on a sunday here. I understand
your solution and I have my way now,
However coming from a CF environment I am struggling which
what I call dynamic references. In the below example the value for
the formula comes from a CFC query that references my formula.
Somehow it will NOT take it when I state dg.labelFunction =
[cfcreturn_value] : which is the exact name of my formula. Is this
a correct observation ?
Another issue is how to compose a valid string. For example I
want to refer to a field : Formula2, using 'Formula'+[variable].
right now I ended up hardcoding this in my function : example
: return nf.format(item["Formula2"])
Can this be done ? -
maybe someone can help me out with this... i am able to get a labelfunction to work fine (it sums the totals of the dataprovider) like so:
in my datagridcolumn with id = "grid1" i have labelFunction="sumFunction"
my sumFunction looks like this:
public function sumFunction(col:DataGridColumn):String
var n:int = grid1.dataProvider.length;
var sum:Number = 0;
for (var i:int = 0; i < n; i++)
sum += grid1.dataProvider[i][col.dataField];
return parentApplication.currencyFormatter.format(sum);//.toFixed(2);
but i find i need to create a sumFunction for every datagrid with a different ID and i'm going to have many. i want to be able to reuse code (best practice) and reuse the same function for all grids. the problem is i dont know which grid to loop over the dataprovider for and return the result to. so i started doing something like this:
public function sumFunction(dgName:String,col:DataGridColumn):String
var n:int = this[dgName]dataProvider.length;
var sum:Number = 0;
for (var i:int = 0; i < n; i++)
sum += int(this[dgName]dataProvider[i][col.dataField]);
return parentApplication.currencyFormatter.format(sum);
but then my labelfunction needs another argument/parameter passed to it. oddly enough why doesn't the labelFunction work without passing in the col:DataGridColumn in the first example but now it doesnt once i add another argument/parameter to the function?
i was expecting this to then work if i changed the labelfunction on each datagrid to pass the id of the datagrid to let the sumFunction know which one to use:
labelFunction="sumFunction('grid2')"
this throws an error that i need another argument/parameter but i dont know what to pass in. i'm also getting errors about a string... anyone know how i can accomplish this?but i'm not within that packaged AS file... i'm in an MXML file that uses it like this:
<local:FooterDataGrid id="ptqGrid" x="10" y="487" width="940" itemClick="itemClickEvent('ptqGrid',event);" dataProvider="{parentApplication.Service.perfToQuota.lastResult}" rowCount="5">
<local:columns>
<local:FooterDataGridColumn headerText="Quota Description" width="180" dataField="quota_desc">
<mx:DataGridColumn headerText="Totals:" width="180" textAlign="right"/>
</local:FooterDataGridColumn>
<local:FooterDataGridColumn headerText="Quota" dataField="quota" labelFunction="{parentApplication.price_labelFunc}" textAlign="right" >
<mx:DataGridColumn labelFunction="sumFunction" dataField="quota" textAlign="right" />
</local:FooterDataGridColumn>
<local:FooterDataGridColumn headerText="Total Revenue" labelFunction="{parentApplication.price_labelFunc}" textAlign="right" dataField="tot_rev">
<local:itemRenderer>
<mx:Component>
<mx:Label text="{parentApplication.currencyFormatter.format(data.tot_rev)}" textAlign="right" color="#0000FF"
styleName="lblNoUnderline" buttonMode="true" useHandCursor="true"
mouseOver="styleName='lblUnderline';" mouseChildren="false"
mouseOut="styleName='lblNoUnderline';"/>
</mx:Component>
</local:itemRenderer>
<mx:DataGridColumn labelFunction="sumFunction" dataField="tot_rev" textAlign="right" />
</local:FooterDataGridColumn>
<local:FooterDataGridColumn headerText="Target Earnings" textAlign="right" labelFunction="{parentApplication.price_labelFunc}" dataField="trgt_earn">
<mx:DataGridColumn labelFunction="sumFunction" dataField="trgt_earn" textAlign="right" />
</local:FooterDataGridColumn>
<local:FooterDataGridColumn headerText="Total Earnings" textAlign="right" labelFunction="{parentApplication.price_labelFunc}" dataField="tot_earn">
<local:itemRenderer>
<mx:Component>
<mx:Label text="{parentApplication.currencyFormatter.format(data.tot_earn)}" textAlign="right" color="#0000FF"
styleName="lblNoUnderline" buttonMode="true" useHandCursor="true"
mouseOver="styleName='lblUnderline';" mouseChildren="false"
mouseOut="styleName='lblNoUnderline';"/>
</mx:Component>
</local:itemRenderer>
<mx:DataGridColumn labelFunction="sumFunction" dataField="tot_earn" textAlign="right" />
</local:FooterDataGridColumn>
<local:FooterDataGridColumn headerText="Achievement" textAlign="right" dataField="ach">
<mx:DataGridColumn labelFunction="averageFunction" dataField="ach" textAlign="right" />
</local:FooterDataGridColumn>
</local:columns>
</local:FooterDataGrid>
and here is my sumFunction that is giving me the problem and does not have access to the owner property:
public function sumFunction(col:FooterDataGridColumn):String
var n:int = ptqGrid.dataProvider.length;
var sum:Number = 0;
for (var i:int = 0; i < n; i++)
sum += int(ptqGrid.dataProvider[i][col.dataField]);
return parentApplication.currencyFormatter.format(sum);//.toFixed(2); -
Data loading problem in dataGrid in final flex2.0 release
hi all,
here is the code which call init user defined function every
time when creation complete event fire which bind array collection
as dataprovider of DataGrid but problem is its not working means
not load datain datagrid..
[Bindable]
public var MailList:ArrayCollection;
[Bindable]
public var MailListProcessed:ArrayCollection=new
ArrayCollection();
public var storeInfo:Array= new Array();
public function initDG(event:Event) : void
elementName=parentApplication.FlashMails.topInboxs.MailFolderLists.selectedItem.@post;
try{
MailList = new
ArrayCollection(mx.utils.ArrayUtil.toArray(event.target.lastResult.response.mailMessageLi st.mailMessage));
}catch(err:Error)
storeInfo[elementName]="";
MailListProcessed=new ArrayCollection();
if((storeInfo[elementName])==undefined)
storeInfo[elementName]=MailList;
MailListProcessed=storeInfo[elementName];
else if(parentApplication.FlashMails.topInboxs.blnFlag)
storeInfo[elementName]=MailList;
MailListProcessed=storeInfo[elementName];
binding MailListProcessed as dataprovider to datagrid
<mx:DataGrid tabEnabled="false" id="dgMailList"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
allowMultipleSelection="true"
dataProvider="{MailListProcessed}" styleName="DataGrid"
width="100%" height="100%" borderStyle="none"
borderSides="none" cornerRadius="500" focusAlpha="0"
textRollOverColor="#ffffff" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn labelFunction="getid" width="0.1"
resizable="false" visible="false" />
<mx:DataGridColumn dataField="contentType" width="0"
resizable="false" visible="false"/>
<mx:DataGridColumn labelFunction="getCCEmail" width="0"
resizable="false" visible="false"/>
<mx:DataGridColumn dataField="flag" headerText="Status"
sortable="false" width="50" itemRenderer="mailIconCmp"
resizable="false" />
</mx:Array>
</mx:columns>
</mx:DataGrid>
plz tell me what was exact solution for this...
thanks in advancecreationComplete only fires once when the application or
components are created. Your code looks like it wants to be a
result handler of a webservice. There's a chance that
createionComplete gets fired before the network returns the
data. -
08/29/2008 08:58:48 AM
Reply | Quote | Top | Bottom | Edit
hi all,
i have two classes.
class User
public String name;
public int age;
public Address address;
class Address
public String city;
I'm passing a List<Users> to the data provider of a
data grid . I can display the values of properties of Users i.e,
name and age.. My issue is how do i display the value of city which
is a propertyt of Address class in the datagrid column..
thanx in advance
Mark this message as the answer.
Print this message
Report this to a ModeratorHi,
Try labelFunction property of the DataGridColumn.
labelFunction allow you to specify a function name, which will be
invoked when that data is rendered. You will get the Object (User
id your case) corresponding the row being rendered will be passed
as argument to the function. You can use the object and return the
value you want to be displayed.
Please find more details on labelFunction at the URL below
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#l abelFunction
You can also try custom item renderer.
Hope this helps. -
Based on the examples
here
and
here
I have a datagrid which uses an XML object as its dataprovider. The
xml goes like this:
<questions>
<question>
<prompt>What are your heroes?</prompt>
<answers>
<answer>
<correct>true</correct>
<text>Luther Higgs</text>
</answer>
<answer>
<correct>false</correct>
<text>Barney Fife</text>
</answer>
</answers>
</question>
</questions>
Well formed (if a bit confusing) xml. In my datagrid I have
two columns. The second column binds to
questions.question.answers.answer.text and works just fine. The
datagrid's editable property is set to true, and I'm able to click
on the second colum and type and it saves the answer back into the
xml object just fine. The problem lies in my first column. The mxml
looks like this:
<mx:DataGridColumn headerText="Correct">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center">
<mx:RadioButton id="myRadioButton"
buttonMode="true" useHandCursor="true"
group="{outerDocument.myRadioButtonGroup}"
selected="{data.correct}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The problem is that the radio buttons' selected properties
aren't bound to the xml, that is the one that is true doesn't
display as selected. If I set the datagridcolumn's editable
property to false, clicking on the radio button doesn't affect the
xml at all either. If I leave the editable property of the
datagridcolumn as the inherited default of true (based on the
parent datagrid's editable property) when I click on the radio
button the default itemEditor appears (a text input box) which
contains the following text:
</answer>
and when I leave the editor (click outside or hit enter) the
xml then looks like this:
<answers>
<answer>
<correct>true</correct>
<text>Luther Higgs</text>
</answer>
<answer>
<correct>false</correct>
<text>Barney Fife</text>
<null><answer>
<correct>false</correct>
<text>Barney Fife</text>
</answer></null>
</answer>
</answers>
I have seen controls that don't have the xml path written
correctly display the entire xml node rather than just the
contained data, but I can think of no reason anything should Ever
reference just the closing tag. To me this looks like a bug in the
data bindings between the radio button and the xml object.
Just to clear the air to avoid suggestions that will work but
not meet the design requirements, what I need is a datagrid that
has a radio button group (only one correct answer out of the group)
in the first column and strings in the second column which need to
be editable. I suppose I could write some hairy event listener code
and manually hack things together, but aside from avoiding that
headache, I'd love to use data bindings for what they were intended
for - I just need to know why it doesn't appear to be working
right. Much thanks in advance for any and all help.Searching the LiveDocs revealed the answer. Under the topic
"Using an E4X expression in an <mx:Binding> tag" I found that
if instead of
<mx:RadioButton id="myRadioButton"
buttonMode="true" useHandCursor="true"
group="{outerDocument.myRadioButtonGroup}"
selected="{data.correct}"/>
I have
<mx:RadioButton id="myRadioButton"
buttonMode="true" useHandCursor="true"
group="{outerDocument.myRadioButtonGroup}"/>
<mx:Binding source="myRadioButton.selected"
destination="data.correct" />
It works just perfectly.
Apparently binding between XML and the selected property of a
radio button (which is of type boolean) needs the <mx:Binding
/> rather than the in-tag curly brace notation.
P.S. The link on livedocs is here:
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=databinding_091_05.html#177459 -
Multiple fields from array in one colum
hi there,
have started working in Flex 4 and quite enjoying it, I'm a designer with years of background in HTML-CSS and decided to shift to Flex.
While testing on a DataGrid with an ArrayCollection as a data provider, I have a firstName and LastName item in my array, is it possible to display it as one column in my DataGrid, what I did to display just both item from the array is
<mx:DataGridColumn headerText="Name" dataField="firstName" />
<mx:DataGridColumn headerText="Name" dataField="lastName" />
my Array is defined in the Script block..
would appreciate any help from you guys!Create a custom label function which returns a concatenated firstName and lastName:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
protected function displayFullName(item:Object, col:DataGridColumn):String {
return item.firstName + " " + item.lastName;
]]>
</mx:Script>
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn dataField="firstName" />
<mx:DataGridColumn dataField="lastName" />
<mx:DataGridColumn labelFunction="displayFullName" headerText="full name" />
</mx:columns>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object firstName="Xander" lastName="Crews" />
<mx:Object firstName="Wendell" lastName="Stamps" />
<mx:Object firstName="Grace" lastName="Ryan" />
<mx:Object firstName="Arthur" lastName="Watley" />
</mx:ArrayCollection>
</mx:dataProvider>
</mx:DataGrid>
</mx:Application>
Peter -
Using Nested Object Properties as DataGrid dataField
I am populating a DataGrid with an ArrayCollection of
Objects. Each of those Objects has a property that is itself an
Object. I want to use a property of the second (or "nested") Object
as a dataField for one of my columns.
Any idea how to make this work? Would a custom item render be
the only way?Using the labelFunction property of the DataGridColumn would
be enough:
<mx:DataGrid width="100%" height="100%"
dataProvider="{myAC}">
<mx:columns>
<mx:DataGridColumn dataField="myProperty1" />
<mx:DataGridColumn dataField="myProperty2" />
<mx:DataGridColumn
labelFunction="myOwnLabel" />
</mx:columns>
</mx:DataGrid>
function myOwnLabel(item:Object,
column:DataGridColumn):String
return item.myProperty;
The function must have that signature in order to work, where
item is an instance of the objects in your dataProvider and column
is the DataGridColumn calling the function. -
Datagrid labelfunction sort problem
I have a problem with sorting on all columns the moment I
implement a labelFunction in a datagrid. When I click the datagrid
headers nothing happens anymore. I need the labelFunction in the
first place to format some data.
Does anyone has a solution for my problem?
Here's the code (fragmented):
<mx:DataGrid id="dgUsers" dataProvider="{aUsers}">
<mx:columns>
<mx:DataGridColumn headerText="number"
labelFunction="dispUsers"/>
<mx:DataGridColumn headerText="name"
labelFunction="dispUsers"/>
<mx:DataGridColumn headerText="role"
labelFunction="dispUsers"/>
</mx:columns>
</mx:DataGrid>
private function dispUsers(item:Object, column:
DataGridColumn):String {
switch(column.headerText) {
case "number":
return item.username;
case "name":
return formatName(item.voornaam, item.tussenvoegsel,
item.achternaam);
case "role":
return item.roleName;
default:
return "";
private function formatName(sVoor:String, sMidden:String,
sAchter:String):String {
var sName:String = "";
if(sAchter != "") {
sName += sAchter;
if(sVoor != "") {
if(sName != "") {
sName += ", ";
sName += sVoor;
if(sMidden != "" && sVoor != "") {
sName += " " + sMidden;
return sName;Because you have a labelFunction, the DataGrid now needs a
sortCompareFunction to tell it how to sort your data. Here is some
extra info.
http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=L iveDocs_Parts&file=00000598.html
Joan Lafferty
Flex SDK QA -
Problem with labelfunction with checkbox itemrenderer
I have a DataGrid with a column that looks like this:
<mx:DataGridColumn headerText="Buy online?"
dataField="onlineshop" itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true" labelFunction="checkBoxLabel"
editorDataField="selected" />
My label function looks like this (for testing):
private function checkBoxLabel(item:Object,
column:Object):Boolean
return false;
The checkboxes in the grid always show up checked by default.
What am I doing wrong?"endquote" <[email protected]> wrote in
message
news:e4e0cj$ffh$[email protected]..
>I have a DataGrid with a column that looks like this:
>
> <mx:DataGridColumn headerText="Buy online?"
dataField="onlineshop"
> itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true"
> labelFunction="checkBoxLabel" editorDataField="selected"
/>
>
> My label function looks like this (for testing):
>
> private function checkBoxLabel(item:Object,
column:Object):Boolean
> {
> return false;
> }
>
> The checkboxes in the grid always show up checked by
default. What am I
> doing
> wrong?
labelFunction is for the *label* (of the CheckBox, in this
case). The
selected property of the CheckBox is set based on the value
of the
dataField--in your case, "onlineshop". Is onlineshop true in
all your items?
Manish Jethani
Developer, Flex Framework
Adobe Systems Inc. -
LineChart category axis labelFunction / dataProvider problem
Hi,
I am trying to plot a line chart using actionscript.
What I am trying to achive is plot the chart with entire dataset, but show only limited number of points in x and y axis's.
Problem:
When I give dataProvider to category axis with some limited values, nothing gets plotted .
Explaination:
In the attached main.mxml file
var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
//lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
lineCategoryXAxis.categoryField = "DATE";
lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
lineChart.horizontalAxis = lineCategoryXAxis;
Here, I am giving category axis for x-axis. Linechart takes care of values in the vertical axis by itself and so the line chart gets plotted properly.
But when I try giving values to vertical axis, then nothing is plotted in the line chart.
var lineCategoryYAxis:CategoryAxis = new CategoryAxis();
lineCategoryYAxis.dataProvider = getNumericPointsArray(valuesArray)
//lineCategoryYAxis.categoryField = "VALUE";
lineCategoryYAxis.labelFunction = lineCategoryYAxisLabelFunction;
lineChart.verticalAxis = lineCategoryYAxis;
Also if I try to reduce the number of points in the x-axis, nothing gets plotted
var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
lineChart.horizontalAxis = lineCategoryXAxis;
where getNumericPointsArray() returns an array with 7 values for vertical axis and getDatePointsArray() returns array with 7 dates for horizontal axis.
Need help in resolving this problem.
P.S: Unable to attach mxml file so attaching it as a txt file.Hi,
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.yahoo.data.digits.components.*"
layout="vertical"
backgroundColor="#FFFFFF"
backgroundGradientAlphas="[0,0]"
width="100%" creationComplete="cc()">
<mx:Script>
<![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.XMLListCollection;
import mx.collections.Sort;
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.Series;
import mx.collections.ArrayCollection;
import mx.charts.series.LineSeries;
import mx.charts.LineChart;
public var dataForLineChart:ArrayCollection = new ArrayCollection([
{DATE:"20090509", VALUE:"3538943147"},
{DATE:"20090510", VALUE:"5047760823"},
{DATE:"20090511", VALUE:"5046865494"},
{DATE:"20090512", VALUE:"4983771032"},
{DATE:"20090513", VALUE:"5032039834"},
{DATE:"20090514", VALUE:"4897303525"},
{DATE:"20090515", VALUE:"4496020991"},
{DATE:"20090516", VALUE:"3525547244"},
{DATE:"20090517", VALUE:"3596982398"},
{DATE:"20090518", VALUE:"4947978254"},
{DATE:"20090519", VALUE:"4932182219"},
{DATE:"20090520", VALUE:"4909069875"},
{DATE:"20090521", VALUE:"4781830807"},
{DATE:"20090522", VALUE:"4431176690"},
{DATE:"20090523", VALUE:"3476323135"},
{DATE:"20090524", VALUE:"3444512240"},
{DATE:"20090525", VALUE:"4329018809"},
{DATE:"20090526", VALUE:"5086390081"},
{DATE:"20090527", VALUE:"5012778551"},
{DATE:"20090528", VALUE:"4770167180"},
{DATE:"20090529", VALUE:"4408927585"},
{DATE:"20090531", VALUE:"3488537357"},
{DATE:"20090601", VALUE:"3630748728"},
{DATE:"20090602", VALUE:"5007093913"},
{DATE:"20090603", VALUE:"5015210737"},
{DATE:"20090604", VALUE:"4999236097"},
{DATE:"20090605", VALUE:"4934609881"},
{DATE:"20090606", VALUE:"4588135281"},
{DATE:"20090607", VALUE:"3615291868"},
{DATE:"20090608", VALUE:"3666209346"},
private function cc():void
var lineSeriesArray:Array = new Array();
var lineChart:LineChart = new LineChart();
lineChart.percentHeight = 100;
lineChart.percentWidth = 100;
lineChart.showDataTips = true;
lineChart.dataProvider = dataForLineChart;
var valuesArray:Array = new Array();
var datesArray:Array = new Array();
var lineSeries:LineSeries;
lineSeries = new LineSeries();
lineSeries.dataProvider = dataForLineChart;
lineSeries.dataFunction = lineSeriesDataFunction;
lineSeriesArray.push(lineSeries);
var dLength:int = dataForLineChart.length;
for (var k:int=0;k<dLength;k++)
valuesArray.push(dataForLineChart[k].VALUE);
datesArray.push(dataForLineChart[k].DATE);
lineChart.series = lineSeriesArray;
var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
//lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
lineCategoryXAxis.categoryField = "DATE";
lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
lineChart.horizontalAxis = lineCategoryXAxis;
var lineCategoryYAxis:CategoryAxis = new CategoryAxis();
//lineCategoryYAxis.dataProvider = getNumericPointsArray(valuesArray)
lineCategoryYAxis.categoryField = "VALUE";
lineCategoryYAxis.labelFunction = lineCategoryYAxisLabelFunction;
//lineChart.verticalAxis = lineCategoryYAxis;
chartContainer.removeAllChildren();
chartContainer.addChild(lineChart);
private function lineCategoryXAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
/** Will do date formatting here */
return categoryItem.DATE;
//return categoryItem.toString();
private function lineCategoryYAxisDataFunction(axis:CategoryAxis, item:Object):Object
return item.VALUE;
private function lineCategoryYAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
/** Will do number formatting here */
return categoryItem.VALUE;
//return categoryItem.toString();
private function lineSeriesDataFunction(series:Series, item:Object, fieldName:String):Object
if (fieldName == "yValue")
return item.VALUE;
else if(fieldName == "xValue")
return item.DATE.toString();
return null;
private function getNumericPointsArray(inputArray:Array):Array
var numValues:int = inputArray.length;
/** Sorting the array to find min and max values */
var inputAC:ArrayCollection = new ArrayCollection(inputArray);
inputAC.sort = new Sort();
inputAC.refresh();
var minValue:Number = Number(inputAC.getItemAt(0));
var maxValue:Number = Number(inputAC.getItemAt(inputAC.length - 1));
var outputArray:Array = new Array();
var i:int;
var diffFactor:Number;
var diffMinMax:Number;
/** axis takes 0 by default so not pushing that into array */
if (minValue == maxValue)
/** Dividing by 6 to get 5 points */
diffFactor = Math.round(maxValue / 6);
for (i=1;i<=5;i++)
outputArray.push((i * diffFactor));
outputArray.push(maxValue);
else
outputArray.push(minValue);
/** Find some points between minValue and maxValue */
diffMinMax = (maxValue - minValue);
/** Dividing by 5 to get 4 points */
diffFactor = Math.round(diffMinMax / 5);
for (i=1;i<=4;i++)
outputArray.push((i * diffFactor) + minValue);
outputArray.push(maxValue);
return outputArray;
private function getDatePointsArray(inputArray:Array):Array
var numValues:int = inputArray.length;
/** Subtracting 2 because first and last values are undconditinally pushed in output array.*/
var stepValue:int = (numValues - 2) / 5;
var outputArray:Array = new Array();
outputArray.push(inputArray[0]);
/** Starting from 1 and ending in numValues - 2 because first and last values of array are already taken.*/
for (var i:int=stepValue;i<numValues - 2;i+=stepValue)
outputArray.push(inputArray[i]);
outputArray.push(inputArray[numValues - 1]);
return outputArray;
]]>
</mx:Script>
<mx:HBox id="chartContainer" width="100%" height="100%">
</mx:HBox>
</mx:Application>
As you can see in the code, my dataPovider is complex (can become much more complex). In the code above, the ArrayCollection has only one element currently but will have more. So the graph should be plotted in such a way that each array element corresponds to one line series.
What I need to achive is that the horizontal axis should show dates only from the "0th" element of the ArrayCollection and that too only some limited 6-7 points, the rest of the ArrayCollection elements should get plotted according to these dates.
I think I was able to explain my problem. Pls let me know if any more explaination is required.
P.S. Re-attaching the file.
Thanks in advance -
Chart flickering problem when updating members of dataProvider
Hi all,
I'm having an issue with a PieChart, where the dataProvider
i'm using is getting updated under the hood and it's causing the
labels to drop in and out. Specifically, it looks like in the
updateDisplayList() method of PieSeries, there's a call to clear
the "labelLayer". I could have sworn i'd seen an example of an
updating pie chart that did not have a problem of flickering
labels, but i can't seem to figure out how to get rid of this
annoyance.
Here is a sample application that demonstrates what i'm
facing. Anyone have any ideas on how to get the labels to stick
around yet display the updated values?
Thanks,
./paul
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.CollectionEventKind;
import mx.events.CollectionEvent;
import flash.utils.getTimer;
import mx.events.PropertyChangeEvent;
import mx.formatters.NumberFormatter;
import mx.collections.ArrayCollection;
private var timer:Timer = new Timer(3000,1);
private var fireUpdate:Boolean = true;
private var ac:ArrayCollection = new ArrayCollection(
[ { "name":"record A", "mydata": 30 },
{ "name":"record B", "mydata": 60 },
{ "name":"record C", "mydata": 70 },
{ "name":"record D", "mydata": 80 },
{ "name":"record E", "mydata": 40 },
{ "name":"record F", "mydata": 90 } ]);
private var percentFormat:NumberFormatter = new
NumberFormatter();
private function init():void
timer.addEventListener( TimerEvent.TIMER, onTimerEvent );
percentFormat.precision = 0;
mychart.dataProvider = ac;
grid.dataProvider = ac;
pieSeries.field = "mydata";
timer.start();
private function onTimerEvent( evt:TimerEvent ):void
for each( var r:Object in ac )
r.mydata = int(((Math.random() * 0.1) + 0.95) *
Number(r.mydata)); // plus or minus 5%
trace( getTimer() + ": " + r.name + " -> " + r.mydata );
if( fireUpdate )
var cevt:CollectionEvent = new CollectionEvent(
CollectionEvent.COLLECTION_CHANGE );
cevt.kind = CollectionEventKind.UPDATE;
ac.dispatchEvent( cevt );
statusLabel.text = "Last Updated: " + getTimer();
timer.reset();
timer.start();
public function labelFunc(data:Object, field:String,
index:Number, percentValue:Number):String
return data.name + " (" + percentFormat.format(percentValue)
+ "%)";
private function toggleUpdateEvent():void
fireUpdate = !fireUpdate;
if( fireUpdate ) evtToggle.label = "Turn Off UpdateEvent";
else evtToggle.label = "Turn ON UpdateEvent"
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" >
<mx:HBox>
<mx:Button id="evtToggle" label="Turn Off UpdateEvent"
click="toggleUpdateEvent()" />
<mx:Label id="statusLabel" />
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:PieChart id="mychart" width="50%" height="100%">
<mx:series>
<mx:PieSeries id="pieSeries" labelFunction="labelFunc"
labelPosition="insideWithCallout" showDataEffect="eff"/>
</mx:series>
<mx:SeriesInterpolate id="eff" duration="1000"/>
</mx:PieChart>
<mx:DataGrid id="grid" width="50%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="name" />
<mx:DataGridColumn dataField="mydata" />
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:VBox>
</mx:Application>Hi
Please select the right Operating system and download the graphic driver and then update the Bios from the link given below and check if the issue is resolved.
Link
Also easy to find out if this is a Hardware issue once unit is powered on keep tapping F10 key and see if the display is the same if yes you might have to replace the screen.
Let us know how it goes!
"I work for HP."
****Click the (purple thumbs up icon in the lower right corner of a post) to say thanks****
****Please mark Accept As Solution if it solves your problem****
Regards
Manjunath -
I have an ApplicationControlBar above a data grid. The data grid has widths specified and is bound to a data source that is populated by a service call. The mark up below causes the description column to disappear and the header row is about 10 times taller than it should be. If I put an empty label inside the application bar it all loads as expected. I tried putting an updateComplete handler on the grid but I found two problems. Adding a trace to the method handler showed that it just kept firing over and over. It also prevented resize of the grid columns.
<mx:VBox
height="100%" width="80%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:ApplicationControlBar width="100%" horizontalGap="0" id="docsAppBar">
<mx:Button click="browseForDocs()" id="
docsTabUploadButton" label="
Upload Document" enabled="
{MediaManagerModel.activateUploadButton}"/>
</mx:ApplicationControlBar>
<mx:HBox width="100%" height="100%">
<mx:DataGrid dataProvider="{tabMediaList}" id="
docGrid" width="
100%" height="
100%" verticalGridLines="
true" variableRowHeight="
true" wordWrap="
true" sortableColumns="
false" editable="
false" allowDragSelection="
true" dragEnabled="
true" dragMoveEnabled="
true" dropEnabled="
true" dragComplete="updateRowPositions()"
itemClick="updateCurrentMediaObject()"
>
<mx:columns>
<mx:DataGridColumn width = "20" id="displayOrderCol" headerText="#" dataField="displayOrder" labelFunction="MediaManagerModel.getMediaDisplayOrder"/>
<mx:DataGridColumn width = "250" id="mediaNameCol" headerText="File Name" dataField="mediaName" />
<mx:DataGridColumn width = "120" id="mediaTypeCol" headerText="Type" dataField="mediaType" labelFunction="MediaManagerModel.getMediaTypeDisplay"/>
<mx:DataGridColumn width = "60" id="buyerCol" headerText="Public" dataField="buyer" labelFunction="MediaManagerModel.getPublicDisplay" textAlign="center"/>
<mx:DataGridColumn width = "50" id="mediaSizeCol" headerText="Size" dataField="mediaSize" labelFunction="MediaManagerModel.getMediaSizeDisplay" textAlign="center"/>
<mx:DataGridColumn width = "90" id="inputDateCol" headerText="Date Added" dataField="inputDate" labelFunction="MediaManagerModel.getMediaInputDateDisplay" textAlign="center"/>
<mx:DataGridColumn width= "240" id="mediaDescrCol" headerText="Description" dataField="mediaDescr" />
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:VBox>
If I add <mx:Label/> inside the ApplicationControlBar everything renders fine. Any ideas?How are you re-assigning the dataProvider from the
RemoteObject result?
Tracy
Maybe you are looking for
-
What is period end closing? why it is used?
what is the use of period end or month end closing? i know trasaction code ob52 is used to open and close posting period...but what are period end and month end closing in fi?
-
Will an iMac mini and mountain lion work with a touch screen monitor?
I was wondering if Mountain Lion would work with a touch screen monitor. I have a project in mind and this is a key part to the equation. If any one could help this would be greatly appreciated. Thanks in advance.
-
Some PDF Documents are Missing Letters when Printing
We use a Windows Server 2008 R2 Enterprise (64-bit) server as our print server. Ever since we moved our printers to this server, several of our existing PDF documents have missing letters when they print. If you modify your print properties and choos
-
can an image be used as a gradient over another image? eg green grass as an overlay instead of using a color from gradient fill box.
-
Bluetooth problem new MacBook Pro 13"
I am using an older bluetooth mighty mouse with a MacBook Pro 13" (Mt. Lion). The bluetooth will randomly hang, I cannot toggle it on or off. I can't use the mouse set up either. It says the mouse is connected. The only fix is to restart the machin