<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"> 
<title>Gnuplot 5.0 demo scripts run through the HTML canvas terminal</title>
<link type="text/css" href="gnuplot_demo.css" rel="stylesheet">
<link type="text/css" href="gnuplot_mouse.css" rel="stylesheet">
</head>

<body oncontextmenu="return false;">

<h2 align=center>Gnuplot 5.0 demo scripts run through the HTML canvas terminal<br>
    See also the demo output for the
    <a href="http://gnuplot.sourceforge.net/demo_5.0/">PNG</a> and
    <a href="http://gnuplot.sourceforge.net/demo_svg_5.0/">SVG</a> terminals.
</h2>
<canvas id="warning" width=1 height=1>
    <div class='box'><h2>Your browser may not support the HTML 5 canvas element</h2></div>
</canvas>

<p>
The canvas driver for gnuplot was contributed by Bruce Lueckenhoff and extended by Ethan Merritt (sfeam).
To view the results you need a browser that supports the HTML5 'canvas' element.
</p>


<table width="100%">
<tbody><tr valign="top">

<td rowspan=2>
    <h4>Basic 2D plot styles</h4>
    <ul>
    <li><a href="simple.html">simple&nbsp;functions</a></li>
    <li><a href="fillcrvs.html">filled&nbsp;curves</a></li>
    <li><a href="fillbetween.html">fill&nbsp;between&nbsp;curves</a></li>
    <li><a href="candlesticks.html">candlesticks</a></li>
    <li><a href="mgr.html">error bars</a></li>
    <li><a href="histograms.html">histograms</a> (<a href="histograms2.html">more</a>)</li>
    <li><a href="steps.html">step functions</a></li>
    <li><a href="multiaxis.html">multiple axis scales</a></li>
    <li><a href="using.html">mixing styles</a></li>
    <li><a href="pointsize.html">variable size points</a></li>
    <li><a href="parallel.html">parallel axis plots</a></li>
    <li><a href="param.html">parametric&nbsp;functions</a></li>
    <li><a href="piecewise.html">piecewise&nbsp;functions</a></li>
    <li><a href="vector.html">vector fields</a></li>
    <li><a href="circles.html">circles</a></li>
    <li><a href="boxplot.html">boxplots</a></li>
    <li><a href="rugplot.html">rug plot</a></li>
    </ul>

    <h4>Math functions</h4>
    <ul>
    <li><a href="approximate.html">approximation</a></li>
    <li><a href="spline.html">B-splines</a></li>
    <li><a href="airfoil.html">Bezier splines</a></li>
    <li><font color=gray>complex functions</font></li>
    <li><a href="prob2.html">probability</a></li>
    <li><a href="prob.html">probability (more)</a></li>
    <li><a href="random.html">random numbers</a></li>
    <li><a href="bivariat.html">recursion, etc...</a></li>
    <li><a href="stats.html">data statistics</a></li>
    </ul>

</td>

<td rowspan=2>
    <h4>3D plots and surfaces</h4>
    <ul>
    <li><a href="surface1.html">surfaces 1</a></li>
    <li><a href="surface2.html">surfaces 2</a></li>
    <li><a href="contours.html">contours</a></li>
    <li><a href="singulr.html">singularities</a></li>
    <li><a href="hidden.html">hidden surfaces</a></li>
    <li><a href="pm3d.html">pm3d coloring</a></li>
    <li><a href="hidden2.html">pm3d hidden surfaces</a></li>
    <li><a href="world2.html">3D mapping</a></li>
    </ul>

    <h4>Coordinate and<br> axis transforms</h4>
    <ul>
    <li><a href="linkedaxes.html">linked axes</a></li>
    <li><a href="polar.html">polar coords</a></li>
    <li><a href="poldat.html">polar data</a></li>
    <li><a href="world.html">cylindrical/spherical</a></li>
    <li><a href="timedat.html">time/date coords</a></li>
    </ul>

    <h4>Binary and Image data </h4>
    <ul>
    <li><a href="binary.html">binary data</a></li>
    <li><a href="rgbalpha.html">RGB + alpha channel</a></li>
    <li><a href="barchart_art.html">rescaled images</a></li>
    </ul>

    <h4>Colors</h4>
    <ul>
    <li><a href="varcolor.html">data-dependent coloring</a></li>
    <li><a href="rgb_variable.html">RGB coloring</a></li>
    <li><a href="rgba_lines.html">RGB + alpha channel</a></li>
    <li><a href="pm3dcolors.html">pm3d colors</a></li>
    </ul>
</td>

<td rowspan=2>
    <h4>Sample Applications</h4>
    <ul>
    <li><a href="controls.html">control models</a></li>
    <li><a href="discrete.html">discrete&nbsp;contours</a></li>
    <li><a href="finance.html">financial data</a></li>
    <li><a href="iterate.html">iteration</a></li>
    <li><a href="scatter.html">non-gridded data</a></li>
    <li><a href="running_avg.html">running averages</a></li>
    <li><a href="smooth.html">binning/histograms</a></li>
    <li><a href="gantt.html">Gantt chart</a></li>
    <li><a href="heatmaps.html">2D and 3D heat maps</a></li>
    </ul>

    <h4>Text options</h4>
    <ul>
    <li><a href="enhanced_utf8.html">enhanced text</a></li>
    <li><a href="datastrings.html">string data</a></li>
    <li><a href="cities.html">variable font size</a></li>
    <li><a href="canvas_utf8.html">utf8 math symbols</a></li>
    <li><a href="hypertext.html">hypertext</a></li>
    </ul>

    <h4>Page Layout</h4>
    <ul>
    <li><a href="layout.html">multiplot&nbsp;layout</a></li>
    <li><a href="multiplt.html">multiple plots</a></li>
    <li><a href="margins.html">aligned plots</a></li>
    <li><a href="ellipse.html">axis location</a></li>
    <li><a href="rectangle.html">rectangles</a></li>
    <li><a href="nokey.html">end-labeled plots</a></li>
    </ul>

    <h4>Styles</h4>
    <ul>
    <li><a href="lines_arrows.html">line and arrow styles</a></li>
    <li><a href="fillstyle.html">fill styles</a></li>
    <li><a href="dashtypes.html">dashed lines</a></li>
    <li><a href="transparent.html">transparency</a></li>
    <li><a href="transparent_solids.html">transparent solids</a></li>
    </ul>

    <h4>Animation</h4>
    <ul>
    <li><font color=gray>not supported</font></li>
    </ul>
</td>

<td></td>
</tr>

<tr valign=top><td align=center>


<h3>Example of mouse tracking, zoom/unzoom</h3>

	<table class="plot">
	<tr>

	<td>
	    <script src="canvastext.js"></script>
	    <script src="gnuplot_common.js"></script>
	    <script src="gnuplot_mouse.js"></script>
	    <script src="mouseable.js"></script>
	    <canvas id="gnuplot_canvas" width="500" height="350" onkeypress=gnuplot.do_hotkey() tabindex="0"></canvas>
	    <script>
		gnuplot.grid_lines = true;
		gnuplot.zoomed = false;
		gnuplot.active_plot_name = "gnuplot_canvas";
		gnuplot.active_plot = function(){gnuplot_canvas();};
		if (window.attachEvent) {window.attachEvent('onload', gnuplot.active_plot);}
		else if (window.addEventListener) {window.addEventListener('load', gnuplot.active_plot, false);}
		else {document.addEventListener('load', gnuplot.active_plot, false);}
	    </script>
	</td></tr>
	<tr><td>
	    <table id="gnuplot_mousebox" class="mbunder">
	    <tr>
		<td class="icon" onclick="gnuplot.toggle_grid();"><img src="grid.png" id="gnuplot_grid_icon" alt="#" title="toggle grid"></td>
		<td class="icon" onclick="gnuplot.unzoom();"><img src="previouszoom.png" id="gnuplot_unzoom_icon" alt="unzoom" title="unzoom"></td>
		<td class="icon" onclick="gnuplot.rezoom();"><img src="nextzoom.png" id="gnuplot_rezoom_icon" alt="rezoom" title="rezoom"></td>
		<td class="icon"><a href="canvas_help.html">
		                 <img src="help.png" align=right alt="help" title="help"></a></td>
		<td class="icon" onclick='gnuplot.toggle_plot("gnuplot_canvas_plot_1")'>&#10112;</td>
	        <td class="mb0">x</td>
	        <td class="mb1"><span id="gnuplot_canvas_x">&nbsp;</span></td>
	        <td class="mb0">y</td>
		<td class="mb1"><span id="gnuplot_canvas_y">&nbsp;</span></td>
	    </table>
	<br>Note:
	<ul><li>Zoom using right (Firefox, Konqueror) or center (Opera, Safari) mouse button
	    <li>Mark point using left mouse button
	    <li>&#10112; toggles first plot on/off&nbsp;&nbsp;  # toggles grid on/off
	</ul>
	</td></tr>
	</table>


</td></tr>

</tbody></table>
<hr>


<table width="100%">
<tbody><tr valign="top">

    <td>
    <i>This page created by Ethan Merritt<br>April 2014</i>
    </td>

    <td>
    <ul>
    <li><a href="http://sourceforge.net/projects/gnuplot/">
	Gnuplot development pages on SourceForge</a></li>
    <li>On-line PDF documentation in
	<a href="http://gnuplot.sourceforge.net/docs/gnuplot.pdf">English</a>
	and
	<a href="http://gnuplot.sourceforge.net/docs/gnuplot-ja.pdf">Japanese</a></li>
    </ul>
    </td>
    
    <td>
    <ul>
    </ul>
    </td>
    
</tr>
</tbody></table>
</body></html>
