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»
No 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»
No Comments »
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 »
I just published two Tech note articles for Flex regarding changes to Daylight Savings time in effect for 2007 and Sun’s JVM changes regarding this:
“How to upgrade the JVM shipped with Flex”
and
“Flex and Sun’s JVM: U.S. Daylight Saving Time changes in 2007″
No Comments »
Recent Comments