Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

Smarter Data Labels with Dundas Chart SmartLabels

25 May 20045 min read 71.9K   10   2
Creating SmartLabel Charts Dundas Chart for .NET Enterprise Edition

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

Image 1

View all Dundas articles

Introduction

We love programming and we love cool features that make you go 'oooh!'. One extremely powerful, and extremely cool feature we've built into Dundas Chart for .NET is SmartLabels. These allow for less cluttered displays of data points to provide the chart the look you need.

What can SmartLabels Technology do for me?

SmartLabels uses a rule-based technology to get collision free data point labels.  Label collisions can occur when there are many points on a chart or when there are points of similar values.  How to handle this is one of the most difficult tasks that any chart can face and it usually fails to meet the human expectation of the chart appearance.  In the end, most chart developers will position the labels manually which may reduce the collisions but will fail in unknown data conditions.  This where Dundas Chart for .NET excels. 

Dundas Chart for .NET SmartLabels is able to prevent data point label collisions for most chart types and combinations of chart types.  Figure 1 shows a simple Line-Column chart where each data point displays a value label.  This case shows a very simple case and is not uncommon to everyday charting.   There are not a large number of points, however, they are similar in value.  Notice that there are several point labels overlapping and two extending outside of the charting area.  The trend is obvious to the eye and the Y axis labels help understand the data but the overlapping makes the chart very difficult to read.


Image 2
Figure 1: Chart without SmartLabels

By enabling each series with SmartLabels technology,  a messy, unreadable chart can quickly become a one that allows you to visualize your data. 

C#
// Enable SmartLabels for each series
foreach(Series series in Chart1.Series)
    series.SmartLabels.Enabled = true;

Image 3
Figure 2: Chart with SmartLabels
 

With SmartLabels there is no complex algorithm for you to write and you don't need to know anything about the data ranges beforehand. SmartLabels just works with little a very limited time investment to produce clean and readable charts. 

How to use SmartLabels

When using SmartLabels you have control over the appearance styling.  There are also two categories of SmartLabels rules: label movement rules and positioning rules.  Let's take a closer look are the properties each category provides.

Appearance Styles

When a data point label is moved away far enough away from a data point a Callout Line may be shown to the point.  The property, LabelCalloutStyle, determines how a Callout Line is terminated at the label end of the line.  The possible styles for termination end are a Box, an Underline or None (no added styles).  Setting the style is simply one line of code.

Image 4
Figure 3: Available Callout Styles

C#
// set the callout style to show a box
Chart1.Series["Series1"].SmartLabels.CalloutStyle = LabelCalloutStyle.Box;
There are other style properties that provide control to the appearance of the Callout Line as well as the inside color of the box (when the LabelCalloutStyle is of a Box type). 
C#
// set the callout box back color
Chart1.Series["Series1"].SmartLabels.SmartLabelEndCap = LabelEndCap.Arrow;

// set the callout box back color
Chart1.Series["Series1"].SmartLabels.CalloutBackColor = Color.Khaki;

// set the callout line color
Chart1.Series["Series1"].SmartLabels.CalloutLineColor = Color.Black;

// set the callout to be a solid line
Chart1.Series["Series1"].SmartLabels.CalloutLineStyle = ChartDashStyle.Solid;

// set the callout line width of 1 pixel
Chart1.Series["Series1"].SmartLabels.CalloutLineWidth = 1;

Movement Rules

The Movement rules are the real guts of Dundas Chart for .NET SmartLabels.  They are simple to understand and set the stage for the readable charts.  For example, if a label has been determined that it must be moved, the SmartLabel movement rules permit you to specify the moving distances, the allowable moving directions and if the label is able to exist outside of the plotting area.  These are controlled through the use of several moving related properties. The default movement rules will normally resolve most issues, however, as usual, Dundas Chart for .NET provides developers significant customization tools and SmartLabels are not an exception.

The allowable data point label movement direction is set using the MovingDirections property. This property can be set to a single direction or as a bitwise OR combination to give you complete control of the movement direction.  The distance of movement can also be controlled using the MinMovingDistance or MaxMovingDistance properties.  These are pixel properties that define a value that specifies the minimum or maximum distance from the data point that data point labels are allowed to be moved. When a data point label needs to be repositioned, the label will be moved by the range of pixels specified. 

Image 5
Figure 4: Moving Distance and Direction Behavior

C#
// set the minimum moving distance
Chart1.Series["Series1"].SmartLabels.MinMovingDistance = 20;

// set the maximum moving distance
Chart1.Series["Series1"].SmartLabels.MaxMovingDistance = 30;

// set the allowable label moving directions
Chart1.Series["Series1"].SmartLabels.MovingDirection = LabelAlignment.Bottom |
                                                   LabelAlignment.BottomRight;

An additional property, the AllowOutsidePlotArea property, sets a value that specifies the extent of how far outside of the plotting area the labels may go. The default value allows labels to extend partially outside (up to 50%) but can also be set to allow full label drawing outside or not at all. When applying SmartLabels, the drawing outside of labels is only used to provide an additional option to the chart; the chart will only draw outside if the labels cannot be drawn elsewhere without overlapping.

Image 6
Figure 5: AllowOutdsidePlotArea Behavior

C#
// set the rule for labeling outside the plot area (Yes, No or Partial)
Chart1.Series["Series1"].SmartLabels.AllowOutsidePlotArea 
                                          = LabelOutsidePlotAreaStyle.Partial;

Positioning Rules

Overlapping labels is an obvious condition for when to reposition a label but there are other conditions, such as labels overlapping markers and a rule to hide labels that cannot be repositioned without overlapping elsewhere (without violating the user-defined rules).  In the first frame of Figure 6, the markers are permitted to overlap the data point marker.  In the second frame, they are not allowed to overlap and based on the movement rules that were defined for this example, the point label could be placed anywhere else.  The result was that the data point label was not drawn at all. 

Image 7
Figure 6: MarkersOverlapping Behavior

C#
// Allow data point labels to overlap data point markers
Chart1.Series["Series1"].SmartLabels.MarkersOverlapping = true;

// Hide all labels that cannot be repositioned without overlapping
Chart1.Series["Series1"].SmartLabels.HideOverlapped = true;

With the API provided and the flexibility of the Dundas Chart for .NET rule-based labeling, unreadable charts need never be shown again! 

For an interactive demonstration of Dundas Chart for .NET SmartLabels, download a full evaluation copy of Dundas Chart for .NET Enterprise Edition and experiment with our extensive sample set or visit the Dundas Chart Gallery on our website.

Image 8

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
Since 1992 Dundas Data Visualization has been helping companies all over the world visualize their data. Dundas products have a global reputation of being the highest quality, and are all designed, built and tested to meet the strictest requirements that developers and business managers demand.

Our showcase product is Dundas Dashboard, an easy-to-integrate digital dashboard software solution. Dundas Dashboard allows for the rapid and collaborative development of performance dashboards, helping companies leverage their business intelligence (BI) solutions.

Our web-based dashboard software comes with wizard interfaces, and a unique Dundas DashFlowTM process, allowing for the simultaneous development of an executive dashboard by business analysts, IT staff and database administrators. It also uses premier charts, maps, gauges and graph controls, letting end-users visualize their data as required.

Dundas also offers superb, world class consulting services for those companies that do not have the in-house expertise to implement their data visualization projects.

The quality of our products in conjunction with our unmatched technical support, numerous awards and years of experience reflect Dundas Data Visualization's commitment to being the best!
This is a Organisation

3 members

Comments and Discussions

 
Questionwhy we need interface ? Pin
Member 997789615-Dec-13 2:40
Member 997789615-Dec-13 2:40 
QuestionDundas Charts Pin
bony9093-Sep-10 3:50
bony9093-Sep-10 3:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.