Pointers

The pointers represent needles or similar type of indicators within the scale. They are used to visualize a current measurement within the scale. The most important member of the pointer object is its Value. The pointer is automatically adjusted by its containing scale so that it points to the scale location, corresponding to its value.

The size of the pointer is defined by the PointerWidth and PointerHeight properties. These properties can express the size as relative or absolute value. The location of the pointer can be adjusted through the PointerOffset property and its alignment in a linear scale can be specified through the Alignment property.

The pointer can be made interactive by setting the IsInteractive property to true. Clicking with the mouse within a scale causes all its interactive pointers to be adjusted to the value corresponding to the clicked point. A pointer can be made discrete by setting IsDiscrete to true. The value of a discrete pointer is always integer.

Usage

The sample code below illustrates how to define and add pointers to an existing scale:

JavaScript

var pointer = new Point();
pointer.isInteractive = true;
scale.addPointer(pointer);

Custom Appearance

The appearance of the pointer can be customized by using the PrepaintPointer and PaintPointer events. The following example demonstrates an oval gauge with a compass needle type of pointer:

JavaScript

var ovalScale = new OvalScale(ovalGauge);
ovalScale.fill = "transparent";
ovalScale.stroke = "transparent";
ovalScale.minValue = 0;
ovalScale.maxValue = 360;
ovalScale.majorTickSettings.showTicks = false;
ovalScale.majorTickSettings.showLabels = false;
ovalScale.middleTickSettings.showTicks = false;
ovalScale.middleTickSettings.showLabels = false;

var pointer = new Pointer();
pointer.pointerWidth = new Length(200, LengthType.Relative);
pointer.pointerHeight = new Length(20, LengthType.Relative);
pointer.pointerOffset = new Length(90, LengthType.Relative);
pointer.isInteractive = true;
pointer.shape = MindFusion.Gauges.PointerShape.Custom;
ovalScale.addPointer(pointer);

ovalGauge.addEventListener(Events.paintPointer, function (sender, args) {
    var context = args.context;
    var element = args.element;
    var size = element.renderSize;

    var figure = new PathFigure('M0.5, 0 L1, 0.5 L0.5, 1 Z');
    figure.fill = Utils.createRadialGradient(new Point(0.5, 0.1), 0, [0, 'rgba(193,0,0,1)', 0.3, 'rgba(255,0,0,1)', 1, 'rgba(102,0,0,1)']);
    figure.stroke = 'rgba(32,32,32,1)';
    args.paintVisualElement(figure, size);

    var figure = new PathFigure('M0.5, 0 L0, 0.5 L0.5, 1 Z');
    figure.fill = Utils.createRadialGradient(new Point(0.5, 0.1), 0, [0, 'rgba(193,193,193,1)', 0.3, 'rgba(204,204,204,1)', 1, 'rgba(102,102,102,1)']);
    figure.stroke = 'rgba(32,32,32,1)';
    args.paintVisualElement(figure, size);

    context.save();
    context.beginPath();
    context.arc(size.width / 2, size.height / 2, 3, 0, 2 * Math.PI, false);
    context.fillStyle = 'gray';
    context.strokeStyle = 'rgba(32,32,32,1)';
    context.fill();
    context.stroke();
    context.restore();
});

The above gauge will look similar to the following image: