index.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Flot Examples: Categories</title>
  6. <link href="../examples.css" rel="stylesheet" type="text/css">
  7. <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
  8. <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
  9. <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
  10. <script language="javascript" type="text/javascript" src="../../jquery.flot.categories.js"></script>
  11. <script type="text/javascript">
  12. $(function() {
  13. var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
  14. $.plot("#placeholder", [ data ], {
  15. series: {
  16. bars: {
  17. show: true,
  18. barWidth: 0.6,
  19. align: "center"
  20. }
  21. },
  22. xaxis: {
  23. mode: "categories",
  24. tickLength: 0
  25. }
  26. });
  27. // Add the Flot version string to the footer
  28. $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
  29. });
  30. </script>
  31. </head>
  32. <body>
  33. <div id="header">
  34. <h2>Categories</h2>
  35. </div>
  36. <div id="content">
  37. <div class="demo-container">
  38. <div id="placeholder" class="demo-placeholder"></div>
  39. </div>
  40. <p>With the categories plugin you can plot categories/textual data easily.</p>
  41. </div>
  42. <div id="footer">
  43. Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
  44. </div>
  45. </body>
  46. </html>