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.

56 lines
2.1 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. <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>
  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. <br /><br />
  20. The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
  21. This example uses the default center alignment.
  22. </div>
  23. <br />
  24. <div id="visualization"></div>
  25. <script type="text/javascript">
  26. var container = document.getElementById('visualization');
  27. var items = [
  28. {x: '2014-06-11', y: 10},
  29. {x: '2014-06-12', y: 25},
  30. {x: '2014-06-13', y: 30},
  31. {x: '2014-06-14', y: 10},
  32. {x: '2014-06-15', y: 15},
  33. {x: '2014-06-16', y: 30}
  34. ];
  35. var dataset = new vis.DataSet(items);
  36. var options = {
  37. style:'bar',
  38. barChart: {width:50, align:'center'}, // align: left, center, right
  39. drawPoints: false,
  40. dataAxis: {
  41. icons:true
  42. },
  43. orientation:'top',
  44. start: '2014-06-10',
  45. end: '2014-06-18'
  46. };
  47. var graph2d = new vis.Graph2d(container, items, options);
  48. </script>
  49. </body>
  50. </html>