vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

51 lines
2.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  5. <meta content="utf-8" http-equiv="encoding">
  6. <title>Graph2d | Basic Example</title>
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. }
  11. </style>
  12. <script src="../../dist/vis.js"></script>
  13. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  14. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  15. <body>
  16. <h2>Graph2d | Basic Example</h2>
  17. <div style="width:700px; font-size:14px; text-align: justify;">
  18. This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
  19. In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
  20. There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
  21. create your own styling.
  22. <br /><br />
  23. Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
  24. In these examples however, we will focus on what's new in Graph2d!
  25. </div>
  26. <br />
  27. <div id="visualization"></div>
  28. <script type="text/javascript">
  29. var container = document.getElementById('visualization');
  30. var items = [
  31. {x: '2014-06-11', y: 10},
  32. {x: '2014-06-12', y: 25},
  33. {x: '2014-06-13', y: 30},
  34. {x: '2014-06-14', y: 10},
  35. {x: '2014-06-15', y: 15},
  36. {x: '2014-06-16', y: 30}
  37. ];
  38. var dataset = new vis.DataSet(items);
  39. var options = {
  40. start: '2014-06-10',
  41. end: '2014-06-18'
  42. };
  43. var graph2d = new vis.Graph2d(container, dataset, options);
  44. </script>
  45. </body>
  46. </html>