Created
May 13, 2014 15:14
-
-
Save simonsarris/5e045b69d760f31e25fc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Minimal GoJS Sample</title> | |
<!-- Copyright 1998-2014 by Northwoods Software Corporation. --> | |
<script src="http://gojs.net/latest/release/go.js"></script> | |
<link href="goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this --> | |
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework --> | |
<script id="code"> | |
function init() { | |
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this | |
var $ = go.GraphObject.make; // for conciseness in defining templates | |
myDiagram = $(go.Diagram, "myDiagram", // create a Diagram for the DIV HTML element | |
{ | |
initialContentAlignment: go.Spot.Center, // center the content | |
"undoManager.isEnabled": true // enable undo & redo | |
}); | |
// define a simple Node template | |
myDiagram.nodeTemplate = | |
$(go.Node, "Auto", // the Shape will go around the TextBlock | |
$(go.Shape, "RoundedRectangle", | |
// Shape.fill is bound to Node.data.color | |
new go.Binding("fill", "lv", function(v){ | |
if (v == 1) return go.GraphObject.make(go.Brush, go.Brush.Linear, { 0: "white", 1: "gold" }); | |
if (v == 2) return go.GraphObject.make(go.Brush, go.Brush.Linear, { 0: "white", 1: "skyblue" }); | |
if (v == 3) return go.GraphObject.make(go.Brush, go.Brush.Linear, { 0: "white", 1: "violet" }); | |
if (v >= 4) return go.GraphObject.make(go.Brush, go.Brush.Linear, { 0: "white", 1: "peru" }); | |
return "rgba(224,255,255,0.3)"; | |
}) | |
), | |
$(go.TextBlock, | |
{ margin: 3 }, // some room around the text | |
// TextBlock.text is bound to Node.data.key | |
new go.Binding("text", "key")) | |
); | |
// but use the default Link template, by not setting Diagram.linkTemplate | |
// create the model data that will be represented by Nodes and Links | |
myDiagram.model = new go.GraphLinksModel( | |
[ | |
{ lv: 1, key: "Alpha", color: "lightblue" }, | |
{ lv: 2, key: "Beta", color: "orange" }, | |
{ lv: 3, key: "Gamma", color: "lightgreen" }, | |
{ lv: 4, key: "Delta", color: "pink" }, | |
{ lv: 0.1, key: "Delta", color: "pink" } | |
], | |
[ | |
]); | |
} | |
</script> | |
</head> | |
<body onload="init()"> | |
<div id="sample"> | |
<p>Minimal <b>GoJS</b> Sample</p> | |
<!-- The DIV for the Diagram needs an explicit size or else we won't see anything. | |
Also add a border to help see the edges. --> | |
<div id="myDiagram" style="border: solid 1px black; width:400px; height:400px"></div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment