index.html (2113B)
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 <!--[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.threshold.js"></script> 11 <script type="text/javascript"> 12 13 $(function() { 14 15 var d1 = []; 16 for (var i = 0; i <= 60; i += 1) { 17 d1.push([i, parseInt(Math.random() * 30 - 10)]); 18 } 19 20 function plotWithOptions(t) { 21 $.plot("#placeholder", [{ 22 data: d1, 23 color: "rgb(30, 180, 20)", 24 threshold: { 25 below: t, 26 color: "rgb(200, 20, 30)" 27 }, 28 lines: { 29 steps: true 30 } 31 }]); 32 } 33 34 plotWithOptions(0); 35 36 $(".controls button").click(function (e) { 37 e.preventDefault(); 38 var t = parseFloat($(this).text().replace("Threshold at ", "")); 39 plotWithOptions(t); 40 }); 41 42 // Add the Flot version string to the footer 43 44 $("#footer").prepend("Flot " + $.plot.version + " – "); 45 }); 46 47 </script> 48 </head> 49 <body> 50 51 <div id="header"> 52 <h2>Thresholds</h2> 53 </div> 54 55 <div id="content"> 56 57 <div class="demo-container"> 58 <div id="placeholder" class="demo-placeholder"></div> 59 </div> 60 61 <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> 62 63 <p class="controls"> 64 <button>Threshold at 5</button> 65 <button>Threshold at 0</button> 66 <button>Threshold at -2.5</button> 67 </p> 68 69 </div> 70 71 <div id="footer"> 72 Copyright © 2007 - 2013 IOLA and Ole Laursen 73 </div> 74 75 </body> 76 </html>