gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
263 lines (260 loc) • 17.2 kB
HTML
<html>
<head>
<title>Unlisted Samples</title>
<meta name="description" content="GoJS samples that are not listed on the left side of each sample page." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>
These samples augment the regular <a href="index.html">GoJS samples</a>, but display more specific or purpose-built functionality, often as variations of one of the regular samples.
</p>
<!-- These are in the order in which they would be in goSamples.js but are commented out: -->
<ul>
<li><a href="minimalJSON.html">Minimal, loading JSON from server</a></li>
<li><a href="minimalXML.html">Minimal, loading XML from server</a></li>
<li><a href="require.html">Minimal, using RequireJS</a></li>
<li><a href="angular.html">Minimal, using AngularJS</a></li>
<li><a href="hoverButtons.html">Hover Buttons, showing buttons in an Adornment upon hover over a node</a></li>
<br />
<li><a href="scrollModes.html">Scroll Modes showing infinite scrolling and positionComputation</a></li>
<li><a href="visualTreeGrouping.html">Visual Tree using nested Groups instead of Nodes and Links</a></li>
<li><a href="tiger.html">SVG Tiger</a></li>
<li><a href="relationships.html">Relationships, rendering a small GraphObject repeatedly along the stroke of a Shape</a></li>
<li><a href="familyTreeJP.html">Family Tree, Japanese</a></li>
<li><a href="doubleTreeJSON.html">Double Tree loading JSON from server</a></li>
<li><a href="orgChartExtras.html">Org Chart with extra links and collapse/expand</a></li>
<li><a href="faultTree.html">Fault Tree with collapse/expand and gates at each non-root node</a></li>
<li><a href="pipeTree.html">Pipe Tree, a tree layout with rectangular nodes at alternating angles and no links</a></li>
<li><a href="pathAnimation.html">Path Animation, showing tokens (Parts) travelling along links</a></li>
<li><a href="doubleCircle.html">Double Circle, concentric CircularLayouts</a></li>
<li><a href="radialPartition.html">Radial Partition, segmented rings</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="constantSize.html">Kitten Monitor but with constant size markers & tooltips when zooming out</a></li>
<li><a href="spacingZoom.html">When zooming, change the spacing of the Nodes, not the Diagram.scale</a></li>
<li><a href="swimLanesVertical.html">Just like SwimLanes, but with vertical lanes.</a></li>
<li><a href="spreadsheet.html">Spreadsheet, nested Auto Panels surrounding Table Panels whose itemArrays are bound to Arrays of numbers</a></li>
<br />
<li><a href="virtualized.html">Virtualized no Layout, an example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time</a></li>
<li><a href="virtualizedTree.html">Virtualized Tree, an example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time</a></li>
<li><a href="virtualizedTreeLayout.html">Virtualized TreeLayout, with TreeModel</a></li>
<li><a href="virtualizedForceLayout.html">Virtualized ForceDirectedLayout, with GraphLinksModel</a></li>
<br />
<li><a href="flowBuilder.html">Flow Builder, with recycle node and custom linking</a></li>
<li><a href="flowgrammer.html">Flowgrammer, a flow-chart-like editor of a restricted syntax language.</a></li>
<li><a href="network.html">Network Configuration</a></li>
<li><a href="stateChartIncremental.html">State Chart using incremental JSON</a></li>
<li><a href="sharedStates.html">Shared States, nodes that simultaneously belong to multiple containers, without using Groups</a></li>
<br />
<li><a href="selectableFields.html">Selectable Fields, derived from Record Mapper, but supporting selection and deletion of fields</a></li>
<li><a href="treeMapper.html">Tree Mapper, like Record Mapper, but displaying two trees, allowing the user to draw or delete or reconnect links mapping one tree node to another</a></li>
<li><a href="addRemoveColumns.html">Add & Remove Rows & Columns of a Table Panel</a></li>
<li><a href="dragDropFields.html">Drag & Drop Fields from/to Record Nodes</a></li>
<li><a href="dragOutFields.html">Drag Out Fields from Record Nodes to HTML element</a></li>
<li><a href="dataFlowVertical.html">Data Flow, Vertically Oriented</a></li>
<li><a href="selectablePorts.html">Selectable Ports</a></li>
<li><a href="draggablePorts.html">Draggable Ports, using a Group for each node and a Node for each port, with a custom Group.layout</a></li>
<br />
<li><a href="regroupingScaled.html">Regrouping with nested groups scaled ever smaller</a></li>
<li><a href="regroupingTreeView.html">Regrouping with tree view of grouping hierarchy</a></li>
<li><a href="twoDiagrams.html">Two Diagrams, showing drag-and-drop moves between Diagrams</a></li>
<br />
<li><a href="curviness.html">Curviness</a></li>
<li><a href="multiNodePathLinks.html">Path Links, demonstrates custom routing for Links running through other Nodes</a></li>
<li><a href="taperedLinks.html">Tapered Links, demonstrates custom geometries for Links</a></li>
<li><a href="multiArrow.html">Multi Arrow, another custom Link geometry that draws arrowheads at the end of each segment</a></li>
<br />
<li><a href="barCharts.html">Bar Charts, automatically creating bar geometries from item data</a></li>
<li><a href="pieCharts.html">Pie Charts, automatically creating pie slice geometries from item data</a></li>
<li><a href="candlestickCharts.html">Candlestick or Range Charts</a></li>
<li><a href="sparklineGraphs.html">Sparkline Graphs</a></li>
<br />
<li><a href="absolute.html">A diagram that does not allow scrolling or zooming or parts to be dragged out of a fixed area</a></li>
<li><a href="htmlDragDrop.html">Drag and Drop from HTML</a></li>
<li><a href="jQueryDragDrop.html">Drag and Drop from HTML using jQuery</a></li>
<li><a href="macros.html">Macros via auto ungrouping</a></li>
<li><a href="dragUnoccupied.html">Custom Part.dragComputation function to avoid overlapping nodes when dragging</a></li>
<br />
<li><a href="leaflet.html">Leaflet.js map with GoJS diagram on top, showing nodes placed at latitude and longitude locations.</a></li>
<li><a href="customTextEditingTool.html">Text Editing, demonstrates two manners of using custom HTML elements for in-place editing of a TextBlock</a></li>
<li><a href="htmlLightBoxContextMenu.html">LightBox style HTML Context Menu</a></li>
<li><a href="magnifier.html">Magnifier, using an Overview as a magnifying lens</a></li>
<li><a href="tabs.html">Diagram inside a jQuery UI Tab</a></li>
</ul>
<p>
See also the <a href="../extensions/index.html">GoJS Extensions</a>.
</p>
<hr />
<p>Below is a list of every GoJS sample and extension</p>
<ul>
<li><a href="absolute.html">absolute.html</a>
<li><a href="addRemoveColumns.html">addRemoveColumns.html</a>
<li><a href="adornmentButtons.html">adornmentButtons.html</a>
<li><a href="angular.html">angular.html</a>
<li><a href="arrowheads.html">arrowheads.html</a>
<li><a href="barCharts.html">barCharts.html</a>
<li><a href="basic.html">basic.html</a>
<li><a href="beatPaths.html">beatPaths.html</a>
<li><a href="candlestickCharts.html">candlestickCharts.html</a>
<li><a href="canvases.html">canvases.html</a>
<li><a href="classHierarchy.html">classHierarchy.html</a>
<li><a href="cLayout.html">cLayout.html</a>
<li><a href="comments.html">comments.html</a>
<li><a href="conceptMap.html">conceptMap.html</a>
<li><a href="constantSize.html">constantSize.html</a>
<li><a href="contentAlign.html">contentAlign.html</a>
<li><a href="curviness.html">curviness.html</a>
<li><a href="customContextMenu.html">customContextMenu.html</a>
<li><a href="customTextEditingTool.html">customTextEditingTool.html</a>
<li><a href="dataFlow.html">dataFlow.html</a>
<li><a href="dataFlowVertical.html">dataFlowVertical.html</a>
<li><a href="dataVisualization.html">dataVisualization.html</a>
<li><a href="decisionTree.html">decisionTree.html</a>
<li><a href="distances.html">distances.html</a>
<li><a href="DOMTree.html">DOMTree.html</a>
<li><a href="doubleCircle.html">doubleCircle.html</a>
<li><a href="doubleTree.html">doubleTree.html</a>
<li><a href="doubleTreeJSON.html">doubleTreeJSON.html</a>
<li><a href="dragDropFields.html">dragDropFields.html</a>
<li><a href="draggableLink.html">draggableLink.html</a>
<li><a href="draggablePorts.html">draggablePorts.html</a>
<li><a href="dragOutFields.html">dragOutFields.html</a>
<li><a href="dragUnoccupied.html">dragUnoccupied.html</a>
<li><a href="dynamicPorts.html">dynamicPorts.html</a>
<li><a href="entityRelationship.html">entityRelationship.html</a>
<li><a href="euler.html">euler.html</a>
<li><a href="familyTree.html">familyTree.html</a>
<li><a href="familyTreeJP.html">familyTreeJP.html</a>
<li><a href="faultTree.html">faultTree.html</a>
<li><a href="fdLayout.html">fdLayout.html</a>
<li><a href="flowBuilder.html">flowBuilder.html</a>
<li><a href="flowchart.html">flowchart.html</a>
<li><a href="flowgrammer.html">flowgrammer.html</a>
<li><a href="friendWheel.html">friendWheel.html</a>
<li><a href="gantt.html">gantt.html</a>
<li><a href="genogram.html">genogram.html</a>
<li><a href="gLayout.html">gLayout.html</a>
<li><a href="grafcet.html">grafcet.html</a>
<li><a href="grouping.html">grouping.html</a>
<li><a href="hoverButtons.html">hoverButtons.html</a>
<li><a href="htmlDragDrop.html">htmlDragDrop.html</a>
<li><a href="htmlInteraction.html">htmlInteraction.html</a>
<li><a href="htmlLightBoxContextMenu.html">htmlLightBoxContextMenu.html</a>
<li><a href="icons.html">icons.html</a>
<li><a href="incrementalTree.html">incrementalTree.html</a>
<li><a href="index.html">index.html</a>
<li><a href="interactiveForce.html">interactiveForce.html</a>
<li><a href="IVRtree.html">IVRtree.html</a>
<li><a href="jQueryDragDrop.html">jQueryDragDrop.html</a>
<li><a href="kanban.html">kanban.html</a>
<li><a href="kittenMonitor.html">kittenMonitor.html</a>
<li><a href="ldLayout.html">ldLayout.html</a>
<li><a href="leaflet.html">leaflet.html</a>
<li><a href="linksToLinks.html">linksToLinks.html</a>
<li><a href="localView.html">localView.html</a>
<li><a href="logicCircuit.html">logicCircuit.html</a>
<li><a href="macros.html">macros.html</a>
<li><a href="magnifier.html">magnifier.html</a>
<li><a href="mindMap.html">mindMap.html</a>
<li><a href="minimal.html">minimal.html</a>
<li><a href="minimalJSON.html">minimalJSON.html</a>
<li><a href="minimalXML.html">minimalXML.html</a>
<li><a href="multiArrow.html">multiArrow.html</a>
<li><a href="multiNodePathLinks.html">multiNodePathLinks.html</a>
<li><a href="navigation.html">navigation.html</a>
<li><a href="network.html">network.html</a>
<li><a href="orgChartEditor.html">orgChartEditor.html</a>
<li><a href="orgChartExtras.html">orgChartExtras.html</a>
<li><a href="orgChartStatic.html">orgChartStatic.html</a>
<li><a href="pageFlow.html">pageFlow.html</a>
<li><a href="parseTree.html">parseTree.html</a>
<li><a href="pathAnimation.html">pathAnimation.html</a>
<li><a href="PERT.html">PERT.html</a>
<li><a href="pieCharts.html">pieCharts.html</a>
<li><a href="pipes.html">pipes.html</a>
<li><a href="pipeTree.html">pipeTree.html</a>
<li><a href="planogram.html">planogram.html</a>
<li><a href="processFlow.html">processFlow.html</a>
<li><a href="productionProcess.html">productionProcess.html</a>
<li><a href="radial.html">radial.html</a>
<li><a href="radialPartition.html">radialPartition.html</a>
<li><a href="records.html">records.html</a>
<li><a href="regrouping.html">regrouping.html</a>
<li><a href="regroupingScaled.html">regroupingScaled.html</a>
<li><a href="regroupingTreeView.html">regroupingTreeView.html</a>
<li><a href="relationships.html">relationships.html</a>
<li><a href="require.html">require.html</a>
<li><a href="sankey.html">sankey.html</a>
<li><a href="scrollModes.html">scrollModes.html</a>
<li><a href="seatingChart.html">seatingChart.html</a>
<li><a href="selectableFields.html">selectableFields.html</a>
<li><a href="selectablePorts.html">selectablePorts.html</a>
<li><a href="sequenceDiagram.html">sequenceDiagram.html</a>
<li><a href="sequentialFunction.html">sequentialFunction.html</a>
<li><a href="shapes.html">shapes.html</a>
<li><a href="sharedStates.html">sharedStates.html</a>
<li><a href="shopFloorMonitor.html">shopFloorMonitor.html</a>
<li><a href="spacingZoom.html">spacingZoom.html</a>
<li><a href="sparklineGraphs.html">sparklineGraphs.html</a>
<li><a href="spreadsheet.html">spreadsheet.html</a>
<li><a href="stateChart.html">stateChart.html</a>
<li><a href="stateChartIncremental.html">stateChartIncremental.html</a>
<li><a href="swimBands.html">swimBands.html</a>
<li><a href="swimLanes.html">swimLanes.html</a>
<li><a href="swimLanesVertical.html">swimLanesVertical.html</a>
<li><a href="systemDynamics.html">systemDynamics.html</a>
<li><a href="tabs.html">tabs.html</a>
<li><a href="taperedLinks.html">taperedLinks.html</a>
<li><a href="tiger.html">tiger.html</a>
<li><a href="timeline.html">timeline.html</a>
<li><a href="tLayout.html">tLayout.html</a>
<li><a href="tournament.html">tournament.html</a>
<li><a href="treeMapper.html">treeMapper.html</a>
<li><a href="treeView.html">treeView.html</a>
<li><a href="twoDiagrams.html">twoDiagrams.html</a>
<li><a href="umlClass.html">umlClass.html</a>
<li><a href="updateDemo.html">updateDemo.html</a>
<li><a href="virtualized.html">virtualized.html</a>
<li><a href="virtualizedForceLayout.html">virtualizedForceLayout.html</a>
<li><a href="virtualizedTree.html">virtualizedTree.html</a>
<li><a href="virtualizedTreeLayout.html">virtualizedTreeLayout.html</a>
<li><a href="visualTree.html">visualTree.html</a>
<li><a href="visualTreeGrouping.html">visualTreeGrouping.html</a>
</ul>
<ul>
<li><a href="../extensions/BPMN.html">BPMN.html</a>
<li><a href="../extensions/CheckBoxes.html">CheckBoxes.html</a>
<li><a href="../extensions/ColumnResizing.html">ColumnResizing.html</a>
<li><a href="../extensions/CurvedLinkReshaping.html">CurvedLinkReshaping.html</a>
<li><a href="../extensions/DataInspector.html">DataInspector.html</a>
<li><a href="../extensions/DebugInspector.html">DebugInspector.html</a>
<li><a href="../extensions/Dimensioning.html">Dimensioning.html</a>
<li><a href="../extensions/DragCreating.html">DragCreating.html</a>
<li><a href="../extensions/DragZooming.html">DragZooming.html</a>
<li><a href="../extensions/Fishbone.html">Fishbone.html</a>
<li><a href="../extensions/FloorPlanEditor.html">FloorPlanEditor.html</a>
<li><a href="../extensions/FloorPlanMonitor.html">FloorPlanMonitor.html</a>
<li><a href="../extensions/FreehandDrawing.html">FreehandDrawing.html</a>
<li><a href="../extensions/index.html">index.html</a>
<li><a href="../extensions/Inspector.html">Inspector.html</a>
<li><a href="../extensions/LinkLabelDragging.html">LinkLabelDragging.html</a>
<li><a href="../extensions/LinkShifting.html">LinkShifting.html</a>
<li><a href="../extensions/LinkShifting2.html">LinkShifting2.html</a>
<li><a href="../extensions/NodeLabelDragging.html">NodeLabelDragging.html</a>
<li><a href="../extensions/Parallel.html">Parallel.html</a>
<li><a href="../extensions/PolygonDrawing.html">PolygonDrawing.html</a>
<li><a href="../extensions/PolygonDrawing2.html">PolygonDrawing2.html</a>
<li><a href="../extensions/PolylineLinking.html">PolylineLinking.html</a>
<li><a href="../extensions/PortShifting.html">PortShifting.html</a>
<li><a href="../extensions/RealtimeDragSelecting.html">RealtimeDragSelecting.html</a>
<li><a href="../extensions/Robot.html">Robot.html</a>
<li><a href="../extensions/ScrollingTable.html">ScrollingTable.html</a>
<li><a href="../extensions/Serpentine.html">Serpentine.html</a>
<li><a href="../extensions/SnapLinkReshaping.html">SnapLinkReshaping.html</a>
<li><a href="../extensions/Spiral.html">Spiral.html</a>
<li><a href="../extensions/Table.html">Table.html</a>
<li><a href="../extensions/TreeMap.html">TreeMap.html</a>
</ul>
</body>
</html>