You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.0 KiB
HTML
86 lines
3.0 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../jquery.flot.errorbars.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="float:left; width:700px; height:500px;" id="flotplot"></div>
|
|
|
|
<script type="text/javascript" language="javascript">
|
|
$(function () {
|
|
|
|
function drawArrow(ctx, x, y, radius){
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + radius, y + radius);
|
|
ctx.lineTo(x, y);
|
|
ctx.lineTo(x - radius, y + radius);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawSemiCircle(ctx, x, y, radius){
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI, false);
|
|
ctx.moveTo(x - radius, y);
|
|
ctx.lineTo(x + radius, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
//data1
|
|
var data1 = [[1,1,.5,.1,.3], [2,2,.3,.5,.2], [3,3,.9,.5,.2],
|
|
[1.5,-.05,.5,.1,.3], [3.15,1.,.5,.1,.3],
|
|
[2.5,-1.,.5,.1,.3]];
|
|
var data1_points = {
|
|
show: true,
|
|
radius: 5,
|
|
fillColor: "blue",
|
|
errorbars: "xy",
|
|
xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"},
|
|
yerr: {show: true, color: "red", upperCap: "-"}
|
|
};
|
|
|
|
//data2
|
|
var data2 = [[.7,3,.2,.4], [1.5,2.2,.3,.4], [2.3,1,.5,.2]];
|
|
var data2_points = {
|
|
show: true,
|
|
radius: 5,
|
|
errorbars: "y",
|
|
yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle}
|
|
};
|
|
|
|
//data3
|
|
var data3 = [[1,2,.4], [2,0.5,.3], [2.7,2,.5]];
|
|
var data3_points = {
|
|
//do not show points
|
|
radius: 0,
|
|
errorbars: "y",
|
|
yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5}
|
|
};
|
|
|
|
//data4
|
|
var data4 = [[1.3, 1], [1.75, 2.5], [2.5, 0.5]];
|
|
var data4_errors = [0.1, 0.4, 0.2];
|
|
for (var i=0; i<data4.length; i++)
|
|
data4_errors[i] = data4[i].concat(data4_errors[i])
|
|
|
|
//plot
|
|
var data = [{color: "blue", points: data1_points, data: data1, label: "data1"},
|
|
{color: "red", points: data2_points, data: data2, label: "data2"},
|
|
{color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"},
|
|
// bars with errors
|
|
{color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"},
|
|
{color: "orange", points: data3_points, data: data4_errors}];
|
|
var options = {legend: {position: "sw", show: true}, series: {lines: {show: false}},
|
|
xaxis: {min: 0.6, max: 3.1}, yaxis: {min: 0, max: 3.5},
|
|
zoom: {interactive: true}, pan: {interactive: true}
|
|
};
|
|
|
|
$.plot($("#flotplot"), data , options);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|