This makes use of a "Graduated" Panel, which holds the main path of the scale, a Shape whose Shape.geometry is a circular arc. In addition that Graduated Panel holds three different Shapes acting as templates for tick marks and a TextBlock acting as a template for tick labels.

In a Spot Panel with the Graduated Panel scale are an italic TextBlock showing the node identifier and a red elongated diamond "needle" Shape. The needle's angle is determined by convertValueToAngle, which finds the point on the Graduated Panel's main path element corresponding to data.value and computes the angle from the center to that point. The data value is updated several times per second. A circle Shape surrounds the Spot Panel.

GoJS Features in this sample

Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples