The XAML cross-platform data chart component has been known for its heavy-lifting features – strong performance, modular design and nearly 40 series types and almost as much Financial  indicators (value overlays). It also sports a plethora of useful interactions and development knobs to tweak and still more is being added - the Silverlight/WPF version of the control, among other things, recently received a very interesting addition. Those that have worked with other controls from those packages such as the Org Chart, the Network Node or the Geographic Map may have worked with it before – it’s the Overview + Details Pane.

Behind such a long name hides one very useful control that adds an invaluable addition to the navigation of the components. As it is obvious the pane holds a thumbnail version of the charts data series in order to help you visualize which part exactly are you seeing. Also while not used, the pane itself shrinks to a much smaller rectangle that is nearly transparent (note – when expanded it is also somewhat transparent so series behind are still visible). And besides being very helpful it aids in the overall looks too, as you (will) surely see.

Enabling the pane

To enable/disable the pane the chart now has a few properties – that in essence means you can grab an existing application with the XamDataChart and just enable this without extra hassle:

Aside from the default visible/collapsed enumeration you also get to control the vertical and horizontal position – you can pick a corner that is most appropriate (sometimes based on data) to obstruct the user’s vision as less as possible. Then again you can add a few lines of code to let the user pick one for himself and yes – you can put it in the middle of the chart but if honestly have no idea why would you do that, guessing it’s just a default member of the position enum :)

Anatomy of the ODP

As you may have noticed this control have it all in the numbers – quite a few words in the name and quite a few functions in a small window. Most of the latter are easily perceived because they have clear icons, still I will point out each and what it does:

Of course, as a navigation tool you get zoom controls – two buttons to incrementally decrease and increase the level and a slider you can drag for fast changes.

The main star (well at least it takes the main space) of the Pane is the thumbnail representation of the chart. If you ever needed help imagining how it operates – that is it. You get the series and you get the window rectangle ( the one that shows what is actually the visible are and where is it). And you can use both to navigate! Clicking the mini-chart will move the center of the rectangle to that spot or you can just click and drag the rectangle yourself.

You also get a zoom-reset button (or as I call it zoom to fit) to quickly scale the chart series back to their original size and into view.

And the you have my personal favorite – a button for the chart’s default mouse interaction. Some may know – the chart mouse interaction is a property that has two options – either drag selection that the chart will use to zoom to (think of it as a crop style zoom, without the actual crop). The other function (that is very useful on touch devices) is Pan -  very familiar for most users as you just drag the whole chart surface with the mouse:

You get that out-of-the-box with the Overview and details Pane, which saves some effort to provide the functionality and also keeps it neatly tucked along with other controls.

Style

It would be foolish to say looks don’t matter ( well, sometimes the usability side prevails, but with this chart control that’s already in check) -  it can turn using the application into an experience on it’s own scale. Now the NetAdvantage XAML products come with plenty of style – what you saw so far was the default theme the controls have. Then you have our very own IG Theme:

And as always, if things are about to get touchy (read: using the chart on a touch device) or it just fits your preference, you might want to consider the awesome Metro styled theme. It is designed for touch and offers larger targets to put your fingers on and clean design:

Summary

The ODP or Overview plus Details Pane offers somewhat more that the name gives out – yes it provides a thumbnail version of your data series and will help you easily tell which part is displayed with now. But it will also be a reliable navigation tool with plenty of buttons to control the zoom level, wonderful mouse interaction to see just that part you want and the bonus functionality to swap between mouse selection-zoom and pan tools on the fly. And without denying it can also attract some attention with its good looks, we hope you don’t mind that!

You can find demo projects for both Silverlight and WPF (keep in mind at least a Trial version is required to build the projects, so get your Free Trail for Silverlight of WPF ). As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!