Hello everybody! I am Yavor Ivanov and I work in the DataVisualization team here at Telerik.  As Vladimir mentioned earlier in his blog post, the Q3 release focuses on dashboards and line of business applications and today I am happy to announce another result of this focus: the RadBulletGraph!




The Bullet Graph is created by Stephen Few and it is designed especially for dashboards. This little wonder is very data intensive and easy to read at the same time. In just one Bullet graph you can demonstrate both what your projected and your accomplished goals for a period are, specify qualitative ranges such as worst, acceptable and good and also display some comparative values. Usually these graphs start at zero for easy comparison, so you can stack a few of them for better representation.


Here at Telerik we developed our RadBulletGraph to conform to the full design specification. Configuring a Bullet graph is as easy as just drag & drop from the toolbox, configure a few properties from the Properties grid and you are all set! In most cases you won’t even have to write a single line of code or XAML yourself. This means that you can easily go MVVM with the RadBulletGraph in no time. For example one of the Bullet Graphs above is configured with the following XAML code:


  1. <telerik:RadHorizontalBulletGraph Grid.Column="1" FeaturedMeasure="270" ComparativeMeasure="250" Margin="6" TextFormatString="{}{0:C0}">
  2.     <telerik:RadHorizontalBulletGraph.QualitativeRanges>
  3.         <telerik:QualitativeRange Brush="#A8A8A8" Value="150" />
  4.         <telerik:QualitativeRange Brush="#C6C8C8" Value="225" />
  5.         <telerik:QualitativeRange Brush="#E8E8E8" />
  6.     </telerik:RadHorizontalBulletGraph.QualitativeRanges>
  7. </telerik:RadHorizontalBulletGraph>


As you can see we made sure the API is as clean and simple as possible. We also paid a lot of attention to the integration potential for this control. For example you can easily hide the quantitative scale to save space when you put a Bullet graph within a RadGridView cell. In the CaptureRadBulletGraph we introduced an advanced auto range algorithm that allows you to specify for example the minimum value while keeping the maximum value and step automatic. As usual every part of the control can be customized - brush, border, style and template, and changed to fit your specific requests and there are several themes you can use out of the box!



We hope that you’ll like our RadBulletGraph control and will be happy to hear what you think about it!

Yavor Ivanov
About the Author

Yavor Ivanov

Yavor is a senior software developer on the Telerik UI for Xamarin team. His 10+ years of XAML and WPF experience were gained in the Telerik UI for WPF and Silverlight suite as well as many LoB applications. His workday is a mixed bag of Xamarin, WPF and Angular development. Finding the right solution for the job is his main goal. You can find him on GitHub.

Related Posts


Comments are disabled in preview mode.