1#@!#!123s

: / home / ensad / www / gestiondepersonal / web / bower_components / vis / examples / graph2d /
Filename : 01_basic.html
back
<!DOCTYPE HTML>
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Basic Example</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
  This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
  In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
  There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
  create your own styling.
  <br /><br />
  Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
  In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>

<script type="text/javascript">

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-11', y: 10},
    {x: '2014-06-12', y: 25},
    {x: '2014-06-13', y: 30},
    {x: '2014-06-14', y: 10},
    {x: '2014-06-15', y: 15},
    {x: '2014-06-16', y: 30}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
    start: '2014-06-10',
    end: '2014-06-18'
  };
  var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>