<html>
<head>
  <title>Graph | Graphviz Gallery</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../../dist/vis.js"></script>

  <style type="text/css">
    p {
      width: 600px;
    }
    html, body, select {
      font: 11pt arial;
    }
    #mygraph {
      width: 100%;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<script>
  if (location.href.substr(0, 5) == 'file:') {
    document.write(
        '<p style="color: red;">' +
            'Error: Cannot fetch the example data because of security ' +
            'restrictions in JavaScript. Run the example from a server ' +
            'instead of as a local file to resolve this problem. ' +
            'Alternatively, you can load DOT graphs in ' +
            'the <a href="../15_dot_language_playground.html" ' +
            'style="color:red;">playground</a>.' +
            '</p>');
  }
</script>

<p>
  The following examples are unmodified copies from the
  <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
</p>
<p>
  Note that some style attributes of Graphviz are not supported by vis.js,
  and that vis.js offers options not supported by Graphviz (which could make
  some examples look much nicer).
</p>

<p>
  <label for="url">Select an example:</label>
  <select id="url" onchange="loadData()">
    <option value="data/fsm.gv.txt">fsm</option>
    <option value="data/hello.gv.txt">hello</option>
    <option value="data/process.gv.txt">process</option>
    <option value="data/siblings.gv.txt">siblings</option>
    <option value="data/softmaint.gv.txt">softmaint</option>
    <option value="data/traffic_lights.gv.txt">traffic_lights</option>
    <option value="data/transparency.gv.txt">transparency</option>
    <option value="data/twopi2.gv.txt">twopi2</option>
    <option value="data/unix.gv.txt">unix</option>
    <option value="data/world.gv.txt">world</option>
  </select>
</p>

<div id="mygraph"></div>
<script type="text/javascript">
  var container = document.getElementById('mygraph');
  var url = document.getElementById('url');
  var graph = new vis.Graph(container);

  function loadData () {
    $.ajax({
      type: "GET",
      url: url.value
    }).done(function(data) {
          graph.setOptions({
            stabilize: false
          });
          graph.setData( {
            dot: data
          });
        });
  }
  loadData();
</script>
</body>
</html>