function drawGraph(data, plot_id, is_proc, vertical) {
	if (plot_id == undefined) {
		plot_id = 'plot';
	}
	if (is_proc == undefined) {
		is_proc = false;
	}
	(function($) { 
		$(function () {
			function formatDate(str) {
				var d = new Date(str);
				function pad(str) {
					if (str < 10)
						return "0" + str;
					return str;
				}
				return d.getFullYear()+"-"+pad(d.getMonth()+1)+"-"+pad(d.getDate());
			}
			function showTooltip(id, x, y, contents, date, hover) {
				$("#"+id).remove();
				$('<div id="'+id+'"><div style="float: left; background-color: #eeeeee; color: #58595b; padding: 4px 4px 4px 7px">' + formatDate(date) + '</div><div style="background-color: #e9722c; color: #ffffff; padding: 4px 7px 4px 4px; float: left;">'+contents+'</div></div>').css( {
					position: 'absolute',
					top: y - 15,
					left: x + 8,
					color: 'white',
					fontSize: '9px',
					whiteSpace: 'nowrap'
				}).appendTo("body");
				if (hover) {
					$('#'+id).each(function() {this.positionChanged = false});
					$('#'+id).hover(function () {
						if (!this.positionChanged) {
							$(this).css({left: x - 8 - this.clientWidth})
							this.positionChanged = true;
						}
						else {
							$(this).css({left: x + 8})
							this.positionChanged = false;
						}
					});
				}
			}
			
			var previousPoint = null;
			$("#"+plot_id).bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));

				if (item) {
					if (previousPoint != item.datapoint) {
						previousPoint = item.datapoint;
						
						var x = item.datapoint[0].toFixed(2),
							y = item.datapoint[1].toFixed(2);
						
						showTooltip("tooltip_float", item.pageX, item.pageY,
									y, item.datapoint[0]);
					}
				}
				else {
					$("#tooltip_float").remove();
					previousPoint = null;            
				}
			});
			
			var clickedPoint = null;
			$("#"+plot_id).bind("plotclick", function (event, pos, item) {
				if (item) {
					var x = item.datapoint[0].toFixed(2),
						y = item.datapoint[1].toFixed(2);
						
					if (clickedPoint != null)
						plot.unhighlight(clickedPoint.series, clickedPoint.datapoint);
					
					clickedPoint = item;
						
					showTooltip("tooltip_clicked", item.pageX, item.pageY,
								y, item.datapoint[0], true);
								
					plot.highlight(item.series, item.datapoint);
				} else {
					if (clickedPoint != null)
						plot.unhighlight(clickedPoint.series, clickedPoint.datapoint);
					clickedPoint = null;
					$("#tooltip_clicked").remove();
				}
			});

			
			$("#tooltip_clicked").remove();
			$("#tooltip_float").remove();
			options = { 
				xaxis: { 
					mode: "time",
					tickFormatter:	formatDate,
					ticks: 5
				},
				yaxis: {
					ticks: 12
				},
				grid: {
					color: "#0c7470",
					borderColor: "#d5d5d5",
					tickColor: "#d5d5d5",
					borderWidth: 1,
					hoverable: true,
					clickable: true
				},
				series: {
					shadowSize: 0,
					lines: {
						lineWidth: 1,
						show: true
					},
					points: {
						show: false,
						radius: 1,
						color: '#fff'
					}
				},
				colors: ["#e9722c", "#0c7470"],
				crosshair: { mode: "xy", color: "#e5e5e5" }
			}
			if (is_proc) {
				options.grid.markings = 
					[
						{color: '#e5e5e5', lineWidth: 2, yaxis: { from: 0, to: 0 }}
					]
			}
            if (vertical > 0) {
				options.grid.markings = 
					[
						{color: '#0c7470', lineWidth: 2, xaxis: { from: vertical, to: vertical }}
					]
			}
			var plot = $.plot($("#"+plot_id), data, options);
		});
	})(jQuery);
}