pandorafms/pandora_console/include/graphs/flot/pandora.flot.js

/*


*/

function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, water_mark, separator) {
	var labels = labels.split(separator);
	var data = values.split(separator);

	for( var i = 0; i<nseries; i++)
	{
		data[i] = { label: labels[i], data: parseInt(data[i]) }
	}
	
	var label_conf;
	
	if(width < 400) {
		label_conf = {
			show: false
		};
	}
	else {
		label_conf = {
			show: true,
			radius: 3/4,
			formatter: function(label, series){
				return '<div style="font-size:'+font_size+'pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
			},
			background: {
				opacity: 0.5,
				color: '#000'
			}
		};
	}
	
	var plot = $.plot($('#'+graph_id), data,
	{
			series: {
				pie: {
					show: true,
					radius: 3/4,
					label: label_conf
					//$label_str
				}
			},
			legend: {
				show: true
			},
			grid: {
				hoverable: true,
				clickable: true
			}
	});
	
	var legends = $('#'+graph_id+' .legendLabel');
	legends.each(function () {
		// fix the widths so they don't jump around
		$(this).css('width', $(this).width()+5);
		$(this).css('font-size', font_size+'pt');
	});

	// Events
	$('#'+graph_id).bind('plothover', pieHover);
	$('#'+graph_id).bind('plotclick', pieClick);
	$('#'+graph_id).bind('mouseout',resetInteractivity);

	function pieHover(event, pos, obj) 
	{
		if (!obj)
			return;
			
		index = obj.seriesIndex;
		legends.css('font-weight', '');
		legends.eq(index).css('font-weight', 'bold');
	}
    
	// Reset styles
	function resetInteractivity() {
		legends.each(function () {
			// fix the widths so they don't jump around
			$(this).css('font-weight', '');
		});
	}
	
	if(water_mark) {
		set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
	}
}

function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_mark, separator, separator2) {
	
	values = values.split(separator2);
	var datas = new Array();
	
	for(i=0;i<values.length;i++) {
		var serie = values[i].split(separator);
		var aux = new Array();
		$.each(serie.reverse(),function(i,v) {
			aux.push([v, i]);
		});
		
		datas.push({ 
			data: aux, 
			bars: { show: true, horizontal: true, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false } 
		});
	}
	
	labels = labels.split(separator).reverse();

	var stack = 0, bars = true, lines = false, steps = false;

	var options = { 
			series: { 
				shadowSize: 0.1 
			},

			grid: { 
				hoverable: true, 
				borderWidth:1,
				borderColor: '#666',
				tickColor: '#eee'
				},
			xaxes: [ { 
					tickFormatter: yFormatter,
					color: '#000'
					} ],
			yaxes: [ { 
					tickFormatter: xFormatter,
					tickSize: 1,
					color: '#000'
					},
					{
					  // align if we are to the right
					  alignTicksWithAxis: 1,
					  position: 'right',
					  
					  //tickFormatter: dFormatter
					} ]
					,
			legend: { 
				show: false
				}
	   };
	   
	var plot = $.plot($('#'+graph_id),datas, options );
	   	
	// Adjust the top of yaxis tick to set it in the middle of the bars
	yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
		
	i = 0;
	$('#'+graph_id+' .yAxis .tickLabel').each(function() {
		tickTop = $(this).css('top').split('px')[0];
		tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
		$(this).css('top', tickNewTop+'px');
		
		valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
		
		$('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));

		pixelPerValue = parseInt(plot.width()) / maxvalue;
		
		inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
		
		$('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
		i++;
	});
	
	// When resize the window, adjust the values
	$('#'+graph_id).parent().resize(function () {
		i = 0;
		pixelPerValue = parseInt(plot.width()) / maxvalue;
		
		$('#'+graph_id+' .yAxis .tickLabel').each(function() {			
			inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
			
			$('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
			i++;
		});
    });
	
	// Format functions
    function xFormatter(v, axis) {
		if(labels[v] != undefined) {
			return labels[v];
		}	
		else {
			return '';
		}	
    }
    
    function yFormatter(v, axis) {
        return v;
    }
    
    function lFormatter(v, axis) {
        return '<div style=color:#000>'+v+'</div>';
    }
    
    // Events
    $('#'+graph_id).bind('plothover',  function (event, pos, item) {
		$('.values_'+graph_id).css('font-weight', '');
		if(item != null) {
			index = item.dataIndex;
			$('#value_'+index+'_'+graph_id).css('font-weight', 'bold');
		}
    });
    
	if(water_mark) {
		set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
	}
}

function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2) {
	
	values = values.split(separator2);
	legend = legend.split(separator);
	labels_long = labels_long.split(separator);
	colors = colors.split(separator);

	var datas = new Array();
	
	for(i=0;i<values.length;i++) {
		var serie = values[i].split(separator);
		
		var serie_color;
		if(colors[i] != '') {
			serie_color = colors[i];
		}
		else {
			serie_color = null;
		}
	
		var aux = new Array();
		$.each(serie,function(i,v) {
			aux.push([i, v]);
		});
		
		datas.push({ 
			data: aux, 
			color: serie_color,
			bars: { show: true, horizontal: false, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false } 
		});
	}
	
	labels = labels.split(separator);

	var stack = 0, bars = true, lines = false, steps = false;

	var options = { 
			series: { 
				shadowSize: 0.1 
			},
			grid: { 
				hoverable: true, 
				clickable: true, 
				borderWidth:1,
				borderColor: '#666',
				tickColor: '#eee'
				},
			xaxes: [ { 
					tickFormatter: xFormatter,
					color: '#000'
					} ],
			yaxes: [ { 
					tickFormatter: yFormatter,
					tickSize: 1,
					color: '#000'
					},
					{
					  // align if we are to the right
					  alignTicksWithAxis: 1,
					  position: 'right',
					  
					  //tickFormatter: dFormatter
					} ]
					,
			legend: { 
				show: false
				}
	   };
	   
	var plot = $.plot($('#'+graph_id),datas, options );
	   	
	// Adjust the top of yaxis tick to set it in the middle of the bars
	yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
		
	i = 0;
	//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {
		//~ tickTop = $(this).css('top').split('px')[0];
		//~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
		//~ $(this).css('top', tickNewTop+'px');
		//~ 
		//~ valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
		//~ 
		//~ $('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
//~ 
		//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
		//~ 
		//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
		//~ 
		//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
		//~ i++;
	//~ });
	
	// When resize the window, adjust the values
	//~ $('#'+graph_id).parent().resize(function () {
		//~ i = 0;
		//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
		//~ 
		//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {			
			//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
			//~ 
			//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
			//~ i++;
		//~ });
    //~ });
	
	// Format functions
    function xFormatter(v, axis) {
		if(labels[v] != undefined) {
			return labels[v];
		}	
		else {
			return '';
		}	
    }
    
    function yFormatter(v, axis) {
        return v;
    }
    
    function lFormatter(v, axis) {
        return '<div style=color:#000>'+v+'</div>';
    }
    
    // Events
    //~ $('#'+graph_id).bind('plothover',  function (event, pos, item) {
		//~ $('.values_'+graph_id).css('font-weight', '');
		//~ if(item != null) {
			//~ index = item.dataIndex;
			//~ $('#value_'+index+'_'+graph_id).css('font-weight', 'bold');
		//~ }
    //~ });
    
	if(water_mark) {
		set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
	}
}

function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumulate_data, intervaltick, water_mark, maxvalue, separator, separator2) {
	
	values = values.split(separator2);
	labels = labels.split(separator);
	legend = legend.split(separator);
	acumulate_data = acumulate_data.split(separator);
	datacolor = datacolor.split(separator);
	
	// Check possible adapt_keys on classes
	check_adaptions(graph_id);
	
	var datas = new Array();
	
	for(i=0;i<values.length;i++) {
		var serie = values[i].split(separator);
		var aux = new Array();
		$.each(serie,function(i,v) {
			aux.push([v, i]);
		});
		
		datas.push({ 
			data: aux, 
			bars: { show: true, fill: true ,fillColor: datacolor[i] , horizontal: true, lineWidth:0, steps:false } 
		});
	}
	
	var stack = 0, bars = true, lines = false, steps = false;

	var options = { 
			series: { 
				stack: stack,
				shadowSize: 0.1,
				color: '#ddd'
			},
			grid: { 
				hoverable: true, 
				borderWidth:1,
				borderColor: '#000',
				tickColor: '#fff'
				},
			xaxes: [ { 
					tickFormatter: xFormatter,
					color: '#000',
					tickSize: intervaltick,
					tickLength: 0
					} ],
			yaxes: [ { 
					show: false,
					tickLength: 0
				}],
			legend: { 
				show: false
				}
	   };

	var plot = $.plot($('#'+graph_id), datas, options );
	
    // Events
    $('#'+graph_id).bind('plothover',  function (event, pos, item) {
		if(item) {
			var from = legend[item.seriesIndex];
			var to = legend[item.seriesIndex+1];
			
			if(to == undefined) {
				to = '>';
			}
			
			$('#extra_'+graph_id).text(from+'-'+to);
			var extra_height = parseInt($('#extra_'+graph_id).css('height').split('px')[0]);
			var extra_width = parseInt($('#extra_'+graph_id).css('width').split('px')[0]);
			$('#extra_'+graph_id).css('left',pos.pageX-(extra_width/2)+'px');
			$('#extra_'+graph_id).css('top',plot.offset().top-extra_height-5+'px');

			$('#extra_'+graph_id).show();
		}
    });
    
	$('#'+graph_id).bind('mouseout',resetInteractivity);

	// Reset interactivity styles
	function resetInteractivity() {
		$('#extra_'+graph_id).hide();
	}
    
	// Format functions
    function xFormatter(v, axis) {
		for(i = 0; i < acumulate_data.length; i++) {
			if(acumulate_data[i] == v) {
				return '<span style=\'font-size: 6pt\'>' + legend[i] + '</span>';
			}
		}
		return '';
    }
}

function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors, type, serie_types, water_mark, width, max_x, homeurl, unit, font_size, menu, events, event_ids, legend_events, alerts, alert_ids, legend_alerts, yellow_threshold, red_threshold, force_integer, separator, separator2, series_suffix_str) {

	var threshold = true;
	var thresholded = false;

	values = values.split(separator2);
	serie_types = serie_types.split(separator);
	labels_long = labels_long.split(separator);
	labels = labels.split(separator);
	legend = legend.split(separator);
	events = events.split(separator);
	event_ids = event_ids.split(separator);
	if (alerts.length != 0)
		alerts = alerts.split(separator);
	else
		alerts = [];
	alert_ids = alert_ids.split(separator);
	colors = colors.split(separator);

	var eventsz = new Array();
	$.each(events,function(i,v) {
		eventsz[event_ids[i]] = v;
	});
	
	var alertsz = new Array();
	$.each(alerts,function(i,v) {
		alertsz[alert_ids[i]] = v;
	});
	
	switch(type) {
		case 'line_simple': 
			stacked = null;
			filled = false;
			break;
		case 'line_stacked': 
			stacked = 'stack';
			filled = false;
			break;
		case 'area_simple':
			stacked = null;
			filled = true;
			break;
		case 'area_stacked':
			stacked = 'stack';
			filled = true;
			break;
	}
	
	var datas = new Array();
	var data_base = new Array();
	
    // Prepared to turn series with a checkbox
	// var showed = new Array();
	
	for(i=0;i<values.length;i++) {
		var serie = values[i].split(separator);
		var aux = new Array();
		var critical_min = new Array();
		var warning_min = new Array();
		$.each(serie,function(i,v) {
			aux.push([i, v]);
			if(threshold) {
				critical_min.push([i,red_threshold]);
				warning_min.push([i,yellow_threshold]);
			}
		});
		
		switch(serie_types[i]) {
			case 'line':
			default:
					line_show = true;
					points_show = false;
				break;
			case 'points':
					line_show = false;
					points_show = true;
				break;
		}

		var serie_color;
		if(colors[i] != '') {
			serie_color = colors[i];
		}
		else {
			serie_color = null;
		}

		var normalw = '#efe';
		var warningw = '#ffe';
		var criticalw = '#fee';
		var normal = '#0f0';
		var warning = '#ff0';
		var critical = '#f00';
		
		// setup background areas
		//vnormal_max = vwarning_min - 1;
		
		var markings = null;
		
		// Fill the grid background with weak threshold colors
		//~ markings = [
			//~ { color: normalw, yaxis: { from: -1,to: vnormal_max } },
			//~ { color: warningw, yaxis: { from: vwarning_min, to: vwarning_max } },
			//~ { color: criticalw, yaxis: { from: vcritical_min } },
			//~ { color: criticalw, yaxis: { to: -1 } }
		//~ ];
		
		// Data
		data_base.push({ 
			id: 'serie_'+i,
			data: aux, 
			label: legend[i],
			color: serie_color,
			//threshold: [{ below: 80, color: "rgb(200, 20, 30)" } , { below: 65, color: "rgb(30, 200, 30)" }, { below: 50, color: "rgb(30, 200, 30)" }],
			lines: { show: line_show, fill: filled, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.9 } ]}, lineWidth:1, steps:false },
			points: { show: points_show }
		});

		// Prepared to turn series with a checkbox
		// showed[i] = true;
	}
	
	var threshold_data = new Array();
	
	if(threshold) {
		// Warning and critical treshold
		threshold_data.push({ 
			id: 'critical_min',
			data: critical_min, 
			label: null,
			color: critical,
			lines: { show: true, fill: false, lineWidth:3},
		});
		threshold_data.push({ 
			id: 'warning_min',
			data: warning_min, 
			label: null,
			color: warning,
			lines: { show: true, fill: false, lineWidth:3},
		});
	}
	
	// The first execution, the graph data is the base data
	datas = data_base;
				
	// minTickSize
	var count_data = datas[0].data.length;
	var min_tick_pixels = 80;
	var steps = parseInt( count_data / (width/min_tick_pixels));
		
	var options = { 
			series: { 
				stack: stacked,
				shadowSize: 0.1
			},
			crosshair: { mode: 'xy' },
			selection: { mode: 'x', color: '#777' },
			grid: { 
				hoverable: true, 
				clickable: true, 
				borderWidth:1,
				borderColor: '#666',
				tickColor: '#eee',
				markings: markings
				},
			xaxes: [ { 
					tickFormatter: xFormatter,
					minTickSize: steps,
					color: '#000'
					} ],
			yaxes: [ { 
					tickFormatter: yFormatter,
					min: 0,
					color: '#000'
					},
					{
					  // align if we are to the right
					  alignTicksWithAxis: 1,
					  position: 'right',
					  
					  //tickFormatter: dFormatter
					} ]
					,
			legend: { 
				position: 'se', 
				container: $('#legend_'+graph_id),
				labelFormatter: lFormatter
				}
	   };

	var stack = 0, bars = true, lines = false, steps = false;
	
	var plot = $.plot($('#'+graph_id), datas, options);

	// Adjust the overview plot to the width and position of the main plot
	adjust_left_width_canvas(graph_id, 'overview_'+graph_id);
	
	// Adjust linked graph to the width and position of the main plot
	
	// Miniplot
    var overview = $.plot($('#overview_'+graph_id),datas, {
        series: {
			stack: stacked,
            lines: { show: true, lineWidth: 1 },
            shadowSize: 0
        },
        grid: { borderWidth: 1, hoverable: true, autoHighlight: false},
        xaxis: { },
			xaxes: [ { 
					tickFormatter: xFormatter,
					minTickSize: steps,
					color: '#000'
					} ],
        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
        selection: { mode: 'x', color: '#777' },
        legend: {show: false},
        crosshair: { mode: 'x' }
    });
    
    // Connection between plot and miniplot
    
    $('#'+graph_id).bind('plotselected', function (event, ranges) {
        // do the zooming
        dataInSelection = ranges.xaxis.to - ranges.xaxis.from;
        dataInPlot = plot.getData()[0].data.length;
        
        factor = dataInSelection / dataInPlot;
        
        new_steps = parseInt(factor*steps);
                
        plot = $.plot($('#'+graph_id), datas,
                      $.extend(true, {}, options, {
                        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to},
						xaxes: [ { 
								tickFormatter: xFormatter,
								minTickSize: new_steps,
								color: '#000'
								} ],                          
						legend: { show: false },
                      }));
		
		$('#menu_cancelzoom_'+graph_id).attr('src',homeurl+'/images/zoom_cross.png');
		
		currentRanges = ranges;
        // don't fire event on the overview to prevent eternal loop
        overview.setSelection(ranges, true);
    });
    
    $('#overview_'+graph_id).bind('plotselected', function (event, ranges) {
        plot.setSelection(ranges);
    });
    
    var legends = $('#legend_'+graph_id+' .legendLabel');
    
	var updateLegendTimeout = null;
    var latestPosition = null;
    var currentPlot = null;
    var currentRanges = null;
    
    // Update legend with the data of the plot in the mouse position
    function updateLegend() {
        updateLegendTimeout = null;
        
        var pos = latestPosition;
        
        var axes = currentPlot.getAxes();
        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
            pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
            return;
		}

        var j, dataset = currentPlot.getData();

		var i = 0;
        for (k = 0; k < dataset.length; k++) {
			
			// k is the real series counter
			// i is the series counter without thresholds
            var series = dataset[k];

			if(series.label == null) {
				continue;
			}
			
            // find the nearest points, x-wise
            for (j = 0; j < series.data.length; ++j)
                if (series.data[j][0] > pos.x) {
                    break;
				}
            
            var y = series.data[j][1];
														
			if(currentRanges == null || (currentRanges.xaxis.from < j && j < currentRanges.xaxis.to)) {
				$('#timestamp_'+graph_id).show();
				// If no legend, the timestamp labels are short and with value
				if(legends.length == 0) {
					$('#timestamp_'+graph_id).text(labels[j] + ' (' + parseFloat(y).toFixed(2) + ')');
				}
				else {
					$('#timestamp_'+graph_id).text(labels_long[j]);
				}
				
				$('#timestamp_'+graph_id).css('top', plot.offset().top-$('#timestamp_'+graph_id).height()*1.5);
				
				var timesize = $('#timestamp_'+graph_id).width();
				
				if(currentRanges != null) {
					dataset = plot.getData();
				}
				
				var timenewpos = dataset[0].xaxis.p2c(pos.x)+plot.offset().left;
			
				var canvaslimit = plot.offset().left + plot.width();
							
				if(timesize+timenewpos > canvaslimit) {
					$('#timestamp_'+graph_id).css('left', timenewpos - timesize);
				}
				else {
					$('#timestamp_'+graph_id).css('left', timenewpos);
				}
			}
			else {
				$('#timestamp_'+graph_id).hide();
			}

			var label_aux = series.label + ' = ';
			
			if(serie_types[i] != 'points') {
				legends.eq(i).text(label_aux.replace(/=.*/, '= ' + parseFloat(y).toFixed(2) +' '+unit));
			}				
			
			legends.eq(i).css('font-size',font_size+'pt');
			legends.eq(i).css('color','#000');
			
			i++;
        }
    }
    
    // Events
    $('#'+graph_id).bind('plothover',  function (event, pos, item) {
        overview.setCrosshair({ x: pos.x, y: 0 });
        currentPlot = plot;
        latestPosition = pos;
        if (!updateLegendTimeout) {
            updateLegendTimeout = setTimeout(updateLegend, 50);
		}
		
    });
    
	$('#'+graph_id).bind("plotclick", function (event, pos, item) {
		plot.unhighlight();
		if (item && item.series.label != '' && (item.series.label == legend_events || item.series.label == legend_events+series_suffix_str || item.series.label == legend_alerts || item.series.label == legend_alerts+series_suffix_str)) {
			plot.unhighlight();
			var canvaslimit = parseInt(plot.offset().left + plot.width());
			var dataset  = plot.getData();
			var timenewpos = parseInt(dataset[0].xaxis.p2c(pos.x)+plot.offset().left);
			var extrasize = parseInt($('#extra_'+graph_id).css('width').split('px')[0]);
			
			var left_pos;
			if(extrasize+timenewpos > canvaslimit) {
				left_pos = timenewpos - extrasize - 20;
			}
			else {
				left_pos = timenewpos + 20;
			}
			
			var extra_info = '<i>No info to show</i>';
			var extra_show = false;
			
			$('#extra_'+graph_id).css('left',left_pos);
			$('#extra_'+graph_id).css('top',plot.offset().top + 25);
			
			switch(item.series.label) {
				case legend_alerts+series_suffix_str:
				case legend_alerts:
					extra_info = '<b>'+legend_alerts+' - '+labels_long[item.dataIndex]+'</b>'+get_event_details(alertsz[item.dataIndex]);
					extra_show = true;
					break;
				case legend_events+series_suffix_str:
				case legend_events:
					extra_info = '<b>'+legend_events+' - '+labels_long[item.dataIndex]+'</b>'+get_event_details(eventsz[item.dataIndex]);
					extra_show = true;
					break;
				default:
						return;
					break;
			}
			
			if(extra_show) {
				$('#extra_'+graph_id).html(extra_info);
				$('#extra_'+graph_id).css('display','');
			}				
            plot.highlight(item.series, item.datapoint);
        }
        else {
			$('#extra_'+graph_id).html('');
			$('#extra_'+graph_id).css('display','none');
		}
    });
    
    $('#overview_'+graph_id).bind('plothover',  function (event, pos, item) {
		plot.setCrosshair({ x: pos.x, y: 0 });
		currentPlot = overview;
        latestPosition = pos;
        if (!updateLegendTimeout) {
            updateLegendTimeout = setTimeout(updateLegend, 50);
		}
    });
	
	$('#'+graph_id).bind('mouseout',resetInteractivity);
	$('#overview_'+graph_id).bind('mouseout',resetInteractivity);

	// Reset interactivity styles
	function resetInteractivity() {
		$('#timestamp_'+graph_id).hide();
		dataset = plot.getData();
        for (i = 0; i < dataset.length; ++i) {
            legends.eq(i).text(legends.eq(i).text().replace(/=.*/, ''));
        }
        plot.clearCrosshair();
        overview.clearCrosshair();
	}
	
	// Format functions
    function xFormatter(v, axis) {
		if(labels[v] == undefined) {
			return '';
		}
        return '<div style=font-size:'+font_size+'pt>'+labels[v]+'</div>';
    }
    
    function yFormatter(v, axis) {
		var formatted = number_format(v,force_integer,unit);
				
        return '<div style=font-size:'+font_size+'pt>'+formatted+'</div>';
    }
    
    function lFormatter(v, item) {
        return '<div style=color:#000;font-size:'+font_size+'pt>'+v+'</div>';
        // Prepared to turn series with a checkbox
        //return '<div style=color:#000;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
    }

    // Prepared to turn series with a checkbox
	//~ $('.check_serie_'+graph_id).click(function() {
		//~ // Format of the id is graph_3905jf93f03_serie_id
		//~ id_clicked = this.id.split('_')[3];
		//~ // Update the serie clicked
		//~ showed[id_clicked] = this.checked;
	//~ });
	
	if(menu) {
		var parent_height;
		$('#menu_overview_'+graph_id).click(function() {
			$('#overview_'+graph_id).toggle();
			adjust_menu(graph_id, plot, parent_height);
		});
		
		$('#menu_threshold_'+graph_id).click(function() {
			datas = new Array();
			
			if(thresholded) {
				thresholded = false;
			}
			else {
				$.each(threshold_data, function() {
					datas.push(this);
				});
				thresholded = true;
			}
			
			$.each(data_base, function() {
				// Prepared to turning series
				//if(showed[this.id.split('_')[1]]) {
					datas.push(this);
				//}
			});

			plot = $.plot($('#'+graph_id), datas, options);
			
			plot.setSelection(currentRanges);
		});
		
		$('#menu_cancelzoom_'+graph_id).click(function() {
			// cancel the zooming
			plot = $.plot($('#'+graph_id), data_base,
			  $.extend(true, {}, options, {
				  xaxis: { min: 0, max: max_x },
				  legend: { show: false }
			  }));
			
			$('#menu_cancelzoom_'+graph_id).attr('src',homeurl+'/images/zoom_cross.disabled.png');
			overview.clearSelection();
			currentRanges = null;
		});
		
		// Adjust the menu image on top of the plot
		$('#menu_overview_'+graph_id)[0].onload = function() {
			// If there is no legend we increase top-padding to make space to the menu
			if(legends.length == 0) {
				$('#menu_'+graph_id).parent().css('padding-top',$('#menu_'+graph_id).css('height'));	
			}
			// Add bottom margin in the legend
			var menu_height = parseInt($('#menu_'+graph_id).css('height').split('px')[0]);
			var legend_margin_bottom = parseInt($('#legend_'+graph_id).css('margin-bottom').split('px')[0]);
			$('#legend_'+graph_id).css('margin-bottom', menu_height+legend_margin_bottom+'px');
			parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]);
			adjust_menu(graph_id, plot, parent_height);
		}		
	}
	
	if(water_mark) {
		set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
	}
}

function adjust_menu(graph_id, plot, parent_height) {
	if($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) {
		left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0];
	}
	else {
		left_ticks_width = 0;
	}
	
	var parent_height_new = 0;

	var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]);
	if($('#overview_'+graph_id).css('display') == 'none') {
		overview_height = 0;
	}
	else {
		overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]);
	}
		
	$('#menu_'+graph_id).css('top',(-parent_height+legend_height-overview_height-7)+'px');
	$('#menu_'+graph_id).css('left',plot.width()-(left_ticks_width/2));
	$('#menu_'+graph_id).show();
}

function set_watermark(graph_id, plot, watermark_src) {
		var img = new Image();
		img.src = watermark_src;
		var context = plot.getCanvas().getContext('2d');

		// Once it's loaded draw the image on the canvas.
		img.addEventListener('load', function () {
			//~ // Now resize the image: x, y, w, h.
			
			var down_ticks_height = 0;
			if($('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height') != undefined) {
				down_ticks_height = $('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height').split('px')[0];
			}
			var left_pos = parseInt(context.canvas.width - 3) - $('#watermark_image_'+graph_id)[0].width;
			var top_pos = parseInt(context.canvas.height - down_ticks_height - 20) - $('#watermark_image_'+graph_id)[0].height;
			
			context.drawImage(this, left_pos, top_pos);

		}, false);
}

function get_event_details (event_ids) {
	table = '';
	if (typeof(event_ids) != "undefined") {
		var inputs = [];
		var table;
		inputs.push ("get_events_details=1");
		inputs.push ("event_ids="+event_ids);
		inputs.push ("page=include/ajax/events");
		jQuery.ajax ({
			data: inputs.join ("&"),
			type: 'GET',
			url: action="../../ajax.php",
			timeout: 10000,
			dataType: 'html',
			async: false,
			success: function (data) {
				table = data;
			}
		});
	}
	
	return table;
}
	
function adjust_left_width_canvas(adapter_id, adapted_id) {
	adapter_left_margin = $('#'+adapter_id+' .yAxis .tickLabel').css('width');

	adapted_pix = $('#'+adapted_id).css('width').split('px');
	new_adapted_width = parseInt(adapted_pix[0])-parseInt(adapter_left_margin);

	$('#'+adapted_id).css('width',new_adapted_width);

	$('#'+adapted_id).css('margin-left',adapter_left_margin);
}

function check_adaptions(graph_id) {
	var classes = $('#'+graph_id).attr('class').split(' ');
	
	$.each(classes, function(i,v) {
		// If has a class starting with adapted, we adapt it
		if(v.split('_')[0] == 'adapted') {
			var adapter_id = $('.adapter_'+v.split('_')[1]).attr('id');
			adjust_left_width_canvas(adapter_id, graph_id);
		}
	});
}

function number_format(number, force_integer, unit) {	
	if(force_integer) {
		if(Math.round(number) != number) {
			return '';
		}
	}
	else {
		var decimals = 2;
		var factor = 10 * decimals;
		number = Math.round(number*factor)/factor
	}
	
	var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];
	var pos = 0;
	while(1){
		if (number >= 1000) { //as long as the number can be divided by 1000
			pos++; //Position in array starting with 0
			number = number / 1000;
		}
		else {
			break;
		}
	}
	
	return number+' '+shorts[pos]+unit;
}