index.html (3697B)
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: Error Bars</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.errorbars.js"></script> 11 <script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script> 12 <script type="text/javascript"> 13 14 $(function() { 15 16 function drawArrow(ctx, x, y, radius){ 17 ctx.beginPath(); 18 ctx.moveTo(x + radius, y + radius); 19 ctx.lineTo(x, y); 20 ctx.lineTo(x - radius, y + radius); 21 ctx.stroke(); 22 } 23 24 function drawSemiCircle(ctx, x, y, radius){ 25 ctx.beginPath(); 26 ctx.arc(x, y, radius, 0, Math.PI, false); 27 ctx.moveTo(x - radius, y); 28 ctx.lineTo(x + radius, y); 29 ctx.stroke(); 30 } 31 32 var data1 = [ 33 [1,1,.5,.1,.3], 34 [2,2,.3,.5,.2], 35 [3,3,.9,.5,.2], 36 [1.5,-.05,.5,.1,.3], 37 [3.15,1.,.5,.1,.3], 38 [2.5,-1.,.5,.1,.3] 39 ]; 40 41 var data1_points = { 42 show: true, 43 radius: 5, 44 fillColor: "blue", 45 errorbars: "xy", 46 xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"}, 47 yerr: {show: true, color: "red", upperCap: "-"} 48 }; 49 50 var data2 = [ 51 [.7,3,.2,.4], 52 [1.5,2.2,.3,.4], 53 [2.3,1,.5,.2] 54 ]; 55 56 var data2_points = { 57 show: true, 58 radius: 5, 59 errorbars: "y", 60 yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle} 61 }; 62 63 var data3 = [ 64 [1,2,.4], 65 [2,0.5,.3], 66 [2.7,2,.5] 67 ]; 68 69 var data3_points = { 70 //do not show points 71 radius: 0, 72 errorbars: "y", 73 yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5} 74 }; 75 76 var data4 = [ 77 [1.3, 1], 78 [1.75, 2.5], 79 [2.5, 0.5] 80 ]; 81 82 var data4_errors = [0.1, 0.4, 0.2]; 83 for (var i = 0; i < data4.length; i++) { 84 data4_errors[i] = data4[i].concat(data4_errors[i]) 85 } 86 87 var data = [ 88 {color: "blue", points: data1_points, data: data1, label: "data1"}, 89 {color: "red", points: data2_points, data: data2, label: "data2"}, 90 {color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"}, 91 // bars with errors 92 {color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"}, 93 {color: "orange", points: data3_points, data: data4_errors} 94 ]; 95 96 $.plot($("#placeholder"), data , { 97 legend: { 98 position: "sw", 99 show: true 100 }, 101 series: { 102 lines: { 103 show: false 104 } 105 }, 106 xaxis: { 107 min: 0.6, 108 max: 3.1 109 }, 110 yaxis: { 111 min: 0, 112 max: 3.5 113 }, 114 zoom: { 115 interactive: true 116 }, 117 pan: { 118 interactive: true 119 } 120 }); 121 122 // Add the Flot version string to the footer 123 124 $("#footer").prepend("Flot " + $.plot.version + " – "); 125 }); 126 127 </script> 128 </head> 129 <body> 130 131 <div id="header"> 132 <h2>Error Bars</h2> 133 </div> 134 135 <div id="content"> 136 137 <div class="demo-container"> 138 <div id="placeholder" class="demo-placeholder"></div> 139 </div> 140 141 <p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p> 142 143 </div> 144 145 <div id="footer"> 146 Copyright © 2007 - 2013 IOLA and Ole Laursen 147 </div> 148 149 </body> 150 </html>