index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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: Thresholds</title>
  6. <link href="../examples.css" rel="stylesheet" type="text/css">
  7. <script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
  8. <script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
  9. <script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
  10. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
  11. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
  12. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
  13. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
  14. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
  15. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
  16. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
  17. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
  18. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
  19. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
  20. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
  21. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
  22. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
  23. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
  24. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
  25. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
  26. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
  27. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
  28. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
  29. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
  30. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.threshold.js"></script>
  31. <script type="text/javascript">
  32. $(function() {
  33. var d1 = [];
  34. for (var i = 0; i <= 60; i += 1) {
  35. d1.push([i, parseInt(Math.random() * 30 - 10)]);
  36. }
  37. function plotWithOptions(t) {
  38. $.plot("#placeholder", [{
  39. data: d1,
  40. color: "rgb(30, 180, 20)",
  41. threshold: {
  42. below: t,
  43. color: "rgb(200, 20, 30)"
  44. },
  45. lines: {
  46. steps: true
  47. }
  48. }]);
  49. }
  50. plotWithOptions(0);
  51. $(".controls button").click(function (e) {
  52. e.preventDefault();
  53. var t = parseFloat($(this).text().replace("Threshold at ", ""));
  54. plotWithOptions(t);
  55. });
  56. // Add the Flot version string to the footer
  57. $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
  58. });
  59. </script>
  60. </head>
  61. <body>
  62. <div id="header">
  63. <h2>Thresholds</h2>
  64. </div>
  65. <div id="content">
  66. <div class="demo-container">
  67. <div id="placeholder" class="demo-placeholder"></div>
  68. </div>
  69. <p>With the threshold plugin, you can apply a specific color to the part of a data series below a threshold. This is can be useful for highlighting negative values, e.g. when displaying net results or what's in stock.</p>
  70. <p class="controls">
  71. <button>Threshold at 5</button>
  72. <button>Threshold at 0</button>
  73. <button>Threshold at -2.5</button>
  74. </p>
  75. </div>
  76. <div id="footer">
  77. Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
  78. </div>
  79. </body>
  80. </html>