GaugeScale.addArrow

Syntax

addArrow(arrow: PP.Ui.GaugeArrowBase || Array);

Parameters

arrow. Arrow or arrows array to be added.

Description

The addArrow method adds a new arrow or array of arrows to speedometer scale.

Example

To execute the example, the page must contain the Speedometer component named speedometer (see Example of Creating a Speedometer with a Wizard).

Create new arrows. Add one of them to the scale, and replace the existing arrow with the index 0 with the other one. Change color of scale text labels. Show value of the scale's first arrow and the number of text labels. Get major and minor scale tick marks with specified indices and resize them. Get and show data on scale size and position:

// Get speedometer scale
var scale = speedometer.getScales()[3];
// Determine arrow settings
var arrowSettings = {
    Value: 300, // Arrow value
    Radius: 80, // Arrow length
    Border: { // Arrow border
        PPType: PP.SolidColorBrush,
        Color: "#ff462c"
    } 
}
// Create a new arrow
var arrow1 = new PP.Ui.LineArrow(arrowSettings);
// Add an arrow to speedometer
scale.addArrow(arrow1);
// Create a new arrow
var arrow2 = new PP.Ui.LineArrow(arrowSettings);
// Set arrow value
arrow2.setValue(800);
// Set a new arrow with the 0 index
scale.setArrow(arrow2, 0);
// Set color of scale text labels
scale.setLabelsColor(PP.Color.Colors.blue);
// Output the first arrow value
console.log("First scale arrow value: " + scale.getArrowValue(scale.getArrows(0)));
// Output the number of scale text labels
console.log("Number of scale text labels: " + scale.getLabelset().length);
// Get major scale tick mark with the 1 index
var majorTick = scale.getMajorTicks(1);
majorTick.setSize(0.1);
// Get minor scale mark with the 3 index
var minorTick = scale.getMinorTicks(3);
minorTick.setSize(0.07);
// Get and output data about scale size and position
var rInfo = scale.getRenderInfo();
console.log("Scale with radii x = " + rInfo.radius.x + ", y = " + rInfo.radius.y + 
  " is centered in the point (" + rInfo.center.x + ", " + rInfo.center.y + ")");

After executing the example a new arrow is added to the scale and the existing arrow is replaced. Color of scale text labels is changed, and major and minor tick marks with specified indexes are resized:

The browser console also shows value of the scale's first arrow, number of text labels and information about scale size and position:

Value of the scale's first arrow: 800

Number of scale text labels: 5

Scale with radii x = 0.95, y = 0.875 is centered in the point (110, 107)

See also:

GaugeScale