UltraDataChart Data Annotations

What are Data Annotations for the UltraDataChart?

With the release of Infragistics 2015.2 Windows Forms controls, data annotation layers were added to the UltraDataChart. But what exactly are they? Data annotations are essentially just series layers, similar to ColumnSeries, AreaSeries, etc, but instead they add mouse over UI interactions to the UltraDataChart.

There are a variety of types of annotation layers. You can use any combination of them for a more visually informative presentation. You can also select a specific target either series or axis for them, via the TargetSeries and TargetAxis properties respectively, or leave the respective fields empty and it will apply to all applicable series.

 

Tooltips

Most people by now are familiar with the concept of tooltips, even if they may not know the term. Essentially what tooltips do is when you mouse over something them enabled on it, it will display a descriptive bubble of information about its target.

Without even adding a new layer to the WinDataChart, you can add tooltips by two methods.

First you can just set the ShowDefaultTooltip to true, which is false by default, and it will build a simple tool tip for the series. It will have an icon of the color(s) of the series itself, in the shape representative of the type of series, the series title, and show its respective value(s).

Second you can instead create your own custom tool tip, by hooking up the TooltipContentUpdating event on the Series. This event will give you the DataContext of series that it is expecting for the tool tip, and allows you to return a control that it will display for the tooltip.

There are two scenarios I would avoid using just either of these methods by themselves. First is, when dealing with multiple series, because internally they are unaware of each other, you can potentially have one tooltip overwrite another. The second, for line series or scatter style series, because you have to mouse over the points drawn part of the chart to have it register, they work better with column and area based charts. For both of these scenarios I would recommend a specific tooltip layer.

Tooltip Layers

For each of the below tooltip layers, they use the series tooltip's as defined like described above, via either the default if ShowDefaultTooltip is set to true, or the custom tooltip, via the TooltipContentUpdating event. With the tooltip layers enabled, as they are aware of all the series, they display for the closest datapoint(s) with a tooltip. 

ItemTooltipLayer

Displays an individual tool tip for each series it applies to, layered so they won't conflict and with an arrow like adornment that points to their respective points. The ItemTooltipLayer targets the series

CategoryToolTipLayer

Displays a merged tooltip for all category values in each series that it applies to.

 

Markers and Highlights

Markers are small images used to designate the data points. You can either have them on all the time, or only when you mouse over them. Highlights will do just that either highlight the marker, or a column band around the area of the data point. Like tooltips for most series, you can turn the markers on the individual series, via the MarkerType property, although for all but the point based Marker series they are turned off by default. 

You can of course mix and match multiple annotation types. Below is a the CategoryItemHighlightLayer, which are the moving markers for all three charts, and the markers turned on for all the items of the Green chart.

CategoryItemHighlightLayer

The CategoryItemHighlightLayer, shown both above and below, has a property called HighlightType. HighlightType defaults to Auto, which it will pick the most appropriate HighlightType for the chart displayed, but you can also force it to one of the two options, Marker shown above and Shape shown below.

CategoryHighlightLayer

While the CategoryItemHighlightLayer is good for highlighting the individual item values for each chart, the CategoryHighlightLayer is better for when you want to show highlight all of the items in a category together.

CrosshairLayer

The CrosshairLayer by default renders as intersecting lines, for each axis value for each series the layer is rendering for, relative to the mouse cursor. Shown below you can see the two horizontal lines for equating to each series Y value, and as the categories align you see one vertical line for designating that. You can of course turn off either of the lines, and show just horizontal or just vertical as well.

I've only scratched the surface with what you can do with the annotation layers. Each of the layers is highly customizable, be it targeted for individual series, changing the brush colors, thickness, outline, etc. As well as the TransitionDuration, which for most is by default set to 0, which snaps from DataPoint to DataPoint, but in the above I set it to between 250ms-500ms so that you can see a smooth animation between data points. Another possible useful property for more fluid charts, might be UseInterpolation, which instead of snapping from data point to data point, it will allow you to stop data point values. 

Want to explore them further try?

Documentation:

     http://help.infragistics.com/doc/WinForms/2015.2/CLR4.0/?page=DataChart_ChartAnnotationLayers.html 

Trial Version:

     https://es.infragistics.com/products/ultimate/download