This sample shows how to create and align sparkline style charts in a Node, using Spot Panel and Panel.alignmentFocusName.
The Spot Panel's main element is a red vertical line, and its other elements are items in an item array. Instead of aligning to these item array items,
which are Horizontal Panels, we want to align to the Shape that represents the sparkline, inside of the Panel. To do this we set
Panel.alignmentFocusName to "spark", and then set the alignmentFocus in
function makeAlignmentFromValues() to the top left point, plus some offset to normalize the y-axis of the sparklines.
The Sparklines exist in a horizontal panel with optional labels at the front, and these sparkline labels also have their alignment computed within the horizontal panel, based on the fractional height of the starting value of the sparkline.
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.
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.