Ya…you heard me. Flipping Flex Chart Axis! And I mean it too. 
Wouldn’t it be nice if you could easily swap x and y axis? And change the “corner” where the origin is. This functionality isn’t built in to the charts. You can change the side (left or right) where the y-axis is and the position of the x-axis (top or bottom), but that doesn’t change where the origin is. It merely changes where the axis labels appear. Well, this sample shows that through the combination of sorting, dataFunctions and labelFunctions, you can flip the chart axis and change where the origin appears in your chart.
This movie requires Flash Player 9
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Read the rest of this post»
No Comments »
This sample basically builds upon another sample I posted a while back.
It is pretty self explanatory - if you have multiple series in a chart, you may not want the clutter of viewing all the series, so this app demonstrates how you can extend the legend to toggle series on/off.
If you turn off all series in the app below (with the button at the bottom of the app), you can then toggle on/off the (multiple) series you desire to view by clicking on the legend item for the series you are interested in.
This movie requires Flash Player 9
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Read the rest of this post»
4 Comments »
What should the LineChart do in this situation?
How can you draw a line with only 1 data point much less extrapolate the data??
Turns out that the Flex chart does not handle that very well. The solution?? Write your own lineSegmentRenderer.
Here is an example of a lineSegementRenderer that will just draw a circle for this case.
MyLineRenderer.as:
package
{
import mx.
charts.
renderers.
LineRenderer;
import mx.
charts.
series.
items.
LineSeriesItem;
import mx.
charts.
series.
renderData.
LineSeriesRenderData;
import mx.
charts.
series.
items.
LineSeriesSegment;
import mx.
charts.
renderers.
CircleItemRenderer;
import flash.
display.
Graphics;
import flash.
geom.
Rectangle;
import mx.
charts.
ChartItem;
import mx.
charts.
chartClasses.
GraphicsUtilities;
import mx.
core.
IDataRenderer;
import mx.
graphics.
IFill;
import mx.
graphics.
IStroke;
public class MyLineRenderer extends LineRenderer
{
private static var rcFill:Rectangle = new Rectangle();
public function MyLineRenderer()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
var l:int=(data as LineSeriesSegment).items.length;
if(l==1){
var item:LineSeriesItem=((data as LineSeriesSegment).items[0] as LineSeriesItem)
var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("fill"));
var stroke:IStroke = getStyle("stroke");
var w:Number = stroke ? stroke.weight / 2 : 0;
rcFill.right = 2;
rcFill.bottom = 2;
var g:Graphics = graphics;
g.clear();
if (stroke)
stroke.apply(g);
if (fill)
fill.begin(g, rcFill);
g.drawCircle(item.x, item.y, 3);
if (fill)
fill.end(g);
}
else{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
}
}
Read the rest of this post»
3 Comments »
I worked on this sample with a customer to help debug some issues. I must confess, I don’t remember what I did and haven’t review the code to recall how this works, but it is a nice little sample. When you mouse over an item in the legend, the series in the chart glows and vice versa, when you mouse over an item in the chart, the corresponding item in the legend glows. Neato!
Here is the extension to the Legend class.
package
{
import mx.
charts.
LegendItem;
import flash.
events.
MouseEvent;
import mx.
containers.
Canvas;
import flash.
geom.
Rectangle;
import flash.
display.
DisplayObject;
import flash.
display.
Sprite;
public class myLegendItem extends LegendItem
{
private var bgElement:Canvas;
private var _highlight:Boolean;
public function myLegendItem()
{
super();
addEventListener(MouseEvent.MOUSE_OVER, handleEvent);
addEventListener(MouseEvent.MOUSE_OUT, handleEvent);
}
override protected function createChildren():void {
super.createChildren();
bgElement = new Canvas();
bgElement.setStyle("backgroundColor", 0×00ff00);
addChildAt(bgElement,0);
}
private function handleEvent(event:MouseEvent):void{
if(event.type == MouseEvent.MOUSE_OVER)
highlight = true;
else if(event.type == MouseEvent.MOUSE_OUT)
highlight = false;
}
public function set highlight(value:Boolean):void{
_highlight = value;
invalidateDisplayList()
}
protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
graphics.beginFill(0,0);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
graphics.endFill();
name = label;
bgElement.setActualSize(unscaledWidth, unscaledHeight);
if(_highlight)
bgElement.visible = true;
else
bgElement.visible = false;
}
}
}
Read the rest of this post»
1 Comment »
I had a customer asking how he could make the lines in a LineSeries have a sensitivity to mouse proximity similar to the datapoints.
Here is what I came up with:
The essence of the solution was to extend the LineRenderer and draw an additional line with alpha=0, but of specified width, to the graphics object that the visible line is drawn on. That way mouse events will be dispatched by this line.
I figured the most logical place to specify the lineSensitivity attribute would be on the “Stroke” object, so I added that property to an extension of the Stroke class that I then access in my custom LineRenderer.
Here is the Stroke extension:
package
{
import mx.
graphics.
Stroke;
public class MyStroke extends Stroke
{
public function MyStroke(color:uint=0.0, weight:Number=0.0, alpha:Number=1.0, pixelHinting:Boolean=false, scaleMode:String="normal", caps:String=null, joints:String=null, miterLimit:Number=0.0)
{
super(color, weight, alpha, pixelHinting, scaleMode, caps, joints, miterLimit);
}
private var _lineSensitivity:Number=50;
[Inspectable(category="General")]
public function get lineSensitivity():Number
{
return _lineSensitivity;
}
/**
* @private
*/
public function set lineSensitivity(value:Number):void
{
_lineSensitivity = value;
}
}
}
Read the rest of this post»
No Comments »
I wrote a small sample for a customer to demonstrate how to write a Charting Datatip Renderer and Axis Label Renderer that displayed HTML links that when clicked on open up other web pages.
I based my renderers on the TextArea component, since that component has a link event that gets fired off if the TextArea htmlText contains an anchor tag that has an href that contains “event:”.
Here is the DataTip Renderer, MyDataTipRenderer.mxml:
<?
xml version=
"1.0" encoding=
"utf-8"?>
<mx:TextArea xmlns:mx=
"http://www.adobe.com/2006/mxml" borderStyle=
"outset"
editable=
"false" selectable=
"true" link=
"linkHandler(event)" fontSize=
"16" >
<mx:Script>
<!
[CDATA
[
import flash.
events.
TextEvent;
public function linkHandler(event:TextEvent):void {
// Open the link in a new window.
navigateToURL(new URLRequest(event.text), ‘_blank’)
}
override public function set data(value:Object):void
{
super.data=value;
htmlText="<a href=’event:http://www.google.com/search?hl=en&q=" + data.chartItem.yValue + "+" + data.chartItem.xValue + "&btnG=Google+Search’>" + data.chartItem.yValue + ":" + data.chartItem.xValue + "</a>";
}
]]>
</mx:Script>
</mx:TextArea>
Read the rest of this post»
No Comments »
Recent Comments