DIR : /home/kozerus/public_html/ko/minimalJSON.html

/home/kozerus/public_html/ko

<!doctype html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<script src="/js/gojs/go.js"></script>
<link href="/js/gojs/assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="/js/gojs/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/gojs/gojs_jquery182_min.js" ></script>

<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, avoid $ due to jQuery

    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", "color")),
        $$(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

    // The previous initialization is the same as the minimal.html sample.
    // Here we request JSON-format text data from the server, in this case from a static file.
    jQuery.getJSON("minimal.json", load);
  }

  function load(jsondata) {
    // create the model from the data in the JavaScript object parsed from JSON text
    myDiagram.model = new go.GraphLinksModel(jsondata["nodes"], jsondata["links"]);
  }
<//script>
</head>
<body onload="init()">
<div id="sample">
  <p>Minimal <b>GoJS</b> Sample, reading JSON data</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>
  <p>
  This is just like the <a href="minimal.html">Minimal</a> sample, but this reads JSON data from the server.
  </p>
  <p>
  Here is the contents of the <code>minimal.json</code> file:
  </p>
  <pre>
{
  "nodes":[
{ "key":"Alpha", "color":"lightblue" },
{ "key":"Beta", "color":"orange" },
{ "key":"Gamma", "color":"lightgreen" },
{ "key":"Delta", "color":"pink" }
  ],
  "links":[
{ "from":"Alpha", "to":"Beta" },
{ "from":"Alpha", "to":"Gamma" },
{ "from":"Beta", "to":"Beta" },
{ "from":"Gamma", "to":"Delta" },
{ "from":"Delta", "to":"Alpha" }
  ]
}
  </pre>
  <p>
  Because this is a "minimal" sample, this sample has no way to update the data on the server.
  </p>
</div>
</body>
</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer