The main idea behind a bullet graph is to present a progress against  a goal. It allows the end-users to visualize data in a simple concise view and thus create an attractive bar chart. The new xamBulletGraph control is a Infragistics XAML control which provides the users with the opportunity to customize every visual element of the bullet graph as well as add a title and subtitle and in that way express their data in the most appropriate way for their needs.

 

 

 

Introduction

The XAML bullet graph is separated in three main areas: Title area, Reserved area and Graph area. Those areas help enriching the user experience by providing more detailed information about the data, which we are presenting.

The title area is the area in which you can display a title and a subtitle. This area is not set by default so you should define it explicitly. This area doesn’t overlap the scale. The text area for the title configures its width automatically according to the length of the title or the subtitle (whichever is longer). You can of course set the width specifically and style the titles using the titleStyle and subtitleStyle properties. In the documentation you can find a step-by-step information how to style the title and the subtitle.

The reserved area’s main purpose is to provide enough space for the numerous labels no matter of the orientation (horizontal or vertical).  This area spreads along the scale and automatically resizes when the orientation of the control is changed.  Actually when we say that this area should provide enough space for the numerous labels  it doesn’t mean that those labels should necessarily be position there. You can place the labels in the graph area if you like, but the spread and the location of the of the Reserved area itself – it remains where it is. This area is also important because its inner edge specifies the beginning of the graph area, and this edge serves as a a reference mark for the extent-related properties that position some visual elements.

The graph area contains the main body of the control with all of its visual elements like performance bar, target value, tick marks and ranges. This area begins from the edge of the control, if there is no title area or from the title area and ends at the edge of the control.

Configuration

As always you can find the xamBulletGraph in the toolbox under the “Infragistics 13.2 ” subcategory. Drag the control to the designer and you have the needed references added for you as well as the basic version of the control. The basic configuration consists of a scale from 0 to 100, if you want to customize it set a maximum and minimum value as well as a value and a target value. Adding comparative ranges to the graph reinforces the sense of comparing values until reaching any goal.

Image:

You can use gradients for the ranges’ brush to achieve a 3D effect.

To show more information about the separate ranges and what do they express you can use tooltips. The bullet graph actually supports tooltips for the performance bar, comparative marker and comparative ranges. Those tooltips can be configured individually and can be customized by manipulating their visibility, delay and value. The value can be a template, string or a UI element. In the documentation you can find how to set and change the tooltips of the different visual elements. For the purpose of the blog we created a tooltips for the ranges.

Combining the bullet graph with a grid is a handy way to express the data in an easy to understand and work with information. In the WPF samples at our page you can see the Grid integration sample which demonstrates how to use the the xamBulletGraph control in a grid. To create such interaction you should use unbound column for the xamBulletGraph.

Image:

Multiple target values

The bullet graph by its own supports only one performance bar and one comparative marker. If you want to have multiple target values or to create a progress bar you have to configure several bullet graph controls and position them one over the other. We make the labels and the ranges of the second graph transparent , but if you want your control to have tooltips you should define them on the upper-most bullet graph.

 

Conclusion

The bullet graph control is a handy widget when it comes to comparison of two values. With its numerous features it is easy to customize and  adapt to your personal needs. It can be used separately or you can combine it with a grid and thus create a stunning app providing the best possible  user experience.

 

Download the XAML Bullet Graph sample.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!