Here’s a complete example showing a copy of the gauge defined in An Instrument Gauge with an additional two lines that are at the min and max values of the graduated range of values shown by the panel.
Note that the min and max values are not a multiple of 10 or 5 or 2.5 (4, 2, and 1 multiples of the tick unit), so there would not be any tick mark drawn at those values.
<html><body>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:350px"></div>
</div>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Circle",
{ stroke: "orange", strokeWidth: 5, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight },
new go.Binding("stroke", "color")),
$(go.Panel, "Spot",
$(go.Panel, "Graduated",
{
name: "SCALE", margin: 14,
graduatedTickUnit: 2.5, // tick marks at each multiple of 2.5
graduatedMax: 100, // this is actually the default value
stretch: go.GraphObject.None // needed to avoid unnecessary re-measuring!!!
},
new go.Binding("graduatedMin", "min"), // controls the range of the gauge
new go.Binding("graduatedMax", "max"), // controls the range of the gauge
// the main path of the graduated panel, an arc starting at 135 degrees and sweeping for 270 degrees
$(go.Shape, { name: "SHAPE", geometryString: "M-70.7107 70.7107 B135 270 0 0 100 100 M0 100", stroke: "white", strokeWidth: 4 }),
// three differently sized tick marks
$(go.Shape, { geometryString: "M0 0 V10", stroke: "white", strokeWidth: 1.5 }),
$(go.Shape, { geometryString: "M0 0 V12", stroke: "white", strokeWidth: 2.5, interval: 2 }),
$(go.Shape, { geometryString: "M0 0 V15", stroke: "white", strokeWidth: 3.5, interval: 4 }),
$(go.TextBlock,
{ // each tick label
interval: 4,
alignmentFocus: go.Spot.Center,
font: "bold italic 14pt sans-serif", stroke: "white",
segmentOffset: new go.Point(0, 30)
})
),
$(go.TextBlock,
{ alignment: new go.Spot(0.5, 0.9), stroke: "orange", font: "bold italic 14pt sans-serif" },
new go.Binding("text", "key"),
new go.Binding("stroke", "color")),
$(go.Shape, { fill: "red", strokeWidth: 0, geometryString: "F1 M-6 0 L0 -6 100 0 0 6z x M-100 0" },
new go.Binding("angle", "value", convertValueToAngle)),
// a line at the MIN value
$(go.Shape, { fill: null, stroke: "cyan", strokeWidth: 2, geometryString: "M80 0 L100 0 x M-100 0" },
new go.Binding("angle", "min", convertValueToAngle)),
// a line at the MAX value
$(go.Shape, { fill: null, stroke: "cyan", strokeWidth: 2, geometryString: "M80 0 L100 0 x M-100 0" },
new go.Binding("angle", "max", convertValueToAngle)),
$(go.Shape, "Circle", { width: 2, height: 2, fill: "#444" })
)
);
// this determines the angle of the needle, based on the data.value argument
function convertValueToAngle(v, shape) {
var scale = shape.part.findObject("SCALE");
var p = scale.graduatedPointForValue(v);
var shape = shape.part.findObject("SHAPE");
var c = shape.actualBounds.center;
return c.directionPoint(p);
}
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha", min: -2, max: 102, value: 35 },
{ key: "Beta", color: "green", min: 0, max: 142, value: 70 }
], [
{ from: "Alpha", to: "Beta" }
]);
</script>
</body></html>
If you don’t want to show those extra lines when no data.min or data.max value is supplied by the node data object, you could do this:
// a line at the MIN value
$(go.Shape, { fill: null, stroke: "cyan", strokeWidth: 2, geometryString: "M80 0 L100 0 x M-100 0", visible: false },
new go.Binding("angle", "min", convertValueToAngle),
new go.Binding("visible", "min", m => true)),
// a line at the MAX value
$(go.Shape, { fill: null, stroke: "cyan", strokeWidth: 2, geometryString: "M80 0 L100 0 x M-100 0", visible: false },
new go.Binding("angle", "max", convertValueToAngle),
new go.Binding("visible", "max", m => true)),
Note how it defaults to be not-visible, but the binding, if successful, makes it visible.
We’ll look into why it isn’t showing a tick mark at such a large value.
