Using the LineChart component of Flex: How do I make the horizontal grid lines (background within the chart) dotted? With the mx:Stroke within the mx:horizontalStroke, I can only set properties like weight, color and alpha. I'd like to make the line dotted...
This is what I have now:
<mx:LineChart id="linechartDays" width="100%" height="100%" dataProvider="{dayData}" showDataTips="true">
<mx:backgroundElements>
<mx:GridLines horizontalChangeCount="1" direction="horizontal">
<mx:horizontalStroke>
<mx:Stroke weight="1" color="0xcccccc"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
</mx:LineChart>
use DottedLine.as class file for the following path http://www.warmforestflash.com/blog/2009/01/as3-dotted-line-class/
and use this function to main.mxml file
private function drawline(argStr:String):void
{
var s:Shape= new DottedLine(1.5,Chart.height,0xff0000,1,5,4);
uil=new UIComponent();
uil.addChild(s);
uil.height= Chart.height;
canChart.addDataChild(uil,argStr,null,null,null,argStr,50);
}
Related
As stated, I'm trying to obtain column headers consisting of an icon and wrappable text in a flex AdvancedDataGrid.
(EDIT: I forgot to mention an important part of the context: the columns are added dynamically, in actionscript. This apparently changes the behavior.)
I've tried using a custom mxml headerRenderer, like so:
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
height="100%"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
but for some reason, the text here is truncated instead of wrapped (it works outside of a renderer).
I've also tried creating a subclass of AdvancedDataGridHeaderRenderer and overriding createChildren to add the icon:
override protected function createChildren():void
{
var icon:Image = new Image();
icon.source = <image_url>;
icon.width = 16;
icon.height = 16;
addChild(icon);
super.createChildren();
}
but then, the icon and the text get superimposed.
I'm out of ideas on this. Anyone else?
It worked for me when I removed the height="100%" attribute from mx:Text in your headerRenderer.
UPDATE: it only works like this when I manually stretch the AdvancedDataGrid component. I'll look into how to make it work unconditionally.
When the height of the Text component was set to 100%, it was constrained to its parent HBox's height. Therefore when a word was wrapped and moved to the next line, it wasn't visible because the height of the Text component didn't allow for it to be visible.
If you remove this constraint, Text component's height will be determined dynamically based on its contents, as will headerRenderer's. Also add minHeight to your Text so that it is visible when it's loaded.
Here's the code (I also removed scrollbars because they were showing during resize):
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
minHeight="20"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
In case anyone is interested in how to do this with dynamically created columns, a combination of Hunternif's code for the renderer and some added code on column creation worked for me:
The columns need to have fixed widths and need to be invalidated to inform the AdvancedDataGrid that it needs to rerender:
var cols:Array = [];
for each (...) {
var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
...
// Fix the width of created columns
column.width = 150;
cols.push(column);
}
grid.columns = cols;
// Invalidate columns so that sizes are recalculated
grid.mx_internal::columnsInvalid = true;
// Take changes into account
grid.validateNow();
I am using a DividedBox in Flex which contains only a datagrid at first. When I click on an Item on the Datagrid, a second element with a width of 0% (Spark Group) is added to the divided box to display an image.
The thing is, when the second element is added to the DividedBox, the image is partially displayed outside the DividedBox, and I don't want to have this behavior.
Here is the interesting code :
<mx:DividedBox direction="horizontal" id="divider" borderColor="red" borderStyle="solid" borderVisible="true" right="10" left="10" top="10" bottom="10">
<s:Group width="100%" height="100%">
<!--datagrid-->
</s:Group>
</mx:DividedBox>
And here is the piece of code that adds the second child of the dividedBox (simplified code) :
private var _pdf_preview:Group = new Group();
[Bindable]
[Embed(source="assets/image/llama.jpg")]
private var imgClass:Class;
protected function itemOnClickHandler(event:MouseEvent):void
{
_pdf_preview = new Group();
var img:Image = new Image();
img.source = imgClass;
_pdf_preview.addElement(img);
_pdf_preview.percentWidth = 0;
divider.addElement(_pdf_preview);
}
And here is a screen of the problem (Btw, don't notice my skills on Gimp :) ). As a new user I can't bind images to my post : screen showing my problem the red border show the limits of the dividedBox
Thank you.
I hope there are not too much fault, english is not my native language. Sorry for any english mistakes.
PS : I couldn't add the "DividedBox" tags because it was not existing before, and I'm a "new user" so I can't create new tags.
You can use the clipContent property to cut off the image at the edge of the DividedBox:
<mx:DividedBox clipContent="true" />
When using Spark containers, clipAndEnableScrolling is the property you need to achieve the same goal.
I would also like to note that you usually don't require to dynamically add components through ActionScript. You can use 'states' instead. For example:
<s:states>
<s:State name="normal" />
<s:State name="image" />
</s:states>
<mx:DividedBox clipContent="true">
<s:DataGrid />
<s:Image includeIn="image" />
</mx:DividedBox>
Now all you need to do to show the Image, is set the currentState to image.
there a better way as this example
to create round corners for dynamic (addChild or addElement) created Images?
ok, here is a custom class http://santobay.blogspot.com/2010/04/rounded-corner-image-in-flex.html . save this code as com/RoundedImage.as , create new mxml file with this code
<mx:Application name="Image_mask_test"
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="com.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:HBox id="hbox" width="100%">
<custom:RoundedImage source="images/test.jpg" width="250" height="250" cornerRadius="15"/>
</mx:HBox></mx:Application>
and compile. For create images dynamic use this code:
<fx:Script>
<![CDATA[
import com.RoundedImage;
public function createImage():void {
var newImage:RoundedImage = new RoundedImage();
newImage.source = "images/test.jpg";
newImage.cornerRadius = 20;
hbox.addChild(newImage);
}
]]>
</fx:Script>
No, you must use a mask, if you add it dynamically.
However, you could add a 'frame' on top of the image, if the background is solid, you can use this trick.
Please find the below code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var testAC:Array = [
{date:"without", close:50},
{date:"with", close:45}
];
]]>
</mx:Script>
<mx:ColumnChart id="myChart" dataProvider="{testAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:CategoryAxis categoryField="close"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries dataProvider="{testAC}" xField="date" yField="close"/>
<mx:LineSeries dataProvider="{testAC}" xField="date" yField="close"/>
</mx:series>
</mx:ColumnChart>
</mx:Application>
This code is drawing a colum chart with two columns and drawing a line across the top of both columns. I have two requirements :
the line need to be dashed
as of now the line starts from top right corner of the first column to the same corner of the second column. How can i shift the line to the left, so that it starts from center of first column to center of second column.
Regards, PK
You can draw a line between two values on your Cartesian Chart with
<mx:Script><![CDATA[
private function connectTwoPoints(
month1:String, value1:Number,
month2:String, value2:Number):void
{
// Draw Line
canvas.clear();
canvas.lineStyle(4,
0xCCCCCC,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
}
]]></mx:Script>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
</mx:annotationElements>
The line that you draw will be an "Annotation Element" using the "Cartesian Data Canvas". Annotation Elements are drawn in the foreground. Perfect Example:
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_13.html
For many of my charts with complex skinning I've been using Axiis. It's very Degrafa-like and would allow you to take a degrafa stroke and put it wherever you'd like on your 'dataCanvas'.
Here's an example that is pretty straight fwd:
http://axiis.org/examples/HClusterStackExample.html
'Tisn't the best answer in the land, but using axiis is so simple, and yet it allows for complex fills and strokes that aren't allowed via mxml with plain-ol' flex charting.
Best of luck,
Jeremy
after a long research i finally completed drawing dashed line chart. I used DashedGraphicUtilities provided by Adobe itself to draw the dashed line. I extender the LineSeries and used this DashedGraphicUtilities to draw the dashed line. That solved my first and mail problem. I will update this whenever i get the solution for the second.
And i got the solution for second problem also. The line chart was displaying perfectly as i needed, when i changed the graph type from ColumnChart to CartesianChart. I used column series and line series inside that and the line and columns were coming perfectly.
Regards,
Anoop
I have a linechart and dots showing the places where a datatip pops up. I can change the line to any color I want and I can set the inside color of the dot. But the border color still stays orange (from the default color). Someone knows how I can set this property easy?
this is the code:
<mx:LineSeries id="dayEnergieLineSeries"
yField="number"
showDataEffect="{slideIn}" hideDataEffect="{slideOut}">
<mx:lineStroke>
<mx:Stroke color="#d3ce01" />
</mx:lineStroke>
<mx:itemRenderer>
<mx:Component>
<mx:CircleItemRenderer />
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
From the docs:
It renders its area on screen using the fill and stroke styles of its associated series.
So you'll have to assign a stroke to the dayEnergieLineSeries series.
[Bindable] private var _stroke:Stroke = new Stroke(...);
<mx:LineSeries id="dayEnergieLineSeries" stroke="{_stroke}"/>
or if you don't need the data binding, just set it as a style.
PS: There is a good chart explorer available here: http://demo.quietlyscheming.com/ChartSampler/app.html