leewillis77/flotdonut.php

## flotdonut.php
<!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 Pie Examples</title>
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.pie.js"></script>
	<?php $percentage = rand(1,100); ?>
	<script type="text/javascript">
	$(function () {
		// data
		var data = [];
		var series = 2;
		var success = <?php echo $percentage; ?>;
		data[0] = { label: "Series"+(0+1), data: success, color: '#d1d600' };
		data[1] = { label: "Series"+(1+1), data: 100-success, color: '#e8e7e3' };


		// DEFAULT
	    $.plot($("#pie"), data,
		{
			series: {
				pie: {
					show: true,
					label: {
						show: false,
					}
				}
			},
			legend: {
				show: false
			}
		});
	});
	</script>

	<style type="text/css">
		* {
		  font-family: sans-serif;
		}

		body
		{
			padding: 0 1em 1em 1em;
		}

		div.graph
		{
			width: 9em;
			height: 9em;
			float: left;
		}

		label
		{
			display: block;
			margin-left: 400px;
			padding-left: 1em;
		}

		h2
		{
			padding-top: 1em;
			margin-bottom: 0;
			clear: both;
			color: #ccc;
		}

		code
		{
			display: block;
			background-color: #eee;
			border: 1px dashed #999;
			padding: 0.5em;
			margin: 0.5em;
			color: #666;
			font-size: 10pt;
		}

		code b
		{
			color: black;
		}

		ul
		{
			font-size: 10pt;
		}

		ul li
		{
			margin-bottom: 0.5em;
		}

		ul.options li
		{
			list-style: none;
			margin-bottom: 1em;
		}

		ul li i
		{
			color: #999;
		}

		#piewrap {
			position: relative;
		}
		#percentage {
			position: absolute;
			top: 2em;
			left: 2em;
			text-align: center;
			width: 3em;
			height: 3em;
			background: #fff;
			padding: 1em;
			border-radius: 50%;
			line-height: 3em;
			font-weight: bold;
		}
	</style>
 	</head>
	<body>
			<div id="piewrap">
    			<div id="pie" class="graph"></div>
    			<div id="percentage"><?php echo $percentage; ?>%</div>
    		</div>
	</body>
</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 Pie Examples</title>
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
	<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
	<script language="javascript" type="text/javascript" src="flot/jquery.flot.pie.js"></script>
	<?php $percentage = rand(1,100); ?>
	<script type="text/javascript">
	$(function () {
	// data
	var data = [];
	var series = 2;
	var success = <?php echo $percentage; ?>;
	data[0] = { label: "Series"+(0+1), data: success, color: '#d1d600' };
	data[1] = { label: "Series"+(1+1), data: 100-success, color: '#e8e7e3' };


	// DEFAULT
	$.plot($("#pie"), data,
	{
	series: {
	pie: {
	show: true,
	label: {
	show: false,
	}
	}
	},
	legend: {
	show: false
	}
	});
	});
	</script>

	<style type="text/css">
	* {
	font-family: sans-serif;
	}

	body
	{
	padding: 0 1em 1em 1em;
	}

	div.graph
	{
	width: 9em;
	height: 9em;
	float: left;
	}

	label
	{
	display: block;
	margin-left: 400px;
	padding-left: 1em;
	}

	h2
	{
	padding-top: 1em;
	margin-bottom: 0;
	clear: both;
	color: #ccc;
	}

	code
	{
	display: block;
	background-color: #eee;
	border: 1px dashed #999;
	padding: 0.5em;
	margin: 0.5em;
	color: #666;
	font-size: 10pt;
	}

	code b
	{
	color: black;
	}

	ul
	{
	font-size: 10pt;
	}

	ul li
	{
	margin-bottom: 0.5em;
	}

	ul.options li
	{
	list-style: none;
	margin-bottom: 1em;
	}

	ul li i
	{
	color: #999;
	}

	#piewrap {
	position: relative;
	}
	#percentage {
	position: absolute;
	top: 2em;
	left: 2em;
	text-align: center;
	width: 3em;
	height: 3em;
	background: #fff;
	padding: 1em;
	border-radius: 50%;
	line-height: 3em;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="piewrap">
	<div id="pie" class="graph"></div>
	<div id="percentage"><?php echo $percentage; ?>%</div>
	</div>
	</body>
	</html>