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.

50 lines
1.5 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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <h2>Graph2d | Bar Graph With End Example</h2>
  15. <div style="width:700px; font-size:14px; text-align: justify;">
  16. This example shows how you can plot a bar chart and supply an end value to have it fill.
  17. </div>
  18. <br />
  19. <div id="visualization"></div>
  20. <script type="text/javascript">
  21. var container = document.getElementById('visualization');
  22. var items = [
  23. {x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
  24. {x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
  25. {x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
  26. {x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
  27. {x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
  28. {x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
  29. ];
  30. var dataset = new vis.DataSet(items);
  31. var options = {
  32. style:'bar',
  33. drawPoints: false,
  34. dataAxis: {
  35. icons:true
  36. },
  37. orientation:'top',
  38. start: '2014-06-10',
  39. end: '2014-06-18'
  40. };
  41. var graph2d = new vis.Graph2d(container, items, options);
  42. </script>
  43. </body>
  44. </html>