This monitoring diagram continuously shows the state of a number of stations on an imaginary shop floor. Every two seconds it updates the display, showing some random problems via highlighting. You can add nodes and links by adding data to the model text below and then clicking "Load".

{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 218"}, {"key":"2", "text":"Machine 17", "type":"M4", "loc":"195 94"}, {"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 218"}, {"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 218"}, {"key":"5", "text":"Machine 18", "type":"M5", "loc":"306 95"}, {"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 218"}, {"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ], "linkDataArray": [ {"from":"1", "to":"2"}, {"from":"1", "to":"3"}, {"from":"1", "to":"4"}, {"from":"4", "to":"5"}, {"from":"4", "to":"6"}, {"from":"7", "to":"2"}, {"from":"7", "to":"3"} ]}

For another monitoring example, see the Kitten Monitor sample.

### GoJS Features in this sample

#### Animation

GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.

The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS Intro.

Related samples