bar.html 1.0 KB

1234567891011121314151617181920212223242526272829303132
  1. <!doctype html>
  2. <head>
  3. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  4. <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
  5. <script src="../morris.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
  7. <script src="lib/example.js"></script>
  8. <link rel="stylesheet" href="lib/example.css">
  9. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
  10. <link rel="stylesheet" href="../morris.css">
  11. </head>
  12. <body>
  13. <h1>Bar charts</h1>
  14. <div id="graph"></div>
  15. <pre id="code" class="prettyprint linenums">
  16. // Use Morris.Bar
  17. Morris.Bar({
  18. element: 'graph',
  19. data: [
  20. {x: '2011 Q1', y: 3, z: 2, a: 3},
  21. {x: '2011 Q2', y: 2, z: null, a: 1},
  22. {x: '2011 Q3', y: 0, z: 2, a: 4},
  23. {x: '2011 Q4', y: 2, z: 4, a: 3}
  24. ],
  25. xkey: 'x',
  26. ykeys: ['y', 'z', 'a'],
  27. labels: ['Y', 'Z', 'A']
  28. }).on('click', function(i, row){
  29. console.log(i, row);
  30. });
  31. </pre>
  32. </body>