Creating the round gauge

The Smart Device Framework (OpenNETCF), as you've encountered earlier in Chapter 5 of this book, provides an out-of-the-box round gauge control that you can readily use in your application. We will now explore how you can make use of this control to display the total monthly sales achieved against the expected sales target.

You first used the Smart Device Framework in Chapter 5. If you haven't installed it yet, you can do so now by downloading the Smart Device Framework from the following URL (via the Download the Community Edition (free) link). SmartDeviceFramework/tabid/6 5/Default.aspx

First, add a reference to the library. You might need to browse for this DLL, which is located in the following folder:

\Program Files\Smart Device Framework\Bin

\Program Files\Smart Device Framework\Bin

After this, create a new usercontrol named GaugeChart. This usercontrol will encapsulate the functionality of the Smart Device Framework's RoundGauge control. You will also load data into your usercontrol by way of a Datasource property, shown as follows:

private XmlElement _dataSource = null;

public XmlElement Datasource {

return _dataSource;

_dataSource = value; LoadGauge();

The main properties you need to work with on the Smart Device Framework's RoundGauge control are listed as follows:

RoundGauge property name Description

MinValue This property defines the minimum value shown in the gauge control.

This property defines the maximum value shown in the gauge control

This property defines the value that the needle points to in the gauge control.



Now let's declare some variables that will be used throughout your usercontrol.

//An instance of the Smart Device Framework's Round Gauge control private RoundGauge _gaugeControl = null;

//The achieved sales amount for the month private long _totalSalesAmount;

//The expected sales target amount for the month private long _MonthlySalesTarget;

//The minimum % of sales of which an amount below this value

//is considered critically low private int _MinimumSalesPercentage = 20;

//The base number for all values on the chart (eg: 1000 means //in thousands)

private int _BaseOfValue = 10000;

//Fonts and brushes used throughout the GaugeChart usercontrol private SolidBrush _blackBrush = new SolidBrush(Color.Black); private Font _smallFont = new Font("Tahoma", 6, FontStyle.Regular) private Font _stdFont = new Font("Tahoma", 8, FontStyle.Regular); private Font _boldFont = new Font("Tahoma", 8, FontStyle.Bold);

You can now write the LoadGauge() method, which initializes the gauge control and sets the display values on the gauge.

private void LoadGauge() {

//Extracts the data from the XML node

XmlElement _xmlSalesAmount = (System.Xml.XmlElement)


_totalSalesAmount =

int.Parse(_xmlSalesAmount.GetAttribute("Value")); _MonthlySalesTarget =

int.Parse(_xmlSalesAmount.GetAttribute ("MonthlySalesTarget"));

//Create the gauge control _gaugeControl = new RoundGauge(); _gaugeControl.Name = "TotalSalesGauge"; _gaugeControl.Visible = true; _gaugeControl.Font = _smallFont; _gaugeControl.Dock = DockStyle.None;

//Leave some space at the top for the chart title _gaugeControl.Location = new Point(0, 20);

_gaugeControl.Size = new Size(this.Width, this.Height - 20); _gaugeControl.Anchor = AnchorStyles.Bottom |

AnchorStyles.Left | AnchorStyles.Right; _gaugeControl.ShowTickLabels = true;

//Set the gauge values _gaugeControl.MinValue = 0;

_gaugeControl.MaxValue = ConvertToBaseValue((int)

_MonthlySalesTarget); _gaugeControl.Value = ConvertToBaseValue((int) _totalSalesAmount);

//Set other gauge settings _gaugeControl.ValueDigits = - 1; _gaugeControl.LineBezelSpacing = 2;

_gaugeControl.TickLabelPadding = 2;

//Sets the warning/critical zone for the gauge _gaugeControl.LowWarnValue = ConvertToBaseValue((int)

((_MinimumSalesPercentage * _MonthlySalesTarget)/100)); _gaugeControl.LowWarnColor = Color.Red; _gaugeControl.HighWarnValue =

ConvertToBaseValue((int) _MonthlySalesTarget); _gaugeControl.HighWarnColor = Color.Black; this.Controls.Add(_gaugeControl);

//Creates the gauge chart title Label _gaugeTitle = new Label(); _gaugeTitle.Text =

DateAndTime.MonthName(DateTime.Now.Month, true) +

" Sales ($0,000)"; _gaugeTitle.Visible = true; _gaugeTitle.Font = _boldFont; _gaugeTitle.Location = new Point(2, 2); _gaugeTitle.Size = new Size(this.Width, 20); _gaugeTitle.BringToFront(); this.Controls.Add(_gaugeTitle);

//This method converts the sales amount into the correct //figure on the chart using the base number private int ConvertToBaseValue(int Amount) {

Now override the 0nPaint() event so that you can display the Loading data... message when the gauge chart loads.

public void GaugeChart_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

e.Graphics.DrawString("Loading data...", _stdFont,

Back in dashboard.cs, you need to make the following (highlighted) changes to the

LoadDashboard() method.

private GaugeChart _gaugeChartControl;

private void LoadDashboard() {

_lineChartControl = new LineChart(); _lineChartControl.Dock = DockStyle.Fill; _lineChartControl.Visible = true; pnlLineChart.Controls.Add(_lineChartControl);

int _GaugeSize = Math.Min(pnlGauge.Width, pnlGauge.Height); _gaugeChartControl = new GaugeChart(); _gaugeChartControl.Dock = DockStyle.None; _gaugeChartControl.Anchor = AnchorStyles.Top |

AnchorStyles.Left | AnchorStyles.Right; _gaugeChartControl.Location = new Point(0, 0); _gaugeChartControl.Size = new Size(_GaugeSize, _GaugeSize); _gaugeChartControl.Visible = true; pnlGauge.Controls.Add(_gaugeChartControl);

In the BeginGetChartDataCallback() method, you need to add the following additional code:

private delegate void

PopulateGaugeChartControlDelegate(XmlElement Data);

private void BeginGetChartDataCallback(IAsyncResult Result) {

//Look for the total sales amount node and load it into the //gauge chart control

_xmlTotalSales = (System.Xml.XmlElement)

(_xmlRoot.GetElementsByTagName("TotalSales")[0]); PopulateGaugeChartControlDelegate _gaugechartDelegate =

new PopulateGaugeChartControlDelegate (PopulateGaugeChartControl); this.BeginInvoke(_gaugechartDelegate, _xmlTotalSales);

private void PopulateGaugeChartControl(XmlElement Data) {

_gaugeChartControl.Datasource = Data;

Run your application again to test the gauge chart in action. You will see a display similar to the following diagram. The red zone of the gauge chart indicates the "critical" area, and the label in the middle of the gauge displays the value the needle is pointing to.

Was this article helpful?

0 0

Post a comment