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: draggable tool-box button using the directional pop-up button

As promised at the previous post, here is how i used the PopUpButton that can position its pop up.
I have a “tool box” button that can be dragged around, but it is restrained to stick to the borders of the container.
Depending on which side this tool-box-button is residing i determine its pop up opening direction.

Inside the tool-box itself the”full screen”, “legend” and slider works and manipulate the chart.

(i really liked this restrained dragging).

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

Flex: popupbutton that opens in all directions

I find the PopUpButton to be a very useful component, and I think it is underrated. Thus it is rarely used by developers/designers.
A PopUpButton can open any UIComponent by a simple click of a button, it saves the developer the hassle of dealing with the PopUpManager and locating the pop-up at the exact point to match it opener.
Try it; it is really a great component.

What I lack in this PopUpButton is the ability to open the pop-up in all directions.
Actually it can open its pop-up only in one direction – downward.

Introducing my PopUpButtonPositioned!

I borrowed all the functionality, logic, events, styles, etc… from the original PopUpButton.
Deleted some stuff I didn’t need, added some new code to handle the positioning.
And most important – I have added a new property called popUpPosition.

Depending on the string given to popUpPosition (bottom,top,left,right) the pop-up will open at any direction!

It will also always stay in view, meaning that if in its opened position the pop-up could get out of view and be clipped it will open itself to the opposite side.

On the next post I will show what I used it for.

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