<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Image Plots</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<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.image.js"></script>
<script type="text/javascript">
$(function() {
var data = [[["hs-2004-27-a-large-web.jpg", -10, -10, 10, 10]]];
var options = {
series: {
images: {
show: true
}
},
xaxis: {
min: -8,
max: 4
},
yaxis: {
min: -8,
max: 4
}
};
$.plot.image.loadDataImages(data, options, function () {
$.plot("#placeholder", data, options);
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Image Plots</h2>
</div>
<div id="content">