Flex: Charts zoom / range selector (version 2)

this is the second chart range selector.
some of the code here is also borrowed from somewhere (sorry for not remembering who from).

Demo is here
Source is here


Flex: Charts zoom / range selector (version 1)

(long time… working now with Silverlight, I thought to jump back to the fun stuff)

This is a simple range selector on a chart, to be used for zooming in my case.
It is very simple and some of the code is borrowed (I can’t remember where from), nothing fancy here but I wanted to publish it for all to see.

As the title implicit I have another, different, range selector… will publish soon.

Demo is here (right click for source)
Source is here

Flex: dragging the chart’s data points and the whole series

suppose you have a chart with a line series that represents some data and thresholds OK/Warning.
now what if the whole data in the chart is to be changed by the user.
of course you can supply her with some DataGrid to reflect the data and make the cells editable, then reflect the edited data back to the chart.

but we are talking Flex here.
wouldn’t it be so much cooler and usable if she can just drag the data around on the chart?!

this was pretty easy to achieve.

the whole line series (black) can be dragged up/down along the Y axis.
each data point on both area series (OK/Warning thresholds) can be dragged.
on the DataGrid you can see the data reflected from the chart in real-time.

Demo is here (right click for source)
Source is here

Flex: programmatically showing data tips on a chart – the easy way

looks like i have taken the scenic road.

a while ago i have posted about how to “programmatically showing data tips on a chart“.

there is an easier way, well… it’s much-much easier.

dataTipItems is a property for Series. it is an array on non-interactive data tips.
populate it with chart items, then set the chart’s showAllDataTips to true.
that easy.

(i enjoy riding the scenic road)

Demo is here (right click for source)
Source is here

Flex: programmatically showing data tips on a chart

I have seen this question asked many times (Adobe guys noticed it too, but nothing was done yet): how do I programmatically show a specific DataTip ?

I haven’t seen any decent way to do this.
First I tried doing this the easy way – dispatching a mouse move event on the chart at a specific X/Y, like so:
First you need to find your item:
var item:LineSeriesItem = someSeries.items[2];
Then calculate its actual X/Y on the chart:
var x:Number = item.x + chart.computedGutters.left + chart.getStyle("paddingLeft");
var y:Number = item.y + chart.computedGutters.top + chart.getStyle("paddingTop");

make a new mouse event:
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_MOVE, true, false, x, y);
and force the chart dispatching it:

Although this might be enough for some people – I didn’t like it!!
First and most important – the data tip is not staying in view but disappear once you move your mouse over the chart. It is not persistent.
So… this is actually not being our intention.
And secondly – it seems to me as an ‘ugly’ way.

Out goes my spade and the digging began…

(For those who haven’t noticed this so far – the charts code is not friendly at all: poor documentation, too many private methods, too many mx_internals, etc…)

It was not a very pleasing digging but I finally done it !!

My solution involves a custom chart that extends the LineChart and (too many) copy&paste of private methods.
But very small changes where needed to the original methods.

Me happy !!

Demo is here (right click for source)
Source is here

Flex: 3D column chart made easy

Yes, I know, this is not a “real” 3D.
Although it has no engine it does have the 3D look.
And… it is so very easy and took me almost no time to make.
This is my (fake) 3D column chart.

Demo is here (right click for source)
Source is here

Flex: interactive legend – explode piechart wedge

Continuing the “interactive legend” post.
Here I use the same interactive-legend but this time I use it for emphasizing the corresponding PieChart wedge by exploding it and dimming all the other wedges.

Demo is here (right click for source)
Source is here