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.

52 lines
1.4 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Bar Graph Example</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. </style>
  10. <script src="../../dist/vis.js"></script>
  11. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <h2>Graph2D | Bar Graph Example</h2>
  15. <div style="width:700px; font-size:14px; text-align: justify;">
  16. This example shows the most the same data as the first example, except we plot the data as bars! The
  17. dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
  18. styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
  19. </div>
  20. <br />
  21. <div id="visualization"></div>
  22. <script type="text/javascript">
  23. var container = document.getElementById('visualization');
  24. var items = [
  25. {x: '2014-06-11', y: 10},
  26. {x: '2014-06-12', y: 25},
  27. {x: '2014-06-13', y: 30},
  28. {x: '2014-06-14', y: 10},
  29. {x: '2014-06-15', y: 15},
  30. {x: '2014-06-16', y: 30}
  31. ];
  32. var dataset = new vis.DataSet(items);
  33. var options = {
  34. style:'bar',
  35. drawPoints: false,
  36. dataAxis: {
  37. icons:true
  38. },
  39. orientation:'top',
  40. start: '2014-06-10',
  41. end: '2014-06-18'
  42. };
  43. var graph2d = new vis.Graph2d(container, items, options);
  44. </script>
  45. </body>
  46. </html>