<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%= title %></title>
<link href="<%= BASENAME%>/layout.css" rel="stylesheet" type="text/css">
<!--[if IE]><script type="text/javascript" src="<%= BASENAME%>/excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="<%= BASENAME%>/jquery.min.js"></script>
<script type="text/javascript" src="<%= BASENAME%>/jquery.flot.js"></script>
<script type="text/javascript">
$(document).ready( function() {
// create some datasets
var data = <%= self.inspect%>;
// plot the graph into '#placeholder'
plot = $.plot(
$("#placeholder"),
data,
{ xaxis: {
label: <%= "\"#{@label[:X]}\"" or 'null'%>,
min: <%= @xlim[:min] or 'null'%>,
max: <%= @xlim[:max] or 'null'%>
},
yaxis: {
label: <%= "\"#{@label[:Y]}\"" or 'null'%>,
min: <%= @ylim[:min] or 'null'%>,
max: <%= @ylim[:max] or 'null'%>
},
hints: {
show: true,
hintFormatter: function( datapoint ) {
hintStr = "";
for( var key in datapoint ) {
if( key[0] == '_' ) { continue; } // skip internal members
hintStr += "<strong>" + key + ":</strong> " +
datapoint[key].toFixed(2) + "<br/>";
}
return hintStr;
} },
points: { show: <%= @options[:points] or 'true'%> },
lines: { show: <%= @options[:points] or 'true'%> },
legend: { position: '<%= @options[:legend_position] or 'sw'%>' },
grid: {
clickable: true,
hoverable: true,
hoverFill: '#444',
hoverRadius: 5
}
} );
// setup event handlers
$("#placeholder").bind( 'plotclick', function( e, pos ) {
if( !pos.selected ) { return; }
plot.highlight( pos.selected );
x = pos.selected.x.toFixed( 2 );
y = pos.selected.y.toFixed( 2 );
$("#result").text( 'You clicked on (' + x + ', ' + y + ')' );
} );
$("#placeholder").bind( 'plotmousemove', function( e, pos ) {
if( !pos.selected ) { return; }
plot.highlight( pos.selected );
} );
});
</script>
</head>
<body>
<h1><%= title %></h1>
<div id="placeholder" style="width: <%= @width %>px; height: <%= @height %>px;"></div>
<p><%= comment %></p>
<p><span id="result"></span></p>
</body>
</html>