area-as-line.html 1.0 KB

12345678910111213141516171819202122232425262728293031
  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>Area charts behaving like line charts</h1>
  14. <div id="graph"></div>
  15. <pre id="code" class="prettyprint linenums">
  16. // Use Morris.Area instead of Morris.Line
  17. Morris.Area({
  18. element: 'graph',
  19. behaveLikeLine: true,
  20. data: [
  21. {x: '2011 Q1', y: 3, z: 3},
  22. {x: '2011 Q2', y: 2, z: 1},
  23. {x: '2011 Q3', y: 2, z: 4},
  24. {x: '2011 Q4', y: 3, z: 3}
  25. ],
  26. xkey: 'x',
  27. ykeys: ['y', 'z'],
  28. labels: ['Y', 'Z']
  29. });
  30. </pre>
  31. </body>