Css :: Apply StyleSheet To Datatips Of ColumnChart Control In Flex
Apr 29, 2011how can i apply styleSheet to datatips of ColumnChart control in flex?
View 1 Replieshow can i apply styleSheet to datatips of ColumnChart control in flex?
View 1 RepliesI'd like to load CSS stylesheets from a URL and apply them to my Flex 3 application at runtime.
View 2 RepliesHere is my Problem: I'm currently using a ColumnChart to display 6 label/value pairs. When two labels are the same, the chart stacks them up, one on top of the other. I want to display these duplicates side by side, their value might be the same or it might be distinct. My first thought was to append a unique id to the label, but that's not possible according to the client. So, is there a way to tell the chart to also take a hidden id into consideration? Someone suggested to do some sort of grouping, but I need to display each chart separate, as if they were distinct charts.
the chart's data provider is an array of these objects:
obj.description = "des";
obj.countV = 3;//some arbitrary number
obj.id = 2; //a unique id..
I want to customize the images on increment and decrement buttons in spark numericstepper and I trying the following in my css file. But it doesnot work for spark numericstepper.
s|NumericStepper
{
downArrowDisabledSkin: Embed(source="assets/componentImages/downArrowDisabledSkin.png");
[Code].....
I have a TextField that has been populated with html text, which includes images using the <img> tag. I don't want to display these images to the user, however when I apply a StyleSheet with the img tag having the display property set to none, it doesn't appear to work.
View 1 RepliesHow can I customize my barchart datatips in flex? The transparent background of them is too dark to see any of the text in them.
View 1 RepliesDataTips in flex charting are a poorly documented and little-understood feature.There are three parts, the DataTip (by default a box with text inside), the DataTipTarget (default bulls-eye circle over the series' point), and the Callout (the line from dataTipTarget to DataTip box).How are these three elements created/drawn and how can they be customized?
View 1 RepliesFlex charts, like AreaChart, have wonderful built-in support for displaying data "tool tips" when a user hovers over a point supplied in the data of a graph. You can hover over any of the bar graph examples on this page for a demonstration. I have a graph situation where I optionally draw in some dots as reference points on CartesianDataCanvases supplied to my AreaChart through it's <mx:annotationElements> and <mx:backgroundElements> tags.
I would like to have the same hover data-tip functionality that the AreaChart has, but applied to these dots. I realize that I am just drawing on canvas, and that no actual dataProvider supports these dots, but if there was a way to supply the CartesianDataCanvas with an array of data values or something to that effect,
I assume I need to override the mouse over and mouse off event so that they don't do anything and then trigger the mouse over event for each column on the graph.
View 2 RepliesI have a line chart with a column chart as a secondary series. When I roll over the line, the datatips appear. However, if I move the mouse to a spot where a column appears while still on the line, the data tip item appears for the line AND the column. How do I get it so that I only show datatips for the line but not the column?
[Code]...
I'm using a Flex ColumnChart with a custom dataTipRenderer. I'm able to apply a nice skin with the dataTipRenderer, but am not sure how to move the datatip to be centered. Is there a way to have the chart center the data tips over the column instead of the normal top-right alignment the chart does?
Instead of:
|tip text|
+++
+++
+++
+++
+++
+++
+++
+++
I want:
| tip text |
+++
+++
+++
+++
+++
+++
+++
+++
I'm using a flex columnchart to display data, that changes at runtime. It works perfectly, except the fact, that the y-axis with is automatically resized when the values goes under 1.For example first the values of the charts are between 0 and 10. The y-axis now has labels like 0,1,2,3,4...10. If the values are going under 1 the labels are updated to 0.0, 0.1, 0.2...1.0. And because of the width of the labels, the group with the charts is resized.It looks like the chart is "jumping".So, I need a way, to set a fixed width of the y-axis of the chart.
View 2 RepliesWhen using a ColumnChart created in Flex 3, how can I to change the fill color of columns that meet a certain criteria?
Example: I have 8 columns representing agreement percentages between groups of people and want to change the fill color (or otherwise highlight) of all the columns that have over 80% agreement.
I need to create a custom y-axis in a columnChart that resembles a tall / skinny VBox (sorry can't post pictures) and has the axis labels (20, 40, 60, 80, 100) inside the axis.By default, the y-axis is a line and I have found methods of making the line thicker but I need the labels inside the axis.I have tried using the AxisRenderer class but can not find any good examples on the proper use.
View 1 RepliesI can't seem to figure out why, but the label on my ColumnSeries always seems to get truncated regardless of how wide the column is. I've tried setting the labelSizeLimit to an arbitrarily large number, but that doesn't seem to help
Here is some sample code:
<?xml version="1.0" encoding="utf-8"?><mx:Application name="BarChart_barWidthRatio_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
[code]....
I have arraycollection with the attribute Month with similar data you can find Month:"Feb" for 5 times. If I run my application data wont appear on the screen for Feb i.e columnchart wont get displayed.
<mx:Script>
<![CDATA[
import mx.charts.series.ColumnSeries;
import mx.collections.ArrayCollection;
[Code]....
I wrote a function to override y FLEX LineChart's datatips because the default datatips were ugly and rather boring.I finally set the style I wanted but am now having some problems removing un-necessary tags from being displayed in the custom datatips.For example, the datatips now display things like this:
"<b>Humidity</b></BR>2010-07-05T00:15:00"
I can always perform a "Replace()" to remove those break and bold HTML tags, but that seems really un-necessary and anti-development.I am using this to set the dataTip's label text:
var hd:HitData = value as HitData;
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;
_xAxisText = String(hd.displayText + ' ' + item.xValue);
[code].....
Columns of columnChart are showing too narrow if i am using the LinearAxis, even tried columnWidthRatio = 0.95 for category axis, this is fine
I just want to increse the width of column on this chart.
Sample to reproduce the problem:
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxis;
[Code]....
How can I color the ColumnSeries differently based on data. I need something like a labelFunction only for the column fill.
EDIT: Attached image for JAX to understand. :)
I have a neat chart that is rendering overlaid columns with values in excess of 6000 but my vertical axis stays at 0-100, as if my dataProvider was being ignored.
The problem here is with "msAxis" autoAdjust didn't change anything. Do I need to force its values manually?
<mx:ColumnChart xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
[Code].....
i can able to create StyleSheet object , i need to save that StyleSheet object to css file(in the css format).
how can i do in flex3 Air application , is there any build in library ? Or links available to save as *.css file
This bug is hard to describe, but easily reproduced with the bottom code. Just copy, paste, and compile+run in Flex 3 and you'll see the problem.
Edit: Here is a link to a running demo: [URL] In the demo, the default color of TextArea is set to red.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" applicationComplete="applicationComplete(event);">
[Code].....
I have a few styles that I want to apply to a slider. I'm aware of the MXML method of defining a mx:Style tag
<mx:Style>
HSlider{
} .SliderHighlightTrackSkin{
} .SliderTrackSkin{
} .SliderThumbSkin{
}
</mx:Style>
Instead of doing it this way I want to define all the styles in a style sheet. I then want to define my slider in a .as file (not an mxml file) and apply the stylesheet to it. Something like the following is what I'm after
levelSlider= new VSlider()
levelSlider.minimum=0;
levelSlider.maximum=1;
levelSlider.value=1;
levelSlider.y=150
levelSlider.styleName="sliderStyle.css"
this.addChild(levelSlider)
This works:
<mx:Image styleName="image" source="done.png">
</mx:Image>
This doesn't:
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
[Code]...
I imported two projects in Flex Builder 3 (A and B). Those two projects A and B are in the same folder and in mxml file which is located in A/src I have
<mx:Style source="../../B/b/assets/b.css" />
this relative path is correct, but Flex Builder keeps showing message: "Problem finding external stylesheet: ../../B/b/assets/b.css"
What am I doing wrong? Btw, I am newbie in flex, so,
I am loading css file in Flex 3 AIR application. While reading the style name, I am lowercase version of it (i.e, .NewFontStyle is converted to .newfontstyle)how to get name as mentioned in css file.[code]by this iam getting all styleNames in lower case only.. i need to get the name as mentioned in css file.
View 1 Repliesshow all datatips for a single lineseries in a Flex 3 linechart. This chart will have multiple lines and the functionality we're looking for is when a user hovers over a line, show all datatips associated with just that series.
showAllDataTips will not work in this case as it will display all datatips on the chart.
I am trying to manipulate (move up and down, enable/disable and launch a form) child controls inside a panel control. However I am unable to get the id of the child control on which the click event occurs. To illustrate, I am trying to create similar functionality as is available. I am trying to create the up-down buttons that you see in the image at http:[url].......
View 2 RepliesWe have a flex application which compiles fine on windows box using mxmlc ant task but when we try to run the same build scripts on linux, it throws the 'Invalid Embed directive in stylesheet' error indicating it is not able to resolve the path to the image files.
Can someone pls. educate me on if there is a difference in the way the image files are looked up, in a CSS file, on windows vs linux.
Flex sdk version is 3.3. The same sdk is used on both windows and linux. Not sure if this has been fixed by any future 3.x sdks.
I have a flex application and have embedded a flash (SWF) file into it using <mx:SWFLoader>. There is an "Exit" button on the Flash file. I want to be able to handle the button click event on the flex application.
So when that button in the flash file is clicked, I want to perform an action in the parent flex application.