<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Gnuplot 5.2 demos (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.2 demos (HTML canvas terminal)<br>
See also the demo output for the
<a href="http://gnuplot.sourceforge.net/demo_5.2/">PNG</a> and
<a href="http://gnuplot.sourceforge.net/demo_svg_5.2/">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>
<table width="100%">
<tbody><tr valign="top">
<td rowspan=2>
<h4>Basic 2D plot styles</h4>
<ul>
<li><a href="simple.html">simple functions</a></li>
<li><a href="fillcrvs.html">filled curves</a></li>
<li><a href="fillbetween.html">fill between curves</a></li>
<li><a href="candlesticks.html">candlesticks</a></li>
<li><a href="errorbars.html">error bars</a></li>
<li><a href="histograms.html">histograms</a> (<a href="histograms2.html">more</a>)</li>
<li><a href="boxclusters.html">bar graphs</a>
<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 functions</a></li>
<li><a href="piecewise.html">piecewise 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>
<li><a href="jitter.html">jitter (bee swarm)</a></li>
</ul>
<h4>Math functions</h4>
<ul>
<li><a href="approximate.html">approximation</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>
<h4>Curve fitting</h4>
<ul>
<li><a href="smooth_splines.html">cubic and Bezier splines</a></li>
<li><a href="monotonic_spline.html">monotonic csplines</a></li>
<li><a href="spline.html">explicit B-splines</a></li>
<li><a href="airfoil.html">explicit Bezier splines</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>
<li><a href="zerror.html">shaded error region</a></li>
<li><a href="azimuth.html">azimuth</a></li>
<li><a href="pm3d_lighting.html">lighting model</a></li>
</ul>
<h4>Coordinate and<br> axis transforms</h4>
<ul>
<li><a href="linkedaxes.html">linked axes</a></li>
<li><a href="nonlinear3.html">nonlinear axes</a></li>
<li><a href="nonlinear1.html">broken axes</a></li>
<li><a href="ttics.html">polar coords</a></li>
<li><a href="polar.html">polar functions</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>
<li><a href="sampling.html">coord sampling ranges</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 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="bins.html">automatic binning</a></li>
<li><a href="smooth.html">binning/histograms</a></li>
<li><a href="array.html">arrays</a></li>
<li><a href="fenceplot.html">fence plots</a></li>
<li><a href="gantt.html">Gantt chart</a></li>
<li><a href="heatmaps.html">2D and 3D heat maps</a></li>
<li><a href="solar_path.html">solar path diagram</a></li>
<li><a href="violinplot.html">violin plot</a></li>
</ul>
<h4>Text options</h4>
<ul>
<li><a href="rotate_labels.html">rotated text</a></li>
<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 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="custom_key.html">customized key</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>
</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")'>➀</td>
<td class="mb0">x</td>
<td class="mb1"><span id="gnuplot_canvas_x"> </span></td>
<td class="mb0">y</td>
<td class="mb1"><span id="gnuplot_canvas_y"> </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>➀ toggles first plot on/off # toggles grid on/off
</ul>
</td></tr>
</table>
</td></tr>
</tbody></table>
<hr>
<table width="100%">
<tbody><tr valign="top">
<td>
<i>This page generated June 2017</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>