VinothSparrow.GetType()

Overview

This article describes the development of custom bullet graph control in the following Cross Platforms

WPF for Desktop Applications
Silverlight for Web Applications
WinRT for Touch and Desktop Apps
WIndows Phone for Mobile Applications

Bullet Graph

A bullet graph is a variation of Bar Chart developed by Stephen Few in 2005. The bullet graph is mainly used in the Business Dashboard Design. The design specifications for Bullet Graph can be found at "Stephen Few - Bullet Graph Design Specifications".The specification is below.

How to Download BulletGraph Control

I implemented and published the bullet graph control in the Nuget Server.

First of all download the bullet graph control for your specified platform from the following links

After installing the package, the following are the steps to create bullet graph in XAML

For WPF Bullet Graph, import the following namespace

Collapse | Copy Code

 xmlns:sparrow="http://sparrowtoolkit.codeplex.com/wpf"

For SIlverlight Bullet Graph, import the following namespace

Collapse | Copy Code

 xmlns:sparrow="http://sparrowtoolkit.codeplex.com/wpf"

For WinRT Bullet Graph, import the following namespace

Collapse | Copy Code

 xmlns:sparrow="using:Sparrow.BulletGraph"

For Windows Phone 7.1 Bullet Graph, import the following namespace

Collapse | Copy Code

 xmlns:sparrow="clr-namespace:Sparrow.BulletGraph;assembly=Sparrow.BulletGraph.WP7.45"

For Windows Phone 8 Bullet Graph, import the following namespace

Collapse | Copy Code

 xmlns:sparrow="clr-namespace:Sparrow.BulletGraph;assembly=Sparrow.BulletGraph.WP8.45"

Then Create the Bullet graph Control in the XAML

Collapse | Copy Code

  <sparrow:BulletGraph Minimum="0" Interval="500" MinorTickStep="3" PerformanceMeasure="1700" ComparativeMeasureSpacing="0.3"   ComparativeMeasure="2100"   Maximum="2500"  Height="45" VerticalAlignment="Center">
                        <sparrow:QualitativeRange Maximum="2000" Fill="#D8D8D8"/>
                        <sparrow:QualitativeRange Maximum="1400" Fill="#7F7F7F"/>
                        <sparrow:QualitativeRange Maximum="2500" Fill="#EBEBEB"/>
  </sparrow:BulletGraph>

The final result are below

Bullet Graph control in WinRT

BulletGraph Control in Windows Phone

BulletGraph Control in WPF

BulletGraph Control in Silverlight

Styling and Customization

Collapse | Copy Code

  <sparrow:BulletGraph Orientation="Vertical" ScalePosition="Opposed" Minimum="0" Interval="500" MinorTickStep="3" PerformanceMeasure="1700" ComparativeMeasureSpacing="0.3"   ComparativeMeasure="2100"   Maximum="2500"  Width="60" VerticalAlignment="Center">
                <sparrow:QualitativeRange Maximum="2000" Fill="#FF35A02E"/>
                <sparrow:QualitativeRange Maximum="1400" Fill="#FFFFFF01"/>
                <sparrow:QualitativeRange Maximum="2500" Fill="#FFFE0000"/>
 </sparrow:BulletGraph>

Conclusion

With this article i have demonstrated the way to implement the cross platform based bullet graph custom control via this you can use bullet graph for Business Dashboard design or Data Visualization purpose.