Legend dataprovider problem
Hello there,
I would like to create a legend to a gantt chart in order to identify the colors in the chart.
For that I created a xml to be used as a data provider.
The XML is:
<?xml version="1.0" encoding="utf-8"?>
<items>
<item id="1" label="livre a 100%" color="0x66CC00" />
<item id="2" label="livre de 75% a 100%" color="0x009900" />
<item id="3" label="livre de 50% a 75%" color="0xFFFF33" />
<item id="4" label="livre de 25% a 50%" color="0xFF9900" />
<item id="5" label="livre de 0% a 25%" color="0x3366FF" />
<item id="6" label="não está livre" color="0x3300CC" />
</items>
And I already have the labels in the legend, but I'm having some problem's with the color... The legend shows every marker as black.
<mx:Legend id="legAvailable" dataProvider="{legAvai}"
toolTip="Available legend" backgroundColor="#CDCDCD"/>
Can anyone help or give any idea of how to sort this out?!?! I'm in a bit of a tight schedule...
Thanks in advance.
I've been looking for some answers and haven't found anything yet...
Does anyone has any idea of how to work this out?? Or why are all the markers colored as black...
Thank you
P.S. I'm leaving an image so you can visualize my problem...
Similar Messages
-
We are using a Legend control (data provided by a Chart).
When the use clicks on an item in the legend, we need to capture
this event. We are facing the current problems:
1. The text in the Legend control needs to be underlined. We
have set the textDecoration="underline" as indicated by the API but
the text is not underlined.
2. We want to show a hand cursor when the user hovers on the
item. To do this we have set useHandCursor="true"
mouseChildren="false" buttonMode="true"
The problems are (a) If mouseChildren is set to false, we
cannot capture the item click event. If its set to true, the hand
cursor is shown on the background, not the item text.
Please advise."kartikjayaraman" <[email protected]> wrote
in message
news:gd33gk$pn1$[email protected]..
>
quote:
Originally posted by:
Newsgroup User
>
> "kartikjayaraman" <[email protected]>
wrote in message
> news:gd314s$n0b$[email protected]..
> > Ok, I'll try that. What about the textDecoration
property set to
> > underline. It doesn't show the text as underlined.
Is this a Flex API
> > bug
> > or am I doing something wrong?
>
> I don't know what you're doing, so I can't speculate
about whether it is
> wrong or right.
>
>
>
>
>
> All I am doing is setting textDecoration="underline" -
shouldnt the items
> be
> then underlined?
>
> <mx:Legend verticalGap="1" horizontalAlign="left"
markerHeight="8"
> markerWidth="8"
> width="780" dataProvider="{MyDataProvider}"
> fontSize="10" id="ChartLegend"
textDecoration="underline"
> height="70" x="10" y="337"
> useHandCursor="true" mouseChildren="false"
buttonMode="true">
> </mx:Legend>
Try:
<mx:Style>
LegendItem {
textDecoration:underline;
</mx:Style> -
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 -
Mixed signal graph : Legend udate problem
When manipulating the graph in diagram window with properety nodes like example "Plot Visible", the legend of the mixed signal diagram will not be updated. Only when refreshing the front panel by scrolling with the mouse up or down, the legend is correcty updated.
How to refresh the front panel programmatically or any other solution ?
Thankx,
CLaudeHello,
Thank you for posting to the NI Discussion Forums. I was unable to reproduce this problem with LabVIEW 8.0.1.
Perhaps this was a problem fixed in the release, or perhaps there is
something different about our two computers (such as OS for
example). Check out this page to update your version of LabVIEW 8. Please let me know if this fixes the problem.
Message Edited by Travis M. on 05-10-2006 09:36 AM
Travis M
LabVIEW R&D
National Instruments
Attachments:
untitled.JPG 69 KB -
XMLLists as Dataprovider problem
I have an XML variable "theResult" equal to the following xml
from a flickr webservice call (without data):
<rsp>
<photos>
<photo>
<tags>
<tag>here1</tag>
<tag>here2</tag>
<tag>here3</tag>
</tags>
</photo>
<photo/>
<photo/>
<photo/>
<photo/>
</photos>
</rsp>
I added the <tags> and <tag> manually. I wanted
to display this data in a TileList of VBoxes, so I set the
dataProvider of the TileList as "{theResult.photos.photo}", without
any problem. I also wanted to display each tag, so I tried setting
a Repeater in the VBox with a dataProvider of "{data.tags.tag}".
However, nothing displayed, so after much searching I discovered
that setting "{data.tags.children()}" as the dataProvider for the
Repeater would work. I just would like to know why this is so, just
to satisfy the curiosity that futile hours of work have built up.
Shouldn't data.tags.tag be an XMLList just as
theResult.photos.photo or is data found using "." notation handled
somehow differently for XMLLists than XMLs?Thanks for the reply. When I set theResult your way it works
fine. However, in my code I set theResult with the following
statements:
public function handlePhotos(event:ResultEvent):void
theResult = XML(event.result);
theResult.photos.photo[0].tags.@id = "enabled";
theResult.photos.photo[0].tags.tag[0]="here1";
theResult.photos.photo[0].tags.tag[1]="here2";
theResult.photos.photo[0].tags.tag[2]="here3";
I guess data binding might only be recognizing the first
statement and ignoring the rest? Or perhaps it's that
theResult.photos.photo.tags.tag does not exist when theResult is
first changed, so flex doesn't know what to listen to for data
binding? The reason I tested my code like this is because I need to
set the tags for each photo by making a call to a flickr web
service for each one before having the data to attach. I guess I'll
need to keep using the children() method. -
Mapviewer11gPr1 - legend print problem
Hi,
I am dynamically changing html content in collapsible decoration (as a legend for map)
this style:
var element = document.getElementById("leg");
if (element != null)
while (element.firstChild) {
element.removeChild(element.firstChild);
var html = buildLegend(baseURL);
element.innerHTML = html;
the result is dynamic legend shown on screen correctly but if i try to print the map
only firstly loaded legend is printed and I need to refresh page in browser to get current
map legent to print. here is the video:
http://www.freewebalbum.com/demo/print_legenda/print_legenda.html
thanks,
BranislavThis is a bug. We will fix it. Thanks.
-
ComboBox w/RO DataProvider Problem
I've got a combobox that is supposed to get filled from a
RemoteObject call, but for some reason all I'm seeing is the text
"[objectOperation]" in the dropdown.
Here's the combobox:
<mx:ComboBox width="150" id="categorySelector"
labelField="CATEGORYNAME">
<mx:dataProvider>{parentApplication.groupsService.groupsService.categoryList}</mx:dataProv ider>
</mx:ComboBox>
The dataprovider is built from an array that is returned
from the remoteObject like such:
categoryResult =
ArrayUtil.toArray(parentApplication.groupsService.groupsService.getCategories.lastResult) ;
for (var i:int = 0; i < categoryResult.length; ++i) {
var catLabel:String = categoryResult
.CATEGORYNAME;
var catID:int = categoryResult.CATEGORYID
var obj:Object = {label:catLabel, data:catID};
categoryComboDP.addItem(obj);
I know the service is returning data properly (it is already
being used in some repeaters elsewhere), and as far as I can tell
the categoryComboDP collection is built properly. I've stepped
through in the debugger mode as well and can't see where it is
malformed.
Any ideas?yikes... sorry, I bungled that one pretty badly... had some
bad scoping issues as well.
Thanks for wasting a little bit of your life reviewing the
code. I was butting my head against a styrofoam wall of my own
creation.... -
I use removeAll function to clean the dataProvider then I additem to it.
There is an error occured. Because the dataProvider is null !
So I recreate the dataProvider the error still there Why ~~?
this is the code:
var i:int = 0;
if( TileList.dataProvider )
TileList.dataProvider.removeAll(); // I remove all items.
else{ // next time I try to recreate it but I still can't add item to the dataprovider
// TileList.dataProvider.addItem("Class 1"); I can't do it because the dataprovider is null now
TileList.dataProvider = new ListCollectionView( );
while( i++ < 15 ){
TileList.dataProvider.addItem("Class" + i);Hmm.. It seems that the data provider is not getting instanciated, which is resulating into null object reference error. I tried out the following code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import flash.text.engine.ContentElement;
import mx.collections.ArrayCollection;
public function btnClick():void
var i:int=0;
if (contentList.dataProvider.length > 0)
contentList.dataProvider.removeAll();
else
contentList.dataProvider=new ArrayCollection();
while (i++ < 15)
contentList.dataProvider.addItem("Class" + i);
]]>
</mx:Script>
<mx:Canvas width="100%"
height="100%">
<mx:TileList id="contentList"
visible="true"
width="50%"
height="50%"
horizontalCenter="0"
bottom="10"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
verticalAlign="middle"
maxColumns="3"
maxRows="5"
rowHeight="{contentList.height*0.20}"
columnWidth="{contentList.width*0.33}"
dataProvider="{new ArrayCollection()}">
</mx:TileList>
<mx:Button id="btn"
label="Populate Tile List"
width="{btn.label.length * 8}"
height="20"
click="btnClick()">
</mx:Button>
</mx:Canvas>
</mx:Application>
May be this will help you.
Thanks and Regards,
Pooja Kuber | [email protected] | www.infocepts.com -
Hello:
I have a ObjectLIstDataProvider (i.e. oldp) stored in session in order to support sorting functions. It works fine.
However, when a user leavs the page where a table uses this oldp and browses some other pages, then comes back to this page, the data will still be shown for this user since oldp is stored in session (i.e. SessionBean1.java).
Here is my question: Is there any way knowing a user is browsing away from the page with oldp so i could clean the oldp in session? Where should i put this code for cleaning?
I did not find a way to distinguish when a page is rendering due to button action/sorting action/Dropdown list change (in those case, you should keep the oldp in session), and when a user is coming to this page from another page (In this case you DO need to clean oldp in sesion)?
I guess i could record last rendered page in session in order to distinguish where a user is from (same page or another page). However, I would like a more descent way to do it.
Please help.
thanksHi Anand,
I have launched two of the same application from the content area of the portal screen. Each one opens up in a separate internet explorer window. They share the same data since i am writing the data to the session. I do not want them to share the same data. How can this be achieved? Taking into mind that i have another portal application jsp dyn page embedded within this component that uses the shared data.
Regards
Jana -
Legend Problem in multiple series chart
Hello,
I am getting problem in displaying legend. I have created a chart with multiple series and custon color. Here is my code. You can copy paste it.
Out of 3 only one legend marker n label coming.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
[Bindable]
public var SMITH:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", close:41.87, close2:45.23},
{date:"23-Aug-05", close:45.74, close2:40.90},
{date:"24-Aug-05", close:42.77, close2:46.99},
{date:"25-Aug-05", close:48.06, close2:40.22},
[Bindable]
public var DECKER:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", close:157.59},
{date:"23-Aug-05", close:160.3},
{date:"24-Aug-05", close:150.71},
{date:"25-Aug-05", close:156.88},
]]>
</mx:Script>
<mx:Style>
ColumnChart {
paddingLeft:20;
paddingRight:20;
paddingBottom:10;
paddingTop:10;
Legend {
paddingLeft:20;
paddingRight:20;
paddingBottom:20;
paddingTop:10;
</mx:Style>
<mx:Stroke id="axisStroke"
color="#000000"
weight="2"
alpha=".75"
caps="round"
/>
<mx:VBox width="500" height="500" borderColor="#000000" cornerRadius="20" themeColor="#009DFF" borderStyle="solid" borderThickness="1" horizontalAlign="center" x="246.5" y="61">
<mx:ColumnChart id="multipleChart" showDataTips="true" width="100%" height="100%" seriesFilters="[]">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="date"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer placement="bottom" axis="{h1}">
<mx:axisStroke>{axisStroke}</mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>
<mx:AxisRenderer placement="right" axis="{v2}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="cs1" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close" displayName="Smith" fills="#6693B0">
<mx:verticalAxis>
<mx:LinearAxis id="v1" minimum="40" maximum="50"/>
</mx:verticalAxis>
</mx:ColumnSeries>
<mx:ColumnSeries id="cs3" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close2" displayName="Smiths" fills="#86D1E4">
</mx:ColumnSeries>
<mx:LineSeries id="cs2" horizontalAxis="{h1}" dataProvider="{DECKER}" xField="date" yField="close" displayName="Decker">
<mx:verticalAxis>
<mx:LinearAxis id="v2" minimum="150" maximum="170"/>
</mx:verticalAxis>
<mx:lineStroke>
<mx:Stroke color="#CC3300" weight="1"/>
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{multipleChart}" horizontalAlign="center" direction="horizontal"/>
</mx:VBox>
</mx:Application>I've run into this, too:
Remove the fills property from each ColumnSeries and it'll work.
If you want to use the fills property, you'll have to add your own custom legend code.
From the Flex API:
"If you specify the fills property and you want to have a Legend control, you must manually create a Legend control and add LegendItems to it." -
Hi All,
I am generating a map request to get a legend in PDF format as follows.
<?xml version="1.0" standalone="yes"?><map_request
datasource="MYDATASOURCE" format="PDF_STREAM" width="1188" height="840"
antialiase="true" srid="8292"><legend bgstyle="fill:#FFFFE8;stroke:#708090;"
position="SOUTH_EAST" profile="SMALL">
<column>
<entry text="LEGEND WITH PROBLEM" is_title="true" />
<entry style="" text="up to 444.306.878" />
<entry style="" text="204.299.813 a 444.306.878" />
<entry style="" text="138.180.596 a 204.299.813" />
<entry style="" text="118.706.493 a 138.180.596" />
<entry style="" text="100.910.715 a 118.706.493" />
<entry style="" text="74.385.591 a 100.910.715" />
<entry style="" text="38.539.881 a 74.385.591" />
<entry style="" text="down to 38.539.881" />
</column>
</legend>
</map_request>
The problem is that the large numbers exceeds the legend size. This just happens with the PDF format.
I dont want to use the LARGE profile because gets too big.
Is there any workaround to this problem?
Thanks.
CleberHi Cleber,
which MapViewer version are you using? This may be related with the PDF graphics library version. This library has been modified to better handle the legend texts. I tested your request and it appears to be OK with the current library. You can send me (by email) a picture of your legend, and I will confirm if this has been fixed.
Joao -
Stacked 100% bar chart - Problem with datatips for zero value data points
I have a stacked 100% bar chart that shows datatips in Flex 4. However, I don't want it to show datatips for
data points with zero values. Flex 4 shows the datatip for a zero value data point on the left side of a bar if the data point is not the first in the series.
Here's the code that illustrates this problem. Of particular concern is the July bar. Because of the zero value data point problem, it's not possible to see the datatip for "aaa".
Any ideas on how we can hide/remove the datatips for zero value data points ? Thanks.
<?xml version="1.0"?>
<s:Application
xmlns:fx="
http://ns.adobe.com/mxml/2009"xmlns:mx="
library://ns.adobe.com/flex/mx"xmlns:s="
library://ns.adobe.com/flex/spark"creationComplete="initApp()"
height="
1050" width="600">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var yearlyData:ArrayCollection = new ArrayCollection([{month:
"Aug", a:1, b:10, c:1, d:10, e:0},{month:
"July", a:1, b:10, c:10, d:10, e:0},{month:
"June", a:10, b:10, c:10, d:10, e:0},{month:
"May", a:10, b:10, c:10, d:0, e:10},{month:
"April", a:10, b:10, c:0, d:10, e:10},{month:
"March", a:10, b:0, c:10, d:10, e:10},{month:
"February", a:0, b:10, c:10, d:10, e:10},{month:
"January", a:10, b:10, c:10, d:10, e:10}]);
private function initApp():void {}
]]>
</fx:Script>
<s:Panel title="Stacked Bar Chart - Problems with DataTips for Zero Value Items" id="panel1">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:BarChart id="myChart" type="stacked"dataProvider="
{yearlyData}" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
xField="a"displayName="
aaa"/>
<mx:BarSeries
xField="b"displayName="
bbb"/>
<mx:BarSeries
xField="c"displayName="
ccc"/>
<mx:BarSeries
xField="d"displayName="
ddd"/>
<mx:BarSeries
xField="e"displayName="
eee"/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</s:Panel>
<s:RichText width="700">
<s:br></s:br>
<s:p fontWeight="bold">The problem:</s:p>
<s:p>Datatips for zero value data points appear on left side of bar (if data point is not the first point in series).</s:p>
<s:br></s:br>
<s:p fontWeight="bold">For example:</s:p>
<s:p>1) For "June", eee = 0, mouse over the left side of the bar to see a datatip for "eee". Not good.</s:p>
<s:br></s:br>
<s:p>2) For "July", eee = 0 and aaa = 1, can't see the datatip for "aaa", instead "eee" shows. Real bad.</s:p>
<s:br></s:br>
<s:p>3) For "Feb", aaa = 0, datatip for "aaa" (first point) does not show. This is good.</s:p>
<s:br></s:br>
<s:p>4) For "Mar", bbb = 0, datatip for "bbb" shows on the left side of the bar. Not good.</s:p>
<s:br></s:br>
<s:p fontWeight="bold">Challenge:</s:p>
<s:p>How can we hide/remove datatips for zero value data points?</s:p>
<s:br></s:br>
</s:RichText></s:Application>FYI.
Still have the issue after upgrading to the latest Flex Builder 4.0.1 with SDK 4.1.0 build 16076.
Posted this as a bug in the Adobe Flex Bug and Issue Management system. JIRA
http://bugs.adobe.com/jira/browse/FLEXDMV-2478
Which is a clone of a similar issue with Flex 3 ...
http://bugs.adobe.com/jira/browse/FLEXDMV-1984 -
Hey Experts,
I have a small issue but cannot seem to find the solution. I have a pie chart with legends which I want to show side by side (horizontally). First pie chart and then legends. My requirement is that when the window is resized, the pie chart should also resize. I am able to show the chart and legends horizontally but when the legends list is long, the pie chart is always aligned in the center vertically. I tried setting all properties such as verticalAlign = "top", verticalCenter = "false", tried putting pie chart and legends in a separate VBox but nothing seems to work. Below is the code snippet.
I believe others would have faced this problem. Can someone help?
<mx:HBox width="100%" height="100%" verticalAlign="top" verticalCenter="false">
<mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
<mx:PieChart id="pieChart" width="100%" height="100%" showDataTips="true" minWidth="200" minHeight="200" verticalCenter="false"/>
</mx:VBox>
<mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
<mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>
</mx:VBox>
</mx:HBox>Hi Dajji,
Here is the code which resolves the problem...
Note: In the code below I have removed the percentage width and height for PieChart.....that resolves the problem.....but the thing here is as you resize
your browser window the piechart width and height will not change accordingly...? Do you need PieChart to change its dimensions as your browser window
resizes...???
However if you specify width="100%" and height="100%" for PieChart you never gonna acheive the PieChart to be vertically alined to top.....why because
as you specified width="100%" and height="100%" for PieChart it occupies the total dimensions of the VBox but the actual visible portion dimensions are
less... because within the VBox you also have the legends so Flex will assign the sizes proportionately....for PieChart and Legends..
Hope you got my point...So you should remove the width="100%" and height="100%" for PieChart then you can acheive what you needed...
<?xml version="1.0"?>
<!-- Simple example to demonstrate the PieChart control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String= (" " + percentValue).substr(0,6);
return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
]]>
</mx:Script>
<mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%" layout="horizontal" verticalAlign="top">
<mx:VBox verticalAlign="top" height="100%" width="100%">
<mx:PieChart id="chart"
showDataTips="true"
dataProvider="{medalsAC}">
<mx:series>
<mx:PieSeries
nameField="Country"
field="Gold"
labelFunction="displayGold">
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:VBox>
<mx:Legend dataProvider="{chart}"/>
</mx:Panel>
</mx:Application>
Thanks,
Bhasker Chari -
Screen resolution problem for components in a canvas
Hi,
I am developing a Flex application, and I am using more than
one canvases in a single page(with in application tag).
And one canvas has elements like Chart, datagrid, legent
& a label.
Width & Height I gave to canvas and all its elements
(except legend & label) is in percentages
The problem I am facing is that,
when I change the screen resolution, and
when I press F11(full screen) in IE, the all objects except
legend & label are increasing/decreasing, and in some cases
lagend & label are overlapping in the chart & data grid.
Could anybody please advise what I need to follow to
eliminate these kind of problems.
Thanks in advance.
PavanOoooooh, haha my bad, I didn't realize you were talking about
relative positioning on your app.
Here's what's happening. Your component/application is in
ABSOLUTE layout mode, so you can specify coordinates for where
controls and components should be placed. When the size of the
application changes, these coordinates are hard-coded, and they
will always display in the same place, which can case them to run
into components that have been resized to fit the new application
size. Now fixing those numbers is not easy. In fact, I don't know
of any way to make those numbers dynamic so they adjust when the
application size adjusts.
Instead, I suggest using constraints or Vbox/Hbox rather than
hardcoded coordinates. With constraints, you can specify how far
your Legend component is from the edges of the container it's in.
Or, you can use the VBox or HBox so your component is always in the
place it needs to be.
<mx:HBox width="80%" height="50%" top="10" left="10">
<mx:PieChart id="piechart1">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}"/>
</mx:HBox>
In this example, You can see I set top and left to 10. This
means that my HBox will be exactly 10 pixels from the top and left
side of my application (or container, or whatever it's confined
to). The Piechart and Legend fit neatly inside the HBox, and
because it's an HBox, they will be side by side horizontally.
If you need spacing between your chart and legend, you can
always use the Spacer control under Layout.
<mx:HBox width="80%" height="50%" top="10" left="10">
<mx:PieChart id="piechart1">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Spacer width="100%"/>
<mx:Legend dataProvider="{piechart1}"/>
</mx:HBox>
As you can see, the Spacer control is separating our chart
and the Legend by a width specified. Always use a percentage here,
as you'll run into problems I talked about in my previous post.
100% means the chart and the Legend will be as far away as they can
be while staying within the Hbox container. If you decreased it to
50%, they would only be half as far away.
Hope this helps.
EDIT:
One last example of a pie chart and a Legend within a canvas.
Each object has constraints to the canvas, which lets us put them
whereever we want within the canvas:
<mx:Canvas x="0" y="0" width="80%">
<mx:PieChart id="piechart1" left="10" top="10">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}" right="10"
bottom="10"/>
</mx:Canvas>
From this example, the chart will always line up to be 10
pixels from the top and left of our canvas. The Legend however,
will always line up to be 10 pixels from the right side and bottom
of our canvas. Adjusting the canvas size, the chart size, or the
legend size will give you the desired distance between these two
objects. -
Legend: Can't change fontsize
Hi,
I have created an PieChart with a Legend. The FontSize of the
Legend is too small and I want to change it but it doesn't work:
<mx:Legend dataProvider="{chartLief}"
height="80%"
width="25%"
fontSize="24">
</mx:Legend>
The Legend is displayed but only with the standard fontsize
(something like 9 or 10).
I hope you can help me. Thanks in advance.
Nika267The problem is based on a bug that was deferred (
http://bugs.adobe.com/jira/browse/FLEXDMV-1656).
There are several workarounds, but the simplest is to set the
fontSize on the LegendItem type selector, like this:
<mx:Style>
LegendItem {
fontSize:24;
</mx:Style>
hth,
matt horn
flex docs
Maybe you are looking for
-
Can't download itunes - security zone policy error message - please help!
Hi there, I have had an ipod for a while now but can't use it as everytime i try to download itunes I just get the following error message; This download has been blocked by your security zone policy - edgesuite.net. I am using firefox on a windows v
-
Resultset problem. any ideas?
hi people ive got a jsp page that is looking up some results and returning the values from the resultset. there are two different result sets, the first one should only return the one recordset and works perfectly.. the second does not, in my databas
-
Hi, I am new to Solaris and have some questions about SNMP. Does Solaris (9,10) include any binaries that allow you to make SNMP request to external equipment such as routers or other SNMP hardware? I am considering the possibility of using a shell s
-
Hi all, Is it possible to get cumulative values for a column in a report ,using a querry or crystalreport. Also how we can populate data or rows for which there was no transaction. Thanks
-
Logical Column Mapping to Multiple Physical?
I am "learning" OBIEE still and a consultant today showed me something that totally blew my mind In the OBIEE Admin tool (in verson 10) there are 3 layers displayed. The physical, business management and presentation layer. I was under the impression