text: 	//chart with points
  	if($("#sincos").length)
  	{
  		var sin = [], cos = [];
  
  		for (var i = 0; i < 14; i += 0.5) {
  			sin.push([i, Math.sin(i)/i]);
  			cos.push([i, Math.cos(i)]);
  		}
  
  		var plot = $.plot($("#sincos"),
  			   [ { data: sin, label: "sin(x)/x"}, { data: cos, label: "cos(x)" } ], {
  				   series: {
  					   lines: { show: true  },
  					   points: { show: true }
  				   },
  				   grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
  				   yaxis: { min: -1.2, max: 1.2 },
  				   colors: ["#539F2E", "#3C67A5"]
  				 });
  
  		function showTooltip(x, y, contents) {
  			$('<div id="tooltip">' + contents + '</div>').css( {
  				position: 'absolute',
  				display: 'none',
  				top: y + 5,
  				left: x + 5,
  				border: '1px solid #fdd',
  				padding: '2px',
  				'background-color': '#dfeffc',
  				opacity: 0.80
  			}).appendTo("body").fadeIn(200);
  		}
  
  		var previousPoint = null;
  		$("#sincos").bind("plothover", function (event, pos, item) {
  			$("#x").text(pos.x.toFixed(2));
  			$("#y").text(pos.y.toFixed(2));
  
  				if (item) {
  					if (previousPoint != item.dataIndex) {
  						previousPoint = item.dataIndex;
  
  						$("#tooltip").remove();
  						var x = item.datapoint[0].toFixed(2),
  							y = item.datapoint[1].toFixed(2);
  
  						showTooltip(item.pageX, item.pageY,
  									item.series.label + " of " + x + " = " + y);
  					}
  				}
  				else {
  					$("#tooltip").remove();
  					previousPoint = null;
  				}
  		});
  		
  
  
  		$("#sincos").bind("plotclick", function (event, pos, item) {
  			if (item) {
  				$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
  				plot.highlight(item.series, item.datapoint);
  			}
  		});
  	}
  	
  	//flot chart
  	if($("#flotchart").length)
  	{
  		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($("#flotchart"), [
  			{ 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
  			},
  			grid: {
  				backgroundColor: { colors: ["#fff", "#eee"] }
  			}
  		});
  	}
  	
  	//stack chart
  	if($("#stackchart").length)
  	{
  		var d1 = [];
  		for (var i = 0; i <= 10; i += 1)
  		d1.push([i, parseInt(Math.random() * 30)]);
  
  		var d2 = [];
  		for (var i = 0; i <= 10; i += 1)
  			d2.push([i, parseInt(Math.random() * 30)]);
  
  		var d3 = [];
  		for (var i = 0; i <= 10; i += 1)
  			d3.push([i, parseInt(Math.random() * 30)]);
  
  		var stack = 0, bars = true, lines = false, steps = false;
  
  		function plotWithOptions() {
  			$.plot($("#stackchart"), [ d1, d2, d3 ], {
  				series: {
  					stack: stack,
  					lines: { show: lines, fill: true, steps: steps },
  					bars: { show: bars, barWidth: 0.6 }
  				}
  			});
  		}
  
  		plotWithOptions();
  
  		$(".stackControls input").click(function (e) {
  			e.preventDefault();
  			stack = $(this).val() == "With stacking" ? true : null;
  			plotWithOptions();
  		});
  		$(".graphControls input").click(function (e) {
  			e.preventDefault();
  			bars = $(this).val().indexOf("Bars") != -1;
  			lines = $(this).val().indexOf("Lines") != -1;
  			steps = $(this).val().indexOf("steps") != -1;
  			plotWithOptions();
  		});
  	}
  
  	//pie chart
  	var data = [
  	{ label: "Internet Explorer",  data: 12},
  	{ label: "Mobile",  data: 27},
  	{ label: "Safari",  data: 85},
  	{ label: "Opera",  data: 64},
  	{ label: "Firefox",  data: 90},
  	{ label: "Chrome",  data: 112}
  	];
  	
  	if($("#piechart").length)
  	{
  		$.plot($("#piechart"), data,
  		{
  			series: {
  					pie: {
  							show: true
  					}
  			},
  			grid: {
  					hoverable: true,
  					clickable: true
  			},
  			legend: {
  				show: false
  			}
  		});
  		
  		function pieHover(event, pos, obj)
  		{
  			if (!obj)
  					return;
  			percent = parseFloat(obj.series.percent).toFixed(2);
  			$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
  		}
  		$("#piechart").bind("plothover", pieHover);
  	}
  	
  	//donut chart
  	if($("#donutchart").length)
  	{
  		$.plot($("#donutchart"), data,
  		{
  				series: {
  						pie: {
  								innerRadius: 0.5,
  								show: true
  						}
  				},
  				legend: {
  					show: false
  				}
  		});
  	}
  
  
  
  	//realtime chart
  	if($("#realtimechart").length)
  	{
  		var options = {
  			series: { shadowSize: 1 }, // drawing is faster without shadows
  			yaxis: { min: 0, max: 100 },
  			xaxis: { show: false }
  		};
  		var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
  		function update() {
  			plot.setData([ getRandomData() ]);
  			// since the axes don't change, we don't need to call plot.setupGrid()
  			plot.draw();
  			
  			setTimeout(update, updateInterval);
  		}
  
  		update();
  	}
  