data tip grouping

I had a case where the chart was full loaded of data and its real-estate on the screen was pretty small, when data tips were seen they were actually obscuring important parts of the chart - making it un-friendly to the user.

I needed to find a solution to show the data without disturbing the chart’s visual too much.

Of course I could take the dataTips info out of the chart and display it as simple text, say in the title of the panel. But I didn’t like this solution because when the user hovers something with the mouse her eyes are on the mouse pointer! She could easily miss the information she was looking for.

So I came up with the data tip grouping.
At all times only one box of data tip will be seen, even when hovering a point where we have more then one data point under the mouse. In that case the data is grouped.

In the sample hover over “Feb” and “Apr” where all the points meet.

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

p.s. : if someone have a better solution i would like to see it.

interactive legend – highlight series

Some while ago Kyle posted on his blog an article about interactive legend.

As this was a requirement for an application I was developing I will tell you what I’ve done. And thanks to Kyle for the help.

I wanted that upon mouse over a legend item the corresponding series in the chart will be marked in some way.
Everything is loosely coupled and I could have more then one chart (but only one legend).
I also wanted it to go the other way: on mouse over a series in the chart its corresponding legend item should be marked.
Because of a lack in space the legend item text should be truncated with a tooltip, this is not the default behavior of a legend - if the text has not enough space the label is cut.

generic checkbox header renderer

This post utilizes the checkbox item renderer from the previous post.
Here I have applied the same generic checkbox renderer approach to use as a headerRenderer on every DataGridColumn.

Again - as in the previous post, you do not have to change anything.
Just drop the CheckBoxHeaderRenderer class into your headerRenderer property of any data grid column - it will take of itself!

Marking the check box in the header will set all the corresponding data provider values to be true - thus marking all checkboxes in the item renderer.
Unmarking it will do the opposite.

It works in both ways!
If all the checkboxes in all the item renderer (on this column only) are marked - the checkbox at the header will be marked too.
In the other case - not all the checkboxes are marked - the header checkbox will update itself to be not marked.

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

generic checkbox item renderer

This is a VERY generic CheckBox item renderer to use in a DataGrid.
All you have to do is drop it in your DataGridColumn and it will take care of himself.
Only thing you need to make sure is the data it receives to be a Boolean.

You do not have to give it any data specific values (e.g. name of the dataField…).

Notice (#1) the implementation of IDropInListItemRenderer.
Notice (#2) the forced dispatching of a CollectionEvent.COLLECTION_CHANGE event, this is done to notify the data provider change.

p.s. This is part of another post I’ll post later about check boxes in data grid.

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

multi stepper / time stepper

This one was started from the need of a Time Stepper.
You know… that thing which you set your computer’s clock with. It consists of input fields for hours/minutes/seconds, up and down buttons and some functionality.

So I have made one.
But then I thought why not making it even more generic?!
So I have made one…

scroll without scrollbars

This is just a simple trick.
I had this breadcrumbs component made of a ‘LinkBar’, sometimes it gotten so long that a horizontal scrollbar was needed.
But when this horizontal scroll bar appeared he obscured the links (crumbs) underneath it.

So here comes the “scroll without scrollbars”.

Add some items so a scrollbar is needed, you’ll see the scroll buttons appear.
Click them to scroll. The mouse wheel also scrolls.
Remove items to see when the scroll buttons no longer needed.

It is very simple.
(of course a more ‘sophisticated’ solution can be done).

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