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

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

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

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

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

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