Dundas Data Visualization Support Site
Dundas Support Site Home  |  Contact Us  |  Dundas Home  
Contact Us via Email
Home

How can I add a label or image outside of the gauge and move it with the pointer?

 

Q. How can I add a label or image outside of the gauge and move it with the pointer?

A. You can do this by adding a label or image to the gauge container and dynamically calculating its location using the pointer's value:

  1. Add an image to the gauge as a label background, set the Parent of the image to none so that the position and size of the image is relative to the gauge container.
  2. Add a label to the gauge, and set its Parent to the image. Since the location and size of the label are relative to its parent set the label's Location to (0,0) and its Size to (100,100). (Or appropriate values to position it within your background image.)
  3. Calculate the location of the label and image using the gauge's size, starting angle and sweep angle, and resize the image depending on the length of the label's text.

Gauge with a label on the outside

Here's some code demonistrating this technique; use it in the ValueChanged event handler so it automatically updates when the gauge's value changes. C#

//the current angle of the point
double angle = gaugeContainer1.CircularGauges[0].Scales[0].StartAngle +
    gaugeContainer1.CircularGauges[0].Scales[0].SweepAngle /
    (gaugeContainer1.CircularGauges[0].Scales[0].Maximum
     - gaugeContainer1.CircularGauges[0].Scales[0].Minimum)
    * gaugeContainer1.CircularGauges[0].Pointers[0].Value;

// xc and yc are the coordinate of the center of the circular gauge, assue the pivot point of the guage is (50,50)
double xc = gaugeContainer1.CircularGauges[0].Location.X +
    gaugeContainer1.CircularGauges[0].Size.Width / 2;
double yc = gaugeContainer1.CircularGauges[0].Location.Y +
    gaugeContainer1.CircularGauges[0].Size.Height / 2;

//the radius of the guage
double r = gaugeContainer1.CircularGauges[0].Size.Height / 2;

//calculate the coordinate of the image/label
double x = xc - r * Math.Sin(angle * Math.PI / 180);
double y = yc + r * Math.Cos(angle * Math.PI / 180);

gaugeContainer1.Labels[0].Text =
    gaugeContainer1.CircularGauges[0].Pointers[0].Value.ToString();

//calculate the relative size(as percentatge) of the image
gaugeContainer1.Images[0].Size.Height =
    gaugeContainer1.Labels[0].Font.GetHeight() / gaugeContainer1.Height * 100;

//convert the absolute text length to relative length
gaugeContainer1.Images[0].Size.Width =
    gaugeContainer1.Labels[0].Font.SizeInPoints * 
    gaugeContainer1.Labels[0].Text.Length /
    gaugeContainer1.Width * 100;
gaugeContainer1.Images[0].Location.X =
    (float)x - gaugeContainer1.Images[0].Size.Width / 2;
gaugeContainer1.Images[0].Location.Y =
    (float)y - gaugeContainer1.Images[0].Size.Height / 2;

VB.NET

'the current angle of the point
Dim angle As Double = gaugeContainer1.CircularGauges(0).Scales(0).StartAngle + gaugeContainer1.CircularGauges(0).Scales(0).SweepAngle / (gaugeContainer1.CircularGauges(0).Scales(0).Maximum - gaugeContainer1.CircularGauges(0).Scales(0).Minimum) * gaugeContainer1.CircularGauges(0).Pointers(0).Value

' xc and yc are the coordinate of the center of the circular gauge, assue the pivot point of the guage is (50,50)
Dim xc As Double = gaugeContainer1.CircularGauges(0).Location.X + gaugeContainer1.CircularGauges(0).Size.Width / 2
Dim yc As Double = gaugeContainer1.CircularGauges(0).Location.Y + gaugeContainer1.CircularGauges(0).Size.Height / 2

'the radius of the guage
Dim r As Double = gaugeContainer1.CircularGauges(0).Size.Height / 2

'calculate the coordinate of the image/label
Dim x As Double = xc - r * Math.Sin(angle * Math.PI / 180)
Dim y As Double = yc + r * Math.Cos(angle * Math.PI / 180)

gaugeContainer1.Labels(0).Text = gaugeContainer1.CircularGauges(0).Pointers(0).Value.ToString()

'calculate the relative size(as percentatge) of the image
gaugeContainer1.Images(0).Size.Height = gaugeContainer1.Labels(0).Font.GetHeight() / gaugeContainer1.Height * 100

'convert the absolute text length to relative length
gaugeContainer1.Images(0).Size.Width = gaugeContainer1.Labels(0).Font.SizeInPoints * gaugeContainer1.Labels(0).Text.Length / gaugeContainer1.Width * 100
gaugeContainer1.Images(0).Location.X = CSng(x) - gaugeContainer1.Images(0).Size.Width / 2
gaugeContainer1.Images(0).Location.Y = CSng(y) - gaugeContainer1.Images(0).Size.Height / 2

Attached files

PoorExcellent