setting-options.html

<!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>Flot Examples</title>
	<link href="layout.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>
</head>
<body>

	<h1>Flot Examples</h1>

	<div id="placeholder" style="width:600px;height:300px"></div>

	<p>There are plenty of options you can set to control the precise looks of
	your plot. You can control the ticks on the axes, the legend, the graph
	type, etc. The idea is that Flot goes to great lengths to provide sensible
	defaults so that you don't have to customize much for a good result.</p>

<script type="text/javascript">

$(function () {

	var d1 = [];
	for ( var i = 0; i < Math.PI * 2; i += 0.25 ) {
		d1.push([ i, Math.sin( i ) ]);
	}

	var d2 = [];
	for (var i = 0; i < Math.PI * 2; i += 0.25) {
		d2.push([ i, Math.cos( i ) ]);
	}

	var d3 = [];
	for (var i = 0; i < Math.PI * 2; i += 0.1) {
		d3.push([ i, Math.tan( i ) ]);
	}

	$.plot( $("#placeholder"), [
		{ label: "sin(x)", data: d1 },
		{ label: "cos(x)", data: d2 },
		{ label: "tan(x)", data: d3 }
	], {
		series: {
			lines: { show: true },
			points: { show: true }
		},
		xaxis: {
			ticks: [
				0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ],
				[ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ]
			]
		},
		yaxis: {
			ticks: 10,
			min: -2,
			max: 2,
			tickDecimals: 3
		},
		grid: {
			backgroundColor: { colors: [ "#fff", "#eee" ] },
			borderWidth: {
				top: 1,
				right: 1,
				bottom: 2,
				left: 2
			}
		}
	});
});

</script>

</body>
</html>