This sample demonstrates an example usage of a Graduated Panel to draw ticks and text labels along a timeline.
The Panel uses a Panel.graduatedTickUnit of 1 to represent one day, and ticks are drawn at Shape.intervals of 7 to represent weeks.
Labels are drawn at TextBlock.intervals of 14, or every two weeks. As the timeline is resized, the interval is updated to prevent overlaps. Text strings are generated by setting the TextBlock.graduatedFunctionto convert from values in the graduated range to date strings. Also notice that labels use the GraphObject.alignmentFocus, GraphObject.segmentOrientation, and GraphObject.segmentOffset properties to place text below the timeline bar.
Try resizing the timeline: select the timeline and drag the resize handle that is on the right side. Event nodes will automatically be laid out relative to
the timeline using the TimelineLayout. TimelineLayout converts a date to a value, then uses Panel.graduatedPointForValue to help
determine where event nodes will be placed.
We have many other timeline samples available demonstrating various features.
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.
The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS Intro.
GoJS allows for the creation of custom layouts to meet specific needs.
There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library,
but available as source code in one of the three extension directories, with some documentation and corresponding samples.
More information can be found in the GoJS Intro.