gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
225 lines (212 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="A Gantt chart that supports zooming into the timeline."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
<title>Gantt chart</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="mb-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden lg:text-base sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div class="p-4 w-full">
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // Diagram refers to its DIV HTML element by id
{
_widthFactor: 1, // a scale for the nodes' positions and widths
isReadOnly: true, // deny the user permission to alter the diagram or zoom in or out
allowZoom: false,
"grid.visible": true, // display a grid in the background of the diagram
"grid.gridCellSize": new go.Size(30, 150)
});
// create the template for the standard nodes
myDiagram.nodeTemplateMap.add("",
$(go.Node, "Auto",
// links come from the right and go to the left side of the top of the node
{ fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0) },
$(go.Shape, "Rectangle",
{ height: 15 },
new go.Binding("fill", "color"),
new go.Binding("width", "width", function(w) { return scaleWidth(w); })),
$(go.TextBlock,
{ margin: 2, alignment: go.Spot.Left },
new go.Binding("text", "key")),
// using a function in the Binding allows the value to
// change when Diagram.updateAllTargetBindings is called
new go.Binding("location", "loc",
function(l) { return new go.Point(scaleWidth(l.x), l.y); })
));
// create the template for the start node
myDiagram.nodeTemplateMap.add("start",
$(go.Node,
{ fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
$(go.Shape, "Diamond",
{ height: 15, width: 15 }),
// make the location of the start node is not scalable
new go.Binding("location", "loc")
));
// create the template for the end node
myDiagram.nodeTemplateMap.add("end",
$(go.Node,
{ fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
$(go.Shape, "Diamond",
{ height: 15, width: 15 }),
// make the location of the end node (with location.x < 0) scalable
new go.Binding("location", "loc",
function(l) {
if (l.x >= 0) return new go.Point(scaleWidth(l.x), l.y);
else return l;
})
));
// create the link template
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.Orthogonal,
corner: 3, toShortLength: 2,
selectable: false
},
$(go.Shape,
{ strokeWidth: 2 }),
$(go.Shape,
{ toArrow: "OpenTriangle" })
);
// add the nodes and links to the model
myDiagram.model = new go.GraphLinksModel(
[ // node data
{ key: "a", color: "coral", width: 120, loc: new go.Point(scaleWidth(0), 40) },
{ key: "b", color: "turquoise", width: 160, loc: new go.Point(scaleWidth(0), 60) },
{ key: "c", color: "coral", width: 150, loc: new go.Point(scaleWidth(120), 80) },
{ key: "d", color: "turquoise", width: 190, loc: new go.Point(scaleWidth(120), 100) },
{ key: "e", color: "coral", width: 150, loc: new go.Point(scaleWidth(270), 120) },
{ key: "f", color: "turquoise", width: 130, loc: new go.Point(scaleWidth(310), 140) },
{ key: "g", color: "coral", width: 155, loc: new go.Point(scaleWidth(420), 160) },
{ key: "begin", category: "start", loc: new go.Point(-15, 20) },
{ key: "end", category: "end", loc: new go.Point(scaleWidth(575), 180) }
],
[ // link data
{ from: "begin", to: "a" },
{ from: "begin", to: "b" },
{ from: "a", to: "c" },
{ from: "a", to: "d" },
{ from: "b", to: "e" },
{ from: "c", to: "e" },
{ from: "d", to: "f" },
{ from: "e", to: "g" },
{ from: "f", to: "end" },
{ from: "g", to: "end" }
]);
// add a Graduated panel to show the dates, globally scoped
dateScale =
$(go.Part, "Graduated",
{
graduatedTickUnit: 1, graduatedMin: 0, graduatedMax: 3,
pickable: false, location: new go.Point(0, 0)
},
$(go.Shape,
{ name: "line", strokeWidth: 0, geometryString: "M0 0 H" + scaleWidth(450) }
),
$(go.TextBlock,
{
name: "labels",
font: "10pt sans-serif",
alignmentFocus: new go.Spot(0, 0, -3, -3),
graduatedFunction: function(v) {
var d = new Date(2017, 6, 23);
d.setDate(d.getDate() + v * 7);
// format date output to string
var options = { month: "short", day: "2-digit" };
return d.toLocaleDateString("en-US", options);
}
}
)
);
myDiagram.add(dateScale);
}
// scale the number according to the current widthFactor
function scaleWidth(num) {
return num * myDiagram._widthFactor;
}
// change the grid's cell size and the widthFactor,
// then update Bindings to scale the widths and positions of nodes,
// as well as the width of the date scale
function rescale() {
var val = parseFloat(document.getElementById("widthSlider").value);
myDiagram.startTransaction("rescale");
myDiagram.grid.gridCellSize = new go.Size(val, 150);
myDiagram._widthFactor = val / 30;
myDiagram.updateAllTargetBindings();
// update width of date scale and maybe change interval of labels if too small
var width = scaleWidth(450);
dateScale.findObject("line").geometryString = "M0 0 H" + width;
if (width >= 140) dateScale.findObject("labels").interval = 1;
if (width < 140) dateScale.findObject("labels").interval = 2;
if (width < 70) dateScale.findObject("labels").interval = 4;
myDiagram.commitTransaction("rescale");
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
<div id="slider">
<label>Spacing:</label>
<input id="widthSlider" type="range" min="2" max="90" value="30" onchange="rescale()"/>
</div>
<p>
This sample demonstrates a simple Gantt chart. Gantt charts are used to illustrate project schedules, denoting the start and end dates for terminal and summary elements of the project.
</p>
<p>
You can zoom in on the diagram by changing the "Spacing" value,
which scales the diagram using a data binding function for nodes' widths and locations.
This is in place of changing the <a>Diagram.scale</a>.
</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>