In my previous blogs I’ve already mentioned that Infragistics’ Ignite UI package contains a lot of controls for Data Visualization. The one we are going to talk about in this blog is the bullet graph. This control is similar to the Linear Gauge but apart from the current value it also shows a target value which can serve as a point to reach or a measurement . It is usually used to compare two values one represented by a horizontal bar and another represented by a vertical line. You can display the chart separately or you can insert it in a Grid and thus create a graphical table for even better UX.

 

Features and Usage

The configuration of the bullet graph is easy. After adding the required Infragistics’ references as well as JavaScript and CSS files you have to create a HTML div tag to host your graph. The basic configuration of the igBulletGraph requires proving a width and a height values. If you haven’t added additional options to the configuration the control will display a scale ranging from 0 to 100 with major ticks and labels positioned  at an interval of 10. The bullet graph supports a lot of features which can help you customize it according to your needs. You can find a detailed information about the control and its features and how to configure its separate parts in the API documentation as we as the online help documentation.

To configure a custom scale you should set the minimumValue and maximumValue properties. Then you can add the performance bar which visualize the primary measure of the igBulletGraph. In order to do so set the value property. The comparative marker corresponds to the targetValue property. Those  are the four values that you should configure to have a fully functional bullet graph.

When it comes to styling the control you can customize almost every part of it starting from the labels and the tick marks and ending with the performance bar and target value. We are going to take a closer look at the ranges, cause they are a tool that can help you strengthen the feeling of comparison of values. Those comparative ranges are managed by the ranges property within which several individual ranges can be defined. Each range have its own starting and ending values as well as a brush. All of the brushes of the control support gradients. But if you want only the scale to be colored using the gradients you should use the ranges brush, if you use the backingBrush property you will color the whole control. Pay attention that if you don’t set specifically values for the brush and outline properties , the values are retrieved from the values of igBulletGraph’s rangeBrushes and rangeOutlines objects. They are defined in the default theme. You can also use CSS to style the different elements. For the ranges you can use the background-image property to set a gradient color. Another thing to watch about is : if you use the “ui-bulletgraph-range-palette-n” class you should set not only the background color but the border as well.

Each range can be configured individually by specifying its starting and ending value, the border thickness and color . The width and the position of the ranges are managed by the inner and outer start and end extent. You can add a tooltips to the ranges. By default the tooltip template of the ranges shows the start and the end values separated by hyphen.

MVC:

jQuery:

Animation Transitions

One of the main features of the bullet graph is the animated transitions. This control provides a build-in support for animations, which can be triggered by the transitionDuration property. By default this property is disabled, but you can enable it by assigning it a positive milliseconds value.   The milliseconds value determines the timeframe for sliding the control into view by smoothly visualizing all its visual elements through a slide effect. The animations appears when the control is loading as well as when the value of any of its property is changed.

In the sample below you can see how we change the value for the graph at every second and based on that value we change the background color of the control, so that it will correspond to it.

Check out the animated transitions sample to see transitions between different sets of settings in the igBulletGraph control.

For one of the samples, that you can find at the bottom of the blog we used the animation duration to show the wind speed change in mph for the different countries. You can see a live demo on jsFiddle.

Graphical Table

As I said earlier the bullet graph comes in handy when we want to display comparison between two values. By building a grid and combining it with such graph you will provide to your end-users an easy to understand and use comprehensive information.  You can check out the grid integration sample to see how to use the igBulletGraph control in a grid.

To implement  such correlation between those controls, you should add a custom row template for the grid with a special div tag that will host the bullet charts.

The next step is to add a rowsRendered event and configure the bullet graphs in it. The minimum and maximum values as well as the target value and the value itself we will take from the data that we are using for the grid.

 

Summary

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.

 

 

See a live demo in jsFiddle or download the ASP.NET MVC sample.

 

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