gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
304 lines (272 loc) • 12.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="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other visual graph types."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. --> <title> GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software </title>
</head>
<body>
<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="my-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 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 class="pt-4 px-2 lg:px-4 pb-16 w-full overflow-hidden">
<h1>GoJS Samples</h1>
<div class="row">
<div class="col-md-6">
<p>
Our samples demonstrate how to build several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.
</p>
<p>
If you are done looking around and are ready to experiment with GoJS, <a href="../learn/index.html">read the getting started tutorial.</a>
</p>
<p>
There is a React sample on GitHub at: <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic">gojs-react-basic</a>,
and an Angular sample at: <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic">gojs-angular-basic</a>.
See more at <a href="../projects/index.html">Projects</a>.
</p>
</div>
<div class="col-md-6">
<p>
If you are looking for examples of a particular GoJS method or property, you can search the source code of all samples and extensions and documentation on GitHub:
</p>
<p>
<input id="searchInput" type="text" placeholder="setDataProperty" />
<a id="searchAnchor" href="https://github.com/NorthwoodsSoftware/GoJS/search?q=setDataProperty&type=Code" target="_blank" >
<span id="searchButton" class="button">Search source code</span>
</a>
</p>
</div>
</div>
<div>
<div id="tagsDiv">
</div>
<div id="samplesDiv" class="flex flex-wrap">
</div>
<div>
<h3><a href="all.html">Complete list of all samples</a></h3>
</div>
</div>
</div>
<script src="indexList.js"></script>
<script>
var searchInput = document.getElementById('searchInput');
var searchAnchor = document.getElementById('searchAnchor');
searchInput.addEventListener('input', e => {
var searchterm = searchInput.value;
if (searchterm === '') searchterm = "setDataProperty";
searchAnchor.href = "https://github.com/NorthwoodsSoftware/GoJS/search?q=" + searchterm + "\&type=Code";
});
searchInput.addEventListener('keydown', e => {
if (e.key === "Enter") searchAnchor.click();
});
var selectedTag = "all";
buildTags();
document.addEventListener("DOMContentLoaded", event => changeHash());
window.addEventListener("hashchange", event => changeHash());
function buildTags() {
var tagDiv = document.getElementById("tagsDiv");
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
var tagButton = document.createElement('button');
if (tag !== selectedTag) {
tagButton.className = "button";
} else {
tagButton.className = "button bg-nwoods-secondary";
}
tagButton.id = tag + "Btn";
tagButton.value = tag;
tagButton.innerHTML = tag;
tagButton.onclick = onTagClick;
tagDiv.appendChild(tagButton);
}
}
function onTagClick(e) {
this.blur(); // we want to be able to see the styles, so blur once we've clicked
if (selectedTag === this.value) return;
window.location.hash = "#" + this.value;
}
function changeHash() {
document.getElementById(selectedTag + "Btn").className = "button"; // clear current selected tag's style
hash = window.location.hash;
if (tags.indexOf(hash.substring(1)) < 0) {
selectedTag = "all";
} else {
selectedTag = hash.substring(1);
}
document.getElementById(selectedTag + "Btn").className = "button bg-nwoods-secondary"; // set new selected tag's style
buildSamples();
}
function buildSamples() {
var sampleListDiv = document.getElementById("samplesDiv");
sampleListDiv.innerHTML = ""; // empty the div to start off ??
var filteredSamples = filterSamples();
if (filteredSamples.length === 0) return;
for (var i = 0; i < filteredSamples.length; i++) {
var sample = filteredSamples[i];
var samplediv = document.createElement('div');
samplediv.className = "sample-item";
var inner = document.createElement('div');
inner.className = "sample-item-inner";
var a = document.createElement('a');
a.href = sample[0] + '.html';
var img = document.createElement('img');
img.src = '../assets/images/screenshots/' + sample[3] + '.png';
img.alt = sample[2];
a.appendChild(img);
var title = document.createElement('h2');
title.textContent = sample[1];
a.appendChild(title);
var desc = document.createElement('p');
desc.textContent = sample[2];
inner.appendChild(a);
inner.appendChild(desc);
samplediv.appendChild(inner);
sampleListDiv.appendChild(samplediv);
}
}
function filterSamples() {
var filteredSamples = [];
for (var i = 0; i < arr.length; i++) {
var sample = arr[i];
if (selectedTag === "all" || sample[4].indexOf(selectedTag) >= 0) {
filteredSamples.push(sample);
}
}
return filteredSamples;
}
</script>
<link rel="prefetch" as="script" href="../release/go.js">
</div>
</div>
<footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto px-8">
<div class="w-full py-6">
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="../samples/index.html">Samples</a>
</li>
<li>
<a href="../learn/index.html">Learn</a>
</li>
<li>
<a href="../intro/index.html">Intro</a>
</li>
<li>
<a href="../api/index.html">API</a>
</li>
<li>
<a href="../changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs">Forum</a>
</li>
<li>
<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
</li>
<li>
<a 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>
<li>
<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://www.nwoods.com">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/about.html">About Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a>
</li>
</ul>
</li>
</ul>
<p class="text-sm text-gray-100 md:mb-6">
Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
</p>
</div>
</div>
</footer> </body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
</script>
</html>