GoJS can be used to create industrial editors or monitors, such as the editing of warehouse layouts or HVAC layouts, or the monitoring of industrial systems or building security.

In this sample, racks, areas, and zones can be resized and moved. Disconnected links are used to show suggested moving paths.


{ "class": "GraphLinksModel",
  "pointsDigits": 0,
  "nodeDataArray": [
{"key":0,"category":"building","size":"640 680","loc":"-90 -190"},
{"key":1,"label":"racks 1","color":"lightblue","size":"420 60","loc":"70 -130"},
{"key":-13,"label":"racks 2","color":"lightblue","size":"440 60","loc":"50 -10"},
{"key":2,"label":"racks 3","color":"lightblue","size":"440 60","loc":"50 110"},
{"key":4,"label":"returns","color":"#f7d679","size":"80 100","loc":"-70 -130"},
{"key":5,"category":"zone","label":"inbound\nstaging","color":"rgba(255,0,255,0.1)","size":"100 160","loc":"-70 30"},
{"key":6,"label":"free area","category":"zone","color":"rgba(0,255,0,0.2)","size":"180 100","loc":"70 210"},
{"key":7,"label":"free area","category":"zone","color":"rgba(0,255,0,0.2)","size":"180 100","loc":"310 210"},
{"key":8,"label":"damaged\nitems or\nextra\nstaging","color":"#f7d679","size":"80 80","loc":"410 370"},
{"key":9,"label":"labeling","color":"#f7d679","size":"120 80","loc":"250 370"},
{"key":10,"label":"packing","color":"#f7d679","size":"120 40","loc":"70 410"},
{"key":11,"label":"packing","color":"#f7d679","size":"120 40","loc":"70 350"},
{"key":12,"category":"zone","label":"outbound\nshipment","color":"rgba(255,0,0,0.2)","size":"100 120","loc":"-70 330"},
{"key":13,"color":"rgba(0,0,0,1)","size":"20 120","loc":"-110 70"},
{"key":14,"color":"rgba(0,0,0,1)","size":"20 120","loc":"-110 270"}
],
  "linkDataArray": [
{"points":[140,-50,370,-50],"text":"picking path"},
{"points":[140,70,370,70],"text":"picking path"},
{"points":[140,-170,370,-170],"text":"picking path"},
{"points":[510,-150,510,125],"text":"path"},
{"points":[480,330,250,330],"text":"path"}
]}

GoJS Features in this sample

Grid Patterns

GoJS provides functionality to display a grid of lines drawn at regular intervals. Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.

Grids are implemented using a type of Panel, Panel.Grid. Grid Panels, like most other types of Panels, can be used within Nodes or any other kind of Part. However when they are used as the Diagram.grid, they are effectively infinite in extent.

More information can be found in the GoJS Intro.

Related samples