Denis C. Bauer

I have been playing with HTML5 for my new tool for alignment comparisons. To visualize the graphs I’m using flotr2 by HumbleSoftware.

Which produces an image like this — on the fly and without any actual graphic files:

The first thing you need to include in your page is the library. You can do that by either linking to a local file, linking to the HumbleSoftware file like so

<script type="text/javascript" src="http://www.humblesoftware.com/static/js/flotr2.min.js"></script>

or just pasting the content in the html

<script type="text/javascript">[content goes here]</script>

The next thing you need is the definition of the actual graph and its data


<script type="text/javascript">
(function basic_bars(container, horizontal) {
var horizontal = horizontal ? true : false,
d1=[[-0.100000,1288.000000],[0.900000,3693.000000],[1.900000,13324.000000],[2.900000,5110.000000],[3.900000,5062.000000],[4.900000,2281.000000],[5.900000,893.000000],[6.900000,493.000000],[7.900000,476.000000]],
d2=[[0.150000,25049.000000],[1.150000,2035.000000],[2.150000,4093.000000],[3.150000,628.000000],[4.150000,433.000000],[5.150000,201.000000],[6.150000,109.000000],[7.150000,73.000000],[8.150000,73.000000]],
point, i;
data = [{data:d1, label: "Original"}, {data:d2,label:"Corrected"}];
graph=Flotr.draw(container, data, {
legend: { position: "te"},
bars: {show: true, horizontal: horizontal, shadowSize: 0, barWidth: 0.250000},
mouse: {track: true, relative: true},
xaxis: {min: -1, max: 9, title: "# Mismatches"},
yaxis: {title: "# Reads",},
HtmlText: false,
});
})(document.getElementById("Mismatches"));</script>


There is a little bit of trickery to get the bars from the two different methods center around their common x-axis tick.

And finally the div tag so say where the image goes

<div id="Mismatches" style="width : 600px; height: 384px; margin: 8px auto;"></div>


Note that the document.getElementById and the id in the div need to have the same name.

These are the standards used, which you need to change to customize your plot.

Extensions

Now in order to use the spread sheet function in the formatting it was intended to be, you need to also include the file content of https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css or include the css on the humbleSoftware webpage like so

<link rel="stylesheet" type="text/css" href="http://www.humblesoftware.com/static/css/hsd-flotr2.css" />

And enable the spreadsheet: {show:true}

For the image download as pngs or jpgs to work you need to include jquery as well, like so

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And add a form to access the graph element you drew with flotr2. E.g.

<div>Download Image</div>
<div>
<form name="image-download" id="image-download" action="" onsubmit="return false">
<label><input name="format" value="png" checked="checked" type="radio"> PNG</label>
<label><input name="format" value="jpeg" type="radio"> JPEG</label>
<button name="to-image" onclick="CurrentExample('to-image')">To Image</button>
<button name="download" onclick="CurrentExample('download')">Download</button>
<button name="reset" onclick="CurrentExample('reset')">Reset</button>
</form>
</div>

And add this function after your graph in the basic_bars-fuction

this.CurrentExample = function(operation) {
var format = $("#image-download input:radio[name=format]:checked").val();
if (Flotr.isIE && Flotr.isIE < 9) {
alert("Your browser doesn't allow you to get a bitmap image from the plot, " + "you can only get a VML image that you can use in Microsoft Office.<br />");
}
if (operation == "to-image") {
graph.download.saveImage(format, null, null, true);
} else if (operation == "download") {
graph.download.saveImage(format);
} else if (operation == "reset") {
graph.download.restoreCanvas();
}
};
return graph;

See this stand-alone example.