function buildGraph( valueArray, plotElement, overviewElement, xAxisMax, labelName ) {
		
		var plotOptions = {
			xaxis: { 
				ticks : [],
				mode: "time",
				timeformat: "%d/%m/%y"
			},
			yaxis : {
				ticks : [],
				mode : "number",
				min : 0,
				max : xAxisMax
			},
			selection   : { 
			    mode: "x",
			    color : "#369580"
            },
			grid : {
				show : false,
				borderWidth : 0,
				hoverable :  true
			},
			series : {
				shadowSize: 0,
				lines : {
					show : true
				}
			},
			colors : ["#0d8167"],
			legend : {
			    show : false
			}
		};		
		
		var plot = $.plot($(plotElement), [{data : valueArray, label : labelName}], plotOptions);
		
		var overviewOptions = {
			series: {
				lines: { show: true, lineWidth: 1 },
				shadowSize: 0
			},
			xaxis: { ticks: [], mode: "time", timeformat: "%d/%m/%y" },
			yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
			grid : {
				show : false,
				borderWidth : 0,
				hoverable: true
			},
			colors : ["#0d8167"],
			selection: { 
				mode : "x",
				color : "#369580"
			}
		};
		
		var overview = $.plot($(overviewElement), [valueArray], overviewOptions);
        
        $(plotElement).bind("plothover", function(event, pos, item) {
            if(item) {
                $("#tooltip").remove();
                var y = item.datapoint[1].toFixed(2);
                var x = item.datapoint[0];  
                
                var contents = item.series.label + ": " + parseInt(y) + " ";
                showTooltip(item.pageX, item.pageY, contents);
            }
        });

        $(plotElement).bind("plotselected", function(event, ranges) {
            // do the zooming
            plot = $.plot($(plotElement), [{ data: valueArray, label: labelName}],
                      $.extend(true, {}, plotOptions, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));

            // don't fire event on the overview to prevent eternal loop
            overview.setSelection(ranges, true);
        });
    
    bindTooltip($(overviewElement));
    
    $(overviewElement).bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });
}

function bindTooltip(overviewElement) {
    var previousPoint = null;
    $(overviewElement).bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.datapoint) {
                previousPoint = item.datapoint;
                $("#tooltip").remove();
                var date = new Date(item.datapoint[0]);
                showTooltip(item.pageX, item.pageY, getTimeStamp(date));
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    });
}

function getTimeStamp(date) {
    //Formatstring: dd/MM/yyyy hh:mm
    var timestamp = "";
    timestamp += date.getDate();
    timestamp += "/";
    timestamp += (date.getMonth() + 1);
    timestamp += "/";
    timestamp += date.getFullYear();
    timestamp += " ";
    timestamp += date.getHours();
    timestamp += ":";
    timestamp += date.getMinutes();
    return timestamp;
}

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #ddd',
        padding: '2px',
        'background-color': '#eee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}