resize.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  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. <style>
  12. body { width: 100%; }
  13. #graph { width: 100%; }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>Formatting Dates YYYY-MM-DD</h1>
  18. <div id="graph"></div>
  19. <pre id="code" class="prettyprint linenums">
  20. /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
  21. var day_data = [
  22. {"period": "2012-10-01", "licensed": 3407, "sorned": 660},
  23. {"period": "2012-09-30", "licensed": 3351, "sorned": 629},
  24. {"period": "2012-09-29", "licensed": 3269, "sorned": 618},
  25. {"period": "2012-09-20", "licensed": 3246, "sorned": 661},
  26. {"period": "2012-09-19", "licensed": 3257, "sorned": 667},
  27. {"period": "2012-09-18", "licensed": 3248, "sorned": 627},
  28. {"period": "2012-09-17", "licensed": 3171, "sorned": 660},
  29. {"period": "2012-09-16", "licensed": 3171, "sorned": 676},
  30. {"period": "2012-09-15", "licensed": 3201, "sorned": 656},
  31. {"period": "2012-09-10", "licensed": 3215, "sorned": 622}
  32. ];
  33. Morris.Line({
  34. element: 'graph',
  35. data: day_data,
  36. xkey: 'period',
  37. ykeys: ['licensed', 'sorned'],
  38. labels: ['Licensed', 'SORN'],
  39. resize: true
  40. });
  41. </pre>
  42. </body>