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

  if (colors != "") {
    colors = colors.split(separator);
  }

  var pieRadius = 0.9;

  var color = null;
  for (var i = 0; i < nseries; i++) {
    if (colors != "") {
      color = colors[i];
    }
    data[i] = { label: labels[i], data: parseFloat(data[i]), color: color };
  }

  var show_legend = true;
  if (legend_position == "hidden") {
    show_legend = false;
  }

  var conf_pie = {
    series: {
      pie: {
        show: true,
        radius: pieRadius
      }
    },
    legend: {
      show: show_legend
    },
    grid: {
      hoverable: true,
      clickable: true
    }
  };

  if (hide_labels != false && hide_labels != 0) {
    conf_pie.series.pie.label = {
      show: true,
      radius: 2 / 3,
      formatter: labelFormatter,
      threshold: 0.1
    };
  } else {
    conf_pie.series.pie.label = {
      show: false
    };
  }

  switch (legend_position) {
    case "bottom":
      conf_pie.legend.position = "se";
      break;
    case "right":
    case "inner":
      conf_pie.legend.container = $("#" + graph_id + "_legend");
    default:
      //TODO FOR TOP OR LEFT OR RIGHT
      break;
  }

  var plot = $.plot($("#" + graph_id), data, conf_pie);

  var legends = $("#" + graph_id + " .legendLabel");
  legends.css("font-size", font_size + "pt");

  // Events
  $("#" + graph_id).bind("plothover", pieHover);
  $("#" + graph_id).bind("plotclick", pieClick);
  $("#" + graph_id).bind("mouseout", resetInteractivity);
  $("#" + graph_id).css("margin-left", "auto");
  $("#" + graph_id).css("margin-right", "auto");

  function pieHover(event, pos, obj) {
    if (!obj) return;

    index = obj.seriesIndex;
    legends.css("color", "#3F3F3D");
    legends.eq(index).css("color", "");
  }

  function labelFormatter(label, series) {
    return (
      '<div style="font-size:' +
      font_size +
      "pt;" +
      'text-align:center;padding:2px;color:white;">' +
      label +
      "<br/>" +
      series.percent.toFixed(2) +
      "%</div>"
    );
  }

  // Reset styles
  function resetInteractivity() {
    legends.css("color", "#3F3F3D");
  }

  if (water_mark) {
    set_watermark(
      graph_id,
      plot,
      $("#watermark_image_" + graph_id).attr("src")
    );
  }
}

function pandoraFlotPieCustom(
  graph_id,
  values,
  labels,
  width,
  font_size,
  font,
  water_mark,
  separator,
  legend_position,
  height,
  colors,
  legend,
  background_color
) {
  font = font
    .split("/")
    .pop()
    .split(".")
    .shift();
  var labels = labels.split(separator);
  var legend = legend.split(separator);
  var data = values.split(separator);
  var no_data = 0;
  if (colors != "") {
    colors = colors.split(separator);
  }
  var colors_data = [
    "#FC4444",
    "#FFA631",
    "#FAD403",
    "#5BB6E5",
    "#F2919D",
    "#80BA27"
  ];
  var color = null;
  for (var i = 0; i < data.length; i++) {
    if (colors != "") {
      color = colors[i];
    }
    var datos = data[i];
    data[i] = { label: labels[i], data: parseFloat(data[i]), color: color };
    if (!datos) no_data++;
  }

  var label_conf;
  var show_legend = true;

  if (width <= 450) {
    show_legend = false;
    label_conf = {
      show: false
    };
  } else {
    label_conf = {
      show: true,
      radius: 0.75,
      formatter: function(label, series) {
        return (
          '<div style="font-size:' +
          font_size +
          "pt;" +
          'text-align:center;padding:2px;color:white;">' +
          series.percent.toFixed(2) +
          "%</div>"
        );
      },
      background: {
        opacity: 0.5,
        color: ""
      }
    };
  }

  var conf_pie = {
    series: {
      pie: {
        show: true,
        radius: 3 / 4,
        innerRadius: 0.4
        //label: label_conf
      }
    },
    legend: {
      show: show_legend
    },
    grid: {
      hoverable: true,
      clickable: true
    }
  };
  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  ) {
    conf_pie.series.pie.label = { show: false };
  }

  var plot = $.plot($("#" + graph_id), data, conf_pie);
  if (no_data == data.length) {
    $("#" + graph_id + " .overlay").remove();
    $("#" + graph_id + " .base").remove();
    $("#" + graph_id).prepend(
      "<img style='width:50%;' src='images/no_data_toshow.png' />"
    );
  }
  var legends = $("#" + graph_id + " .legendLabel");
  var j = 0;
  legends.each(function() {
    //$(this).css('width', $(this).width());
    $(this).css("font-size", font_size + "pt");
    $(this).removeClass("legendLabel");
    $(this).addClass(font);
    $(this).text(legend[j]);
    j++;
  });

  if ($('input[name="custom_graph"]').val()) {
    $(".legend>div").css("right", $(".legend>div").height() * -1);
    $(".legend>table").css("right", $(".legend>div").height() * -1);
  }
  //$('.legend>table').css('border',"1px solid #E2E2E2");

  if (background_color == "transparent") {
    $(".legend>table").css("background-color", "");
    $(".legend>div").css("background-color", "");
    $(".legend>table").css("color", "#aaa");
  } else if (background_color == "white") {
    $(".legend>table").css("background-color", "white");
    $(".legend>table").css("color", "black");
  } else if (background_color == "black") {
    $(".legend>table").css("background-color", "black");
    $(".legend>table").css("color", "#aaa");
  }

  $(".legend").hover(function() {
    return false;
  });

  var pielegends = $("#" + graph_id + " .pieLabelBackground");
  pielegends.each(function() {
    $(this)
      .css("transform", "rotate(-35deg)")
      .css("color", "black");
  });
  var labelpielegends = $("#" + graph_id + " .pieLabel");
  labelpielegends.each(function() {
    $(this)
      .css("transform", "rotate(-35deg)")
      .css("color", "black");
  });

  // Events
  $("#" + graph_id).bind("plothover", pieHover);
  $("#" + graph_id).bind("plotclick", Clickpie);
  $("#" + graph_id).bind("mouseout", resetInteractivity);
  $("#" + graph_id).css("margin-left", "auto");
  $("#" + graph_id).css("margin-right", "auto");

  function pieHover(event, pos, obj) {
    if (!obj) return;

    index = obj.seriesIndex;
    legends.css("color", "#3F3F3D");
    legends.eq(index).css("color", "");
  }

  function Clickpie(event, pos, obj) {
    if (!obj) return;
    percent = parseFloat(obj.series.percent).toFixed(2);
    valor = parseFloat(obj.series.data[0][1]);

    if (valor > 1000000) {
      value = Math.round((valor / 1000000) * 100) / 100;
      value = value + "M";
    } else {
      if (valor > 1000) {
        value = Math.round((valor / 1000) * 100) / 100;
        value = value + "K";
      } else value = valor;
    }

    alert("" + obj.series.label + ": " + value + " (" + percent + "%)");
  }

  // Reset styles
  function resetInteractivity() {
    legends.each(function() {
      // fix the widths so they don't jump around
      $(this).css("color", "#3F3F3D");
    });
  }

  if (water_mark) {
    set_watermark(
      graph_id,
      plot,
      $("#watermark_image_" + graph_id).attr("src")
    );
  }
  /*
	window.onresize = function(event) {
        $.plot($('#' + graph_id), data, conf_pie);
        if (no_data == data.length) {
			$('#'+graph_id+' .overlay').remove();
			$('#'+graph_id+' .base').remove();
			$('#'+graph_id).prepend("<img style='width:50%;' src='images/no_data_toshow.png' />");
		}
		var legends = $('#'+graph_id+' .legendLabel');
		var j = 0;
		legends.each(function () {
			//$(this).css('width', $(this).width());
			$(this).css('font-size', font_size+'pt');
			$(this).removeClass("legendLabel");
			$(this).addClass(font);
			$(this).text(legend[j]);
			j++;
		});

		if ($('input[name="custom_graph"]').val()) {
			$('.legend>div').css('right',($('.legend>div').height()*-1));
			$('.legend>table').css('right',($('.legend>div').height()*-1));
		}
		//$('.legend>table').css('border',"1px solid #E2E2E2");
		$('.legend>table').css('background-color',"transparent");

		var pielegends = $('#'+graph_id+' .pieLabelBackground');
		pielegends.each(function () {
			$(this).css('transform', "rotate(-35deg)").css('color', 'black');
		});
		var labelpielegends = $('#'+graph_id+' .pieLabel');
		labelpielegends.each(function () {
			$(this).css('transform', "rotate(-35deg)").css('color', 'black');
		});
    }
*/
}

function pandoraFlotHBars(
  graph_id,
  values,
  labels,
  water_mark,
  maxvalue,
  water_mark,
  separator,
  separator2,
  font,
  font_size,
  background_color,
  tick_color,
  min,
  max
) {
  var colors_data = [
    "#FC4444",
    "#FFA631",
    "#FAD403",
    "#5BB6E5",
    "#F2919D",
    "#80BA27"
  ];
  values = values.split(separator2);
  font = font
    .split("/")
    .pop()
    .split(".")
    .shift();
  var datas = new Array();
  for (i = 0; i < values.length; i++) {
    var serie = values[i].split(separator);

    var aux = new Array();
    for (j = 0; j < serie.length; j++) {
      var aux2 = parseFloat(serie[j]);
      aux.push([aux2, j]);
      datas.push({
        data: [[aux2, j]],
        color: colors_data[j]
      });
    }
  }

  var labels_total = new Array();
  labels = labels.split(separator);
  i = 0;
  for (i = 0; i < labels.length; i++) {
    labels_total.push([i, labels[i]]);
  }

  var stack = 0,
    bars = true,
    lines = false,
    steps = false;
  var k = 0;
  var options = {
    series: {
      bars: {
        show: true,
        barWidth: 0.75,
        align: "center",
        lineWidth: 1,
        fill: 1,
        horizontal: true
      }
    },
    grid: {
      hoverable: true,
      borderWidth: 1,
      tickColor: tick_color,
      borderColor: "#C1C1C1",
      backgroundColor: { colors: [background_color, background_color] }
    },
    xaxis: {
      color: tick_color,
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: font_size,
      axisLabelFontFamily: font + "Font",
      tickFormatter: xFormatter
    },
    yaxis: {
      font: {
        size: font_size + 2,
        color: "rgb(84, 84, 84)",
        family: font + "Font"
      },
      ticks: yFormatter
    },
    legend: {
      show: false
    }
  };

  // Fixed to avoid the graphs with all 0 datas
  // the X axis show negative part instead to
  // show the axis only the positive part.
  if (maxvalue == 0) {
    options["yaxis"]["min"] = 0;
    // Fixed the values with a lot of decimals in the situation
    // with all 0 values.
    options["yaxis"]["tickDecimals"] = 0;
  }

  if (max) {
    options["xaxis"]["max"] = max;
  }
  if (min) {
    options["xaxis"]["min"] = min;
  }

  var plot = $.plot($("#" + graph_id), datas, options);

  $("#" + graph_id).HUseTooltip();
  $("#" + graph_id).css("margin-left", "auto");
  $("#" + graph_id).css("margin-right", "auto");
  //~ $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });

  function yFormatter(v, axis) {
    format = new Array();
    for (i = 0; i < labels_total.length; i++) {
      var label = labels_total[i][1];
      // var shortLabel = reduceText(label, 25);
      var title = label;
      var margin_top = 0;
      if (label.length > 30) {
        label = reduceText(label, 30);
      }
      var div_attributes =
        'style="font-size:' +
        font_size +
        "pt !important;" +
        " margin: 0; max-width: 150px;" +
        "margin-right:5px";
      +"margin-left: -1.5em";
      +"text-align: right";

      if (label.indexOf("<br>") != -1) {
        div_attributes += "min-height: 2.5em;";
      }

      div_attributes += '" title="' + title + '" style="overflow: hidden;"';

      format.push([i, "<div " + div_attributes + ">" + label + "</div>"]);
    }
    return format;
  }

  function xFormatter(v, axis) {
    label = parseFloat(v);
    text = label.toLocaleString();
    if (label >= 1000000) text = text.substring(0, 4) + "M";
    else if (label >= 100000) text = text.substring(0, 3) + "K";
    else if (label >= 1000) text = text.substring(0, 2) + "K";

    return (
      '<div style="font-size:' +
      font_size +
      'pt !important;">' +
      text +
      "</div>"
    );
  }

  if (water_mark) {
    set_watermark(
      graph_id,
      plot,
      $("#watermark_image_" + graph_id).attr("src")
    );
  }
}

var previousPoint = null,
  previousLabel = null;

$.fn.HUseTooltip = function() {
  $(this).bind("plothover", function(event, pos, item) {
    if (item) {
      if (
        previousLabel != item.series.label ||
        previousPoint != item.seriesIndex
      ) {
        previousPoint = item.seriesIndex;
        previousLabel = item.series.label;
        $("#tooltip").remove();

        var x = item.datapoint[0];
        var y = item.datapoint[1];

        var color = item.series.color;
        showTooltip(pos.pageX, pos.pageY, color, "<strong>" + x + "</strong>");
      }
    } else {
      $("#tooltip").remove();
      previousPoint = null;
    }
  });
};
$.fn.VUseTooltip = function() {
  $(this).bind("plothover", function(event, pos, item) {
    if (item) {
      if (
        previousLabel != item.series.label ||
        previousPoint != item.seriesIndex
      ) {
        previousPoint = item.seriesIndex;
        previousLabel = item.series.label;

        $("#tooltip").remove();

        var x = item.datapoint[0];
        var y = item.datapoint[1];

        var color = item.series.color;
        showTooltip(pos.pageX, pos.pageY, color, "<strong>" + y + "</strong>");
      }
    } else {
      $("#tooltip").remove();
      previousPoint = null;
    }
  });
};

function showTooltip(x, y, color, contents) {
  $('<div id="tooltip">' + contents + "</div>")
    .css({
      position: "absolute",
      display: "none",
      top: y,
      left: x,
      border: "2px solid " + color,
      padding: "3px",
      "font-size": "9px",
      "border-radius": "5px",
      "background-color": "#fff",
      "font-family": "Verdana, Arial, Helvetica, Tahoma, sans-serif",
      opacity: 0.9
    })
    .appendTo("body")
    .fadeIn(200);
}

function pandoraFlotVBars(
  graph_id,
  values,
  labels,
  labels_long,
  legend,
  colors,
  water_mark,
  maxvalue,
  water_mark,
  separator,
  separator2,
  font,
  font_size,
  from_ux,
  from_wux,
  background_color,
  tick_color
) {
  values = values.split(separator2);
  legend = legend.split(separator);
  font = font
    .split("/")
    .pop()
    .split(".")
    .shift();
  labels_long = labels_long.length > 0 ? labels_long.split(separator) : 0;
  colors = colors.length > 0 ? colors.split(separator) : [];

  var colors_data =
    colors.length > 0
      ? colors
      : ["#FFA631", "#FC4444", "#FAD403", "#5BB6E5", "#F2919D", "#80BA27"];
  var datas = new Array();

  for (i = 0; i < values.length; i++) {
    var serie = values[i].split(separator);

    var aux = new Array();
    for (j = 0; j < serie.length; j++) {
      var aux2 = parseFloat(serie[j]);
      aux.push([aux2, j]);
      if (from_ux) {
        datas.push({
          data: [[j, aux2]],
          color: colors_data[j]
        });
      } else {
        datas.push({
          data: [[j, aux2]],
          color: colors_data[0]
        });
      }
    }
  }

  var labels_total = new Array();
  labels = labels.split(separator);
  i = 0;
  for (i = 0; i < labels.length; i++) {
    labels_total.push([i, labels[i]]);
  }

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

  var options = {
    series: {
      bars: {
        show: true,
        lineWidth: 1,
        fill: 1,
        align: "center",
        barWidth: 1
      }
    },
    xaxis: {
      color: tick_color,
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: font_size,
      axisLabelFontFamily: font + "Font",
      axisLabelPadding: 0,
      ticks: xFormatter,
      labelWidth: 130,
      labelHeight: 50
    },
    yaxis: {
      color: tick_color,
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: font_size,
      axisLabelFontFamily: font + "Font",
      axisLabelPadding: 100,
      autoscaleMargin: 0.02,
      tickFormatter: function(v, axis) {
        label = parseFloat(v);
        text = label.toLocaleString();
        if (label >= 1000000) text = text.substring(0, 4) + "M";
        else if (label >= 100000) text = text.substring(0, 3) + "K";
        else if (label >= 1000) text = text.substring(0, 2) + "K";

        return (
          '<div style="font-size:' +
          font_size +
          'pt !important;">' +
          text +
          "</div>"
        );
      }
    },
    legend: {
      noColumns: 100,
      labelBoxBorderColor: "",
      margin: 100,
      container: true,
      sorted: false
    },
    grid: {
      hoverable: true,
      borderWidth: 1,
      tickColor: tick_color,
      borderColor: "#C1C1C1",
      backgroundColor: { colors: [background_color, background_color] }
    }
  };

  if (from_wux) {
    options.series.bars.barWidth = 0.5;
    options.grid.aboveData = true;
    options.grid.borderWidth = 0;
    options.grid.markings = [
      { xaxis: { from: -0.25, to: -0.25 }, color: "#000" },
      { yaxis: { from: 0, to: 0 }, color: "#000" }
    ];
    options.grid.markingsLineWidth = 0.3;

    options.xaxis.tickLength = 0;
    options.yaxis.tickLength = 0;
  }

  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  )
    options.xaxis.labelWidth = 100;

  var plot = $.plot($("#" + graph_id), datas, options);
  $("#" + graph_id).VUseTooltip();
  $("#" + graph_id).css("margin-left", "auto");
  $("#" + graph_id).css("margin-right", "auto");

  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  )
    $("#" + graph_id + " .xAxis .tickLabel")
      .find("div")
      .css("top", "+0px")
      .css("left", "-20px");
  // Format functions
  function xFormatter(v, axis) {
    var format = new Array();
    for (i = 0; i < labels_total.length; i++) {
      var label = labels_total[i][1];
      var shortLabel = reduceText(label, 28);
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      )
        shortLabel = reduceText(label, 18);
      var title = "";
      if (label !== shortLabel) {
        title = label;
        label = shortLabel;
      }

      format.push([
        i,
        '<div class="' +
          font +
          '" title="' +
          title +
          '" style="word-break: normal; overflow:hidden; transform: rotate(-45deg); position:relative; top:+30px; left:0px; max-width: 100px;font-size:' +
          font_size +
          'pt !important;">' +
          label +
          "</div>"
      ]);
    }
    return format;
  }

  function yFormatter(v, axis) {
    return (
      '<div class="' +
      font +
      '" style="font-size:' +
      font_size +
      'pt !important;">' +
      v +
      "</div>"
    );
  }

  function lFormatter(v, axis) {
    return (
      '<div style="font-size:' + font_size + 'pt !important;">' + v + "</div>"
    );
  }

  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,
  font,
  font_size,
  separator,
  separator2,
  id_agent,
  full_legend,
  not_interactive,
  show_date
) {
  values = values.split(separator2);
  labels = labels.split(separator);
  legend = legend.split(separator);
  acumulate_data = acumulate_data.split(separator);
  datacolor = datacolor.split(separator);

  if (full_legend != false) {
    full_legend = full_legend.split(separator);
  }

  var font_size = parseInt(font_size);
  var font = font
    .split("/")
    .pop()
    .split(".")
    .shift();
  // 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: 1,
        fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] },
        lineWidth: 0,
        horizontal: true,
        steps: false,
        barWidth: 24 * 60 * 60 * 600
      },
      color: datacolor[i]
    });
  }

  var regex = /visual_console/;
  var match = regex.exec(window.location.href);

  var options = {
    series: {
      stack: true,
      bars: {
        align: "center"
      }
    },
    grid: {
      borderWidth: 1,
      borderColor: "#C1C1C1",
      tickColor: "#fff"
    },
    xaxes: [
      {
        show: show_date,
        tickFormatter: xFormatter,
        color: "",
        tickSize: intervaltick,
        tickLength: 0,
        font: {
          size: font_size + 2,
          family: font + "Font"
        }
      }
    ],
    yaxes: [
      {
        show: false,
        tickLength: 0
      }
    ],
    legend: {
      show: false
    }
  };

  if (match == null && not_interactive == 0) {
    options.grid["hoverable"] = true;
    options.grid["clickable"] = true;
  } else {
    options.grid["hoverable"] = false;
    options.grid["clickable"] = false;
  }

  $.plot($("#" + graph_id), datas, options);

  if (match == null) {
    // 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 / 4 + "px");
        //$('#extra_'+graph_id).css('top',plot.offset().top-extra_height-5+'px');
        $("#extra_" + graph_id).show();
      }
    });

    $("#" + graph_id).bind("plotclick", function(event, pos, item) {
      if (item) {
        //from time
        var from = legend[item.seriesIndex];
        //to time
        var to = legend[item.seriesIndex + 1];
        //current date
        var dateObj = new Date();

        if (full_legend != "") {
          newdate = full_legend[item.seriesIndex];
          newdate2 = full_legend[item.seriesIndex + 1];
        } else {
          var month = dateObj.getUTCMonth() + 1; //months from 1-12
          var day = dateObj.getUTCDate();
          var year = dateObj.getUTCFullYear();
          newdate = year + "/" + month + "/" + day;
        }

        if (!to) {
          to = "23:59";
        }

        if (full_legend != "") {
          if (newdate2 == undefined) {
            window.location =
              "index.php?sec=eventos&sec2=operation/events/events&id_agent=" +
              id_agent +
              "&date_from=" +
              newdate +
              "&time_from=" +
              from +
              "&status=-1";
          } else {
            window.location =
              "index.php?sec=eventos&sec2=operation/events/events&id_agent=" +
              id_agent +
              "&date_from=" +
              newdate +
              "&time_from=" +
              from +
              "&date_to=" +
              newdate2 +
              "&time_to=" +
              to +
              "&status=-1";
          }
        } else {
          window.location =
            "index.php?sec=eventos&sec2=operation/events/events&id_agent=" +
            id_agent +
            "&date_from=" +
            newdate +
            "&time_from=" +
            from +
            "&date_to=" +
            newdate +
            "&time_to=" +
            to +
            "&status=-1";
        }
      }
    });

    $("#" + graph_id).bind("mouseout", resetInteractivity);
  }

  // Reset interactivity styles
  function resetInteractivity() {
    $("#extra_" + graph_id).hide();
  }

  // Format functions
  function xFormatter(v, axis) {
    v = new Date(1000 * v);
    date_format =
      (v.getHours() < 10 ? "0" : "") +
      v.getHours() +
      ":" +
      (v.getMinutes() < 10 ? "0" : "") +
      v.getMinutes();
    return date_format;
  }
}

function pandoraFlotArea(
  graph_id,
  values,
  legend,
  series_type,
  color,
  water_mark,
  date_array,
  data_module_graph,
  params,
  events_array
) {
  //diferents vars
  var unit = params.unit ? params.unit : "";
  var homeurl = params.homeurl;
  var font_size = parseInt(params.font_size);
  var font = params.font
    .split("/")
    .pop()
    .split(".")
    .shift();
  var width = params.width;
  var height = params.height;
  var vconsole = params.vconsole;
  var dashboard = params.dashboard;
  var menu = params.menu;
  var min_x = date_array["start_date"] * 1000;
  var max_x = date_array["final_date"] * 1000;
  var type = parseInt(params.stacked);
  var show_legend = params.show_legend;
  var image_treshold = params.image_treshold;
  var short_data = params.short_data;
  var grid_color = params.grid_color;
  var background_color = params.backgroundColor;
  var legend_color = params.legend_color;
  var update_legend = {};

  //XXXXXX colocar
  var force_integer = 0;

  if (typeof type === "undefined" || type == "") {
    type = params.type_graph;
  }

  //for threshold
  var threshold = true;
  var thresholded = false;
  var yellow_threshold = parseFloat(data_module_graph.w_min);
  var red_threshold = parseFloat(data_module_graph.c_min);
  var yellow_up = parseFloat(data_module_graph.w_max);
  var red_up = parseFloat(data_module_graph.c_max);
  var yellow_inverse = parseInt(data_module_graph.w_inv);
  var red_inverse = parseInt(data_module_graph.c_inv);

  //XXXXX
  var markins_graph = true;

  // If threshold and up are the same, that critical or warning is disabled
  if (yellow_threshold == yellow_up) {
    yellow_inverse = false;
  }

  if (red_threshold == red_up) {
    red_inverse = false;
  }

  //Array with points to be painted
  var threshold_data = new Array();
  //Array with some interesting points
  var extremes = new Array();

  var yellow_only_min = yellow_up == 0 && yellow_threshold != 0;
  var red_only_min = red_up == 0 && red_threshold != 0;

  //color
  var warning = "yellow";
  var critical = "red";

  if (threshold) {
    // Warning interval. Change extremes depends on critical interval
    if (yellow_inverse && red_inverse) {
      if (red_only_min && yellow_only_min) {
        // C: |--------         |
        // W: |········====     |
        if (yellow_threshold > red_threshold) {
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: {
                colors: [
                  {
                    opacity: 0.1
                  },
                  {
                    opacity: 0.1
                  }
                ]
              }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });

          extremes["warning_normal_fdown_1"] = red_threshold;
          extremes["warning_normal_fdown_2"] = yellow_threshold;
        }
      } else if (!red_only_min && yellow_only_min) {
        // C: |--------   ------|
        // W: |········===·     |
        if (yellow_threshold > red_up) {
          yellow_threshold = red_up;
        }
        if (yellow_threshold > red_threshold) {
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = red_threshold;
          extremes["warning_normal_fdown_2"] = yellow_threshold;
        }
      } else if (red_only_min && !yellow_only_min) {
        // C: |-------          |
        // W: |·······====   ===|
        if (red_threshold < yellow_threshold) {
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = red_threshold;
          extremes["warning_normal_fdown_2"] = yellow_threshold;
        }

        if (yellow_up < red_threshold) {
          yellow_up = red_threshold;
        }
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "warning_up",
          data: [[max_x, yellow_up]],
          label: null,
          color: warning,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 255, 198, 0)"
        });
        extremes["warning_up"] = yellow_up;
      } else {
        if (yellow_threshold > red_threshold) {
          // C: |--------   ------|
          // W: |········===·  ···|
          if (yellow_threshold > red_up) {
            yellow_threshold = red_up;
          }
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = red_threshold;
          extremes["warning_normal_fdown_2"] = yellow_threshold;
        }
        if (yellow_up < red_up) {
          // C: |--------      ---|
          // W: |·····  ·======···|
          if (yellow_up < red_threshold) {
            yellow_up = red_up;
          }
          threshold_data.push({
            id: "warning_normal_fup",
            data: [[max_x, yellow_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_up - yellow_up,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fup_1"] = red_up;
          extremes["warning_normal_fup_2"] = yellow_up;
        }
        // If warning is under critical completely do not paint anything yellow
        // C: |--------    -----|
        // W: |····          ···|
      }
    } else if (yellow_inverse && !red_inverse) {
      if (red_only_min && yellow_only_min) {
        // C: |            -----|
        // W: |============···  |
        if (yellow_threshold > red_threshold) {
          yellow_threshold = red_threshold;
        }
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "warning_down",
          data: [[max_x, yellow_threshold]],
          label: null,
          color: warning,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 255, 198, 0)"
        });
        extremes["warning_down"] = yellow_threshold;
      } else if (!red_only_min && yellow_only_min) {
        // C: |      ----       |
        // W: |======····===    |

        if (yellow_threshold > red_up) {
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_up,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = red_up;
          extremes["warning_normal_fdown_2"] = yellow_threshold;
        }

        if (yellow_threshold > red_threshold) {
          yellow_threshold = red_threshold;
        }
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "warning_down",
          data: [[max_x, yellow_threshold]],
          label: null,
          color: warning,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 255, 198, 0)"
        });
        extremes["warning_down"] = yellow_threshold;
      } else if (red_only_min && !yellow_only_min) {
        if (yellow_threshold < red_threshold) {
          // C: |            -----|
          // W: |=======  ===·····|
          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_down",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_down"] = yellow_threshold;

          if (red_threshold > yellow_up) {
            threshold_data.push({
              id: "warning_normal_fup",
              data: [[max_x, yellow_up]],
              label: null,
              color: warning,
              bars: {
                show: true,
                align: "left",
                barWidth: red_threshold - yellow_up,
                lineWidth: 0,
                horizontal: true,
                fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
              },
              highlightColor: "rgba(254, 255, 198, 0)"
            });
            extremes["warning_normal_fup_1"] = yellow_up;
            extremes["warning_normal_fup_2"] = red_threshold;
          }
        } else {
          // C: |     ------------|
          // W: |=====··  ········|
          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_down",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_down"] = red_threshold;
        }
      } else {
        if (yellow_threshold > red_up) {
          // C: |    -----        |
          // W: |====·····===  ===|
          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_down",
            data: [[max_x, red_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_down"] = red_threshold;

          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, red_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_threshold - red_up,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = red_up;
          extremes["warning_normal_fdown_2"] = yellow_threshold;

          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_up",
            data: [[max_x, yellow_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_up"] = yellow_up;
        } else if (red_threshold > yellow_up) {
          // C: |          -----  |
          // W: |===    ===·····==|
          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_down",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_down"] = yellow_threshold;

          threshold_data.push({
            id: "warning_normal_fup",
            data: [[max_x, yellow_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_threshold - yellow_up,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fup_1"] = yellow_up;
          extremes["warning_normal_fup_2"] = red_threshold;

          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_up",
            data: [[max_x, red_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_up"] = red_up;
        } else {
          // C: |  --------       |
          // W: |==·    ···=======|
          if (yellow_threshold > red_threshold) {
            yellow_threshold = red_threshold;
          }
          if (yellow_up < red_up) {
            yellow_up = red_up;
          }

          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_down",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_down"] = yellow_threshold;

          threshold_data.push({
            // barWidth will be correct on draw time
            id: "warning_up",
            data: [[max_x, yellow_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: 1,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_up"] = yellow_up;
        }
      }
    } else if (!yellow_inverse && red_inverse) {
      if (yellow_only_min && red_only_min) {
        // C: |-----            |
        // W: |   ··============|
        if (yellow_threshold < red_threshold) {
          yellow_threshold = red_threshold;
        }
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "warning_up",
          data: [[max_x, yellow_threshold]],
          label: null,
          color: warning,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 255, 198, 0)"
        });
        extremes["warning_up"] = yellow_threshold;
      } else if (!yellow_only_min && red_only_min) {
        // C: |-----            |
        // W: |   ··========    |
        if (yellow_threshold < red_threshold) {
          yellow_threshold = red_threshold;
        }
        if (yellow_up > red_threshold) {
          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_up - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = yellow_up;
        }
      } else if (yellow_only_min && !red_only_min) {
        // C: |-----      ------|
        // W: |   ··======······|
        if (yellow_threshold < red_threshold) {
          yellow_threshold = red_threshold;
        }
        if (yellow_threshold < red_up) {
          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_up - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = red_up;
        }
        // If warning is under critical completely do not paint anything yellow
        // C: |--------    -----|
        // W: |              ···|
      } else {
        if (red_up > yellow_threshold && red_threshold < yellow_up) {
          // C: |-----      ------|
          // W: |   ··======·     |
          if (yellow_threshold < red_threshold) {
            yellow_threshold = red_threshold;
          }
          if (yellow_up > red_up) {
            yellow_up = red_up;
          }

          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_up - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = yellow_up;
        }
      }
    }
    // If warning is under critical completely do not paint anything yellow
    // C: |--------    -----|   or	// C: |--------    -----|
    // W: |   ····          |		// W: |             ··  |
    else {
      if (red_only_min && yellow_only_min) {
        if (yellow_threshold < red_threshold) {
          // C: |        ---------|
          // W: |   =====·········|
          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_threshold - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = red_threshold;
        }
      } else if (red_only_min && !yellow_only_min) {
        // C: |        ---------|
        // W: |   =====···      |
        if (yellow_up > red_threshold) {
          yellow_up = red_threshold;
        }
        if (yellow_threshold < red_threshold) {
          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_up - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = yellow_up;
        }
      } else if (!red_only_min && yellow_only_min) {
        // C: |     -------     |
        // W: |   ==·······=====|
        if (yellow_threshold < red_threshold) {
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_threshold - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = yellow_threshold;
          extremes["warning_normal_fdown_2"] = red_threshold;
        }

        if (yellow_threshold < red_up) {
          yellow_threshold = red_up;
        }

        threshold_data.push({
          // barWidth will be correct on draw time
          id: "warning_up",
          data: [[max_x, yellow_threshold]],
          label: null,
          color: warning,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 255, 198, 0)"
        });
        extremes["warning_up"] = yellow_threshold;
      } else {
        if (red_threshold > yellow_threshold && red_up < yellow_up) {
          // C: |    ------       |
          // W: |  ==······====   |
          threshold_data.push({
            id: "warning_normal_fdown",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: red_threshold - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fdown_1"] = yellow_threshold;
          extremes["warning_normal_fdown_2"] = red_threshold;

          threshold_data.push({
            id: "warning_normal_fup",
            data: [[max_x, red_up]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_up - red_up,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_fup_1"] = red_up;
          extremes["warning_normal_fup_2"] = yellow_up;
        } else if (red_threshold < yellow_threshold && red_up > yellow_up) {
          // If warning is under critical completely do not paint anything yellow
          // C: |  --------        |
          // W: |    ····          |
        } else {
          // C: |     --------    |   or	// C: |     ------      |
          // W: |   ==··          |		// W: |        ···====  |
          if (yellow_up > red_threshold && yellow_up < red_up) {
            yellow_up = red_threshold;
          }
          if (yellow_threshold < red_up && yellow_threshold > red_threshold) {
            yellow_threshold = red_up;
          }
          threshold_data.push({
            id: "warning_normal",
            data: [[max_x, yellow_threshold]],
            label: null,
            color: warning,
            bars: {
              show: true,
              align: "left",
              barWidth: yellow_up - yellow_threshold,
              lineWidth: 0,
              horizontal: true,
              fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
            },
            highlightColor: "rgba(254, 255, 198, 0)"
          });
          extremes["warning_normal_1"] = yellow_threshold;
          extremes["warning_normal_2"] = yellow_up;
        }
      }
    }

    // Critical interval
    if (red_inverse) {
      if (!red_only_min) {
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "critical_up",
          data: [[max_x, red_up]],
          label: null,
          color: critical,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 236, 234, 0)"
        });
        extremes["critical_normal_1"] = red_threshold;
        extremes["critical_normal_2"] = red_up;
      }
      threshold_data.push({
        // barWidth will be correct on draw time
        id: "critical_down",
        data: [[max_x, red_threshold]],
        label: null,
        color: critical,
        bars: {
          show: true,
          align: "left",
          barWidth: 1,
          lineWidth: 0,
          horizontal: true,
          fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
        },
        highlightColor: "rgba(254, 236, 234, 0)"
      });
      extremes["critical_normal_3"] = red_threshold;
      extremes["critical_normal_4"] = red_threshold;
    } else {
      if (red_up == 0 && red_threshold != 0) {
        threshold_data.push({
          // barWidth will be correct on draw time
          id: "critical_up",
          data: [[max_x, red_threshold]],
          label: null,
          color: critical,
          bars: {
            show: true,
            align: "left",
            barWidth: 1,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 236, 234, 0)"
        });
        extremes["critical_normal_1"] = red_threshold;
        extremes["critical_normal_2"] = red_up;
      } else {
        threshold_data.push({
          id: "critical_normal",
          data: [[max_x, red_threshold]],
          label: null,
          color: critical,
          bars: {
            show: true,
            align: "left",
            barWidth: red_up - red_threshold,
            lineWidth: 0,
            horizontal: true,
            fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1 }] }
          },
          highlightColor: "rgba(254, 236, 234, 0)"
        });
        extremes["critical_normal_1"] = red_threshold;
        extremes["critical_normal_2"] = red_up;
      }
    }
  }

  switch (type) {
    case "line":
    case 2:
      stacked = null;
      filled_s = false;
      break;
    case 3:
      stacked = "stack";
      filled_s = false;
      break;
    default:
    case "area":
    case 0:
      stacked = null;
      filled_s = 0.3;
      break;
    case 1:
      stacked = "stack";
      filled_s = 0.3;
      break;
  }

  var datas = new Array();
  var data_base = new Array();
  var lineWidth = $("#hidden-line_width_graph").val() || 1;

  i = 0;
  $.each(values, function(index, value) {
    if (typeof value.data !== "undefined") {
      if (index.search("alert") >= 0) {
        fill_color = "#ff7f00";
      } else if (index.search("event") >= 0) {
        fill_color = "#ff0000";
      } else {
        fill_color = "green";
      }

      switch (series_type[index]) {
        case "area":
          line_show = true;
          points_show = false; // XXX - false
          filled = filled_s;
          steps_chart = false;
          radius = false;
          fill_points = fill_color;
          break;
        case "percentil":
        case "line":
        default:
          line_show = true;
          points_show = false;
          filled = false;
          steps_chart = false;
          radius = false;
          fill_points = fill_color;
          break;
        case "points":
          line_show = false;
          points_show = true;
          filled = false;
          steps_chart = false;
          radius = 1.5;
          fill_points = fill_color;
          break;
        case "unknown":
        case "boolean":
          line_show = true;
          points_show = false;
          filled = filled_s;
          steps_chart = true;
          radius = false;
          fill_points = fill_color;
          break;
      }

      if (series_type[index] != "boolean") {
        if (value.slice_data) {
          update_legend[index] = value.slice_data;
        }
      }

      //in graph stacked unset percentil
      if (
        !(type == 1 && /percentil/.test(index) == true) &&
        !(type == 3 && /percentil/.test(index) == true)
      ) {
        data_base.push({
          id: "serie_" + i,
          data: value.data,
          label: index,
          color: color[index]["color"],
          lines: {
            show: line_show,
            fill: filled,
            lineWidth: lineWidth,
            steps: steps_chart
          },
          points: {
            show: points_show,
            radius: 3,
            fillColor: fill_points
          },
          legend: legend.index
        });
      }
    }
    i++;
  });

  // The first execution, the graph data is the base data
  datas = data_base;

  var number_ticks = 8;
  if (vconsole) {
    number_ticks = 5;
  }

  var maxticks = date_array["period"] / 3600 / number_ticks;

  var options = {
    series: {
      stack: stacked,
      shadowSize: 0.1
    },
    crosshair: {
      mode: "xy",
      color: "grey"
    },
    selection: {
      mode: "xy",
      color: "#777"
    },
    export: {
      export_data: true,
      labels_long: legend,
      homeurl: homeurl
    },
    grid: {
      hoverable: true,
      clickable: true,
      borderWidth: 1,
      borderColor: "#C1C1C1",
      backgroundColor: background_color,
      color: grid_color,
      autoHighlight: true
    },
    xaxis: {
      min: min_x,
      max: max_x,
      font: {
        size: font_size + 2,
        color: legend_color,
        family: font + "Font"
      }
    },
    xaxes: [
      {
        mode: "time",
        timezone: "browser",
        localTimezone: true
        //tickSize: [maxticks, 'hour']
      }
    ],
    yaxis: {
      font: {
        size: font_size + 2,
        color: legend_color,
        family: font + "Font",
        variant: "small-caps"
      }
    },
    yaxes: [
      {
        tickFormatter: yFormatter,
        position: "left"
      }
    ],
    legend: {
      position: "se",
      container: $("#legend_" + graph_id),
      labelFormatter: lFormatter
    }
  };

  if (vconsole) {
    options.grid["hoverable"] = false;
    options.grid["clickable"] = false;
    options.crosshair = false;
    options.selection = false;
  }

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

  var plot = $.plot($("#" + graph_id), datas, options);

  // Re-calculate the graph height with the legend height
  if (dashboard || vconsole) {
    $acum = 0;
    if (dashboard) $acum = 35;
    var hDiff =
      $("#" + graph_id).height() - $("#legend_" + graph_id).height() - $acum;
    if (
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
    } else {
      $("#" + graph_id).css("height", hDiff);
    }
  }

  /*
		//XXXREvisar esto
		if (vconsole) {
			var myCanvas = plot.getCanvas();
			plot.setupGrid(); // redraw plot to new size
			plot.draw();
			var image = myCanvas.toDataURL("image/png");
			return;
		}
	*/

  // Adjust the overview plot to the width and position of the main plot
  adjust_left_width_canvas(graph_id, "overview_" + graph_id);
  update_left_width_canvas(graph_id);

  // Adjust overview when main chart is resized
  $("#" + graph_id).resize(function() {
    update_left_width_canvas(graph_id);
  });

  // Adjust linked graph to the width and position of the main plot
  // Miniplot
  if (!vconsole) {
    var overview = $.plot($("#overview_" + graph_id), datas, {
      series: {
        stack: stacked,
        shadowSize: 0.1
      },
      crosshair: {
        mode: "xy"
      },
      selection: {
        mode: "xy",
        color: "#777"
      },
      export: {
        export_data: true,
        labels_long: legend,
        homeurl: homeurl
      },
      grid: {
        hoverable: true,
        clickable: true,
        borderWidth: 1,
        borderColor: "#C1C1C1",
        tickColor: background_color,
        color: grid_color,
        autoHighlight: true
      },
      xaxis: {
        min: date_array.start_date * 1000,
        max: date_array.final_date * 1000,
        font: {
          size: font_size + 2,
          color: legend_color,
          family: font + "Font"
        }
      },
      xaxes: [
        {
          mode: "time",
          timezone: "browser",
          localTimezone: true
          //tickSize: [maxticks, 'hour']
        }
      ],
      yaxis: {
        font: {
          size: font_size + 2,
          color: legend_color,
          family: font + "Font"
        }
      },
      yaxes: [
        {
          tickFormatter: yFormatter,
          position: "left"
        }
      ],
      legend: {
        position: "se",
        container: $("#legend_" + graph_id),
        labelFormatter: lFormatter
      }
    });
  }

  // Adjust overview when main chart is resized
  $("#overview_" + graph_id).resize(function() {
    update_left_width_canvas(graph_id);
  });

  var max_draw = [];
  max_draw["max"] = plot.getAxes().yaxis.max;
  max_draw["min"] = plot.getAxes().yaxis.min;

  // Connection between plot and miniplot
  $("#" + graph_id).bind("plotselected", function(event, ranges) {
    // do the zooming if exist menu to undo it
    if (menu == 0) {
      return;
    }

    dataInSelection = ranges.xaxis.to - ranges.xaxis.from;

    var maxticks_zoom = dataInSelection / 3600000 / number_ticks;
    if (maxticks_zoom < 0.001) {
      maxticks_zoom = dataInSelection / 60000 / number_ticks;
      if (maxticks_zoom < 0.001) {
        maxticks_zoom = 0;
      }
    }

    if (thresholded) {
      var y_recal = axis_thresholded(
        threshold_data,
        plot.getAxes().yaxis.min,
        plot.getAxes().yaxis.max,
        red_threshold,
        extremes,
        red_up
      );
    } else {
      var y_recal = ranges.yaxis;
    }

    if (thresholded) {
      data_base_treshold = add_threshold(
        data_base,
        threshold_data,
        ranges.yaxis.from,
        y_recal.max,
        red_threshold,
        extremes,
        red_up,
        markins_graph
      );

      plot = $.plot(
        $("#" + graph_id),
        data_base_treshold,
        $.extend(true, {}, options, {
          grid: {
            borderWidth: 1,
            hoverable: true,
            autoHighlight: true
          },
          xaxis: {
            min: ranges.xaxis.from,
            max: ranges.xaxis.to,
            font: {
              size: font_size + 2,
              color: legend_color,
              family: font + "Font"
            }
          },
          xaxes: [
            {
              mode: "time",
              timezone: "browser",
              localTimezone: true,
              tickSize: [maxticks_zoom, "hour"]
            }
          ],
          yaxis: {
            min: ranges.yaxis.from,
            max: y_recal.max,
            font: {
              size: font_size + 2,
              color: legend_color,
              family: font + "Font"
            }
          },
          yaxes: [
            {
              tickFormatter: yFormatter,
              position: "left"
            }
          ],
          legend: {
            show: true
          }
        })
      );
    } else {
      plot = $.plot(
        $("#" + graph_id),
        data_base,
        $.extend(true, {}, options, {
          grid: {
            borderWidth: 1,
            hoverable: true,
            autoHighlight: true
          },
          xaxis: {
            min: ranges.xaxis.from,
            max: ranges.xaxis.to,
            font: {
              size: font_size + 2,
              color: legend_color,
              family: font + "Font"
            }
          },
          xaxes: [
            {
              mode: "time",
              timezone: "browser",
              localTimezone: true,
              tickSize: [maxticks_zoom, "hour"]
            }
          ],
          yaxis: {
            min: ranges.yaxis.from,
            max: ranges.yaxis.to,
            font: {
              size: font_size + 2,
              color: legend_color,
              family: font + "Font"
            }
          },
          yaxes: [
            {
              tickFormatter: yFormatter,
              position: "left"
            }
          ],
          legend: {
            show: true
          }
        })
      );
    }

    $("#menu_cancelzoom_" + graph_id).attr(
      "src",
      homeurl + "images/zoom_cross_grey.png"
    );

    max_draw["max"] = ranges.yaxis.to;
    max_draw["min"] = ranges.yaxis.from;

    // 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 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;
    }

    $("#timestamp_" + graph_id).show();

    var d = new Date(pos.x);
    var monthNames = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ];

    date_format =
      (d.getDate() < 10 ? "0" : "") +
      d.getDate() +
      " " +
      monthNames[d.getMonth()] +
      " " +
      d.getFullYear() +
      "\n" +
      (d.getHours() < 10 ? "0" : "") +
      d.getHours() +
      ":" +
      (d.getMinutes() < 10 ? "0" : "") +
      d.getMinutes() +
      ":" +
      (d.getSeconds() < 10 ? "0" : "") +
      d.getSeconds();

    $("#timestamp_" + graph_id).text(date_format);

    var timesize = $("#timestamp_" + graph_id).width();

    dataset = currentPlot.getData();

    var timenewpos =
      dataset[0].xaxis.p2c(pos.x) +
      $(".yAxis>div")
        .eq(0)
        .width();
    var canvaslimit = $("#" + graph_id).width();

    $("#timestamp_" + graph_id).css(
      "top",
      currentPlot.getPlotOffset().top -
        $("#timestamp_" + graph_id).height() +
        $("#legend_" + graph_id).height()
    );

    $("#timestamp_" + graph_id).css("color", legend_color);
    $("#timestamp_" + graph_id).css("font-size", font_size + 2 + "px");
    $("#timestamp_" + graph_id).css("font-family", font + "Font");

    if (timesize + timenewpos > canvaslimit) {
      $("#timestamp_" + graph_id).css("left", timenewpos - timesize);
    } else {
      $("#timestamp_" + graph_id).css("left", timenewpos);
    }

    var 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;
        }

        if (series.data[j]) {
          var y = series.data[j][1];
          var x = Math.round(series.data[j][0]) - 1;
        }
      }

      y_array = format_unit_yaxes(y);

      y = y_array["y"];
      how_bigger = y_array["unit"];

      var data_legend = [];

      // The graphs of points type and unknown graphs will dont be updated
      if (
        series_type[dataset[k]["label"]] != "points" &&
        series_type[dataset[k]["label"]] != "unknown" &&
        series_type[dataset[k]["label"]] != "percentil"
      ) {
        if (Object.keys(update_legend).length == 0) {
          var label_aux = legend[series.label];

          $("#legend_" + graph_id + " .legendLabel")
            .eq(i)
            .html(
              label_aux +
                " value = " +
                (short_data
                  ? number_format(y, 0, "", short_data)
                  : parseFloat(y)) +
                how_bigger +
                " " +
                unit
            );
        } else {
          $.each(update_legend, function(index, value) {
            if (!value[x]) {
              x = x + 1;
            }
            if (value[x].min) {
              min_y_array = format_unit_yaxes(value[x].min);
              min_y = min_y_array["y"];
              min_bigger = min_y_array["unit"];
            } else {
              min_y = 0;
              min_bigger = "";
            }

            if (value[x].max) {
              max_y_array = format_unit_yaxes(value[x].max);
              max_y = max_y_array["y"];
              max_bigger = max_y_array["unit"];
            } else {
              max_y = 0;
              max_bigger = "";
            }

            if (value[x].avg) {
              avg_y_array = format_unit_yaxes(value[x].avg);
              avg_y = avg_y_array["y"];
              avg_bigger = avg_y_array["unit"];
            } else {
              avg_y = 0;
              avg_bigger = "";
            }

            data_legend[index] =
              " Min: " +
              (short_data
                ? number_format(min_y, 0, "", short_data)
                : parseFloat(min_y)) +
              min_bigger +
              " Max: " +
              (short_data
                ? number_format(max_y, 0, "", short_data)
                : parseFloat(max_y)) +
              max_bigger +
              " Avg: " +
              (short_data
                ? number_format(avg_y, 0, "", short_data)
                : parseFloat(avg_y)) +
              avg_bigger;
          });

          var label_aux =
            legend[series.label].split(":")[0] + data_legend[series.label];
          $("#legend_" + graph_id + " .legendLabel")
            .eq(i)
            .html(label_aux);
        }
      }

      $("#legend_" + graph_id + " .legendLabel")
        .eq(i)
        .css("color", legend_color);
      $("#legend_" + graph_id + " .legendLabel")
        .eq(i)
        .css("font-size", font_size + 2 + "px");
      $("#legend_" + graph_id + " .legendLabel")
        .eq(i)
        .css("font-family", font + "Font");

      i++;
    }
  }

  // Events
  $("#overview_" + graph_id).bind("plothover", function(event, pos, item) {
    plot.setCrosshair({ x: pos.x, y: pos.y });
    currentPlot = plot;
    latestPosition = pos;
    if (!updateLegendTimeout) {
      updateLegendTimeout = setTimeout(updateLegend, 50);
    }
  });

  $("#" + graph_id).bind("plothover", function(event, pos, item) {
    overview.setCrosshair({ x: pos.x, y: pos.y });
    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 != null &&
      (item.series.label.search("alert") >= 0 ||
        item.series.label.search("event") >= 0)
    ) {
      plot.unhighlight();

      $("#extra_" + graph_id).css("width", "170px");
      $("#extra_" + graph_id).css("height", "60px");

      var dataset = plot.getData();
      var extra_info = "<i>No info to show</i>";
      var extra_show = false;
      var extra_height = $("#extra_" + graph_id).height();
      var extra_width = parseInt(
        $("#extra_" + graph_id)
          .css("width")
          .split("px")[0]
      );
      var events_data = new Array();
      var offset_graph = plot.getPlotOffset();
      var offset_relative = plot.offset();
      var width_graph = plot.width();
      var height_legend = $("#legend_" + graph_id).height();
      var coord_x = pos.pageX - offset_relative.left + offset_graph.left;
      var coord_y = offset_graph.top + height_legend + extra_height;

      if (coord_x + extra_width > width_graph) {
        coord_x = coord_x - extra_width;
      }

      var coord_y = offset_graph.top + height_legend + extra_height;

      $("#extra_" + graph_id).css("left", coord_x);
      $("#extra_" + graph_id).css("top", coord_y);

      if (
        item.series.label.search("alert") >= 0 ||
        item.series.label.search("event") >= 0
      ) {
        $.each(events_array, function(i, v) {
          $.each(v, function(index, value) {
            if (
              value.utimestamp == item.datapoint[0] / 1000 ||
              value.utimestamp == item.datapoint[0] / 1000 - 1
            ) {
              events_data = value;
            }
          });
        });

        if (events_data.event_type.search("alert") >= 0) {
          $extra_color = "#FFA631";
        } else if (events_data.event_type.search("critical") >= 0) {
          $extra_color = "#FC4444";
        } else if (events_data.event_type.search("warning") >= 0) {
          $extra_color = "#FAD403";
        } else if (events_data.event_type.search("unknown") >= 0) {
          $extra_color = "#3BA0FF";
        } else if (events_data.event_type.search("normal") >= 0) {
          $extra_color = "#80BA27";
        } else {
          $extra_color = "#ffffff";
        }

        $("#extra_" + graph_id).css("background-color", $extra_color);

        extra_info = "<b>" + events_data.evento + ":";
        extra_info +=
          '<br><br><span style="font-weight: normal;">Time: ' +
          events_data.timestamp;
        extra_show = true;
      }

      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");
    }
  });

  if (!vconsole) {
    $("#" + graph_id).bind("mouseout", resetInteractivity);
    $("#overview_" + graph_id).bind("mouseout", resetInteractivity);
  }

  if (image_treshold) {
    if (!thresholded) {
      // Recalculate the y axis
      var y_recal = axis_thresholded(
        threshold_data,
        plot.getAxes().yaxis.min,
        plot.getAxes().yaxis.max,
        red_threshold,
        extremes,
        red_up
      );
    } else {
      var y_recal = plot.getAxes().yaxis.max;
    }

    datas_treshold = add_threshold(
      data_base,
      threshold_data,
      plot.getAxes().yaxis.min,
      y_recal.max,
      red_threshold,
      extremes,
      red_up,
      markins_graph
    );

    plot = $.plot(
      $("#" + graph_id),
      datas_treshold,
      $.extend(true, {}, options, {
        yaxis: {
          max: y_recal.max
        },
        xaxis: {
          min: plot.getAxes().xaxis.min,
          max: plot.getAxes().xaxis.max
        }
      })
    );

    thresholded = true;
  }

  // Reset interactivity styles
  function resetInteractivity() {
    $("#timestamp_" + graph_id).hide();
    dataset = plot.getData();
    for (i = 0; i < dataset.length; ++i) {
      var series = dataset[i];
      var label_aux = legend[series.label];
      $("#legend_" + graph_id + " .legendLabel")
        .eq(i)
        .html(label_aux);
    }
    $("#legend_" + graph_id + " .legendLabel").css("color", legend_color);
    $("#legend_" + graph_id + " .legendLabel").css(
      "font-size",
      font_size + 2 + "px"
    );
    $("#legend_" + graph_id + " .legendLabel").css(
      "font-family",
      font + "Font"
    );

    plot.clearCrosshair();
    overview.clearCrosshair();
  }

  function yFormatter(v, axis) {
    if (short_data) {
      var formatted = number_format(v, force_integer, "", short_data);
    } else {
      // It is an integer
      if (v - Math.floor(v) == 0) {
        var formatted = number_format(v, force_integer, "", 2);
      } else {
        var formatted = v;
      }
    }

    // Get only two decimals
    formatted = round_with_decimals(formatted, 100);
    return formatted;
  }

  function lFormatter(v, item) {
    return '<span style="color:' + legend_color + '">' + legend[v] + "</span>";
  }

  $("#overview_" + graph_id).css("display", "none");

  if (menu) {
    var parent_height;
    $("#menu_overview_" + graph_id).click(function() {
      $("#overview_" + graph_id).toggle();
    });

    $("#menu_export_csv_" + graph_id).click(function(e) {
      e.preventDefault();
      plot.exportDataCSV();
      var es_firefox =
        navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
      if (es_firefox) {
        $("#dialog")
          .css("visibility", "visible")
          .dialog();
      }
      delete data_base[0].threshold;
      plot = $.plot(
        $("#" + graph_id),
        data_base,
        $.extend(true, {}, options, {
          legend: { show: true }
        })
      );
    });

    $("#menu_threshold_" + graph_id).click(function() {
      datas = new Array();
      if (thresholded) {
        $.each(data_base, function() {
          datas.push(this);
        });

        delete data_base[0].threshold;

        plot = $.plot(
          $("#" + graph_id),
          data_base,
          $.extend(true, {}, options, {
            yaxis: {
              min: max_draw["min"],
              max: max_draw["max"]
            },
            xaxis: {
              min: plot.getAxes().xaxis.min,
              max: plot.getAxes().xaxis.max
            }
          })
        );
        thresholded = false;
      } else {
        if (!thresholded) {
          // Recalculate the y axis
          var y_recal = axis_thresholded(
            threshold_data,
            plot.getAxes().yaxis.min,
            plot.getAxes().yaxis.max,
            red_threshold,
            extremes,
            red_up
          );
        } else {
          var y_recal = plot.getAxes().yaxis.max;
        }

        datas_treshold = add_threshold(
          data_base,
          threshold_data,
          plot.getAxes().yaxis.min,
          y_recal.max,
          red_threshold,
          extremes,
          red_up,
          markins_graph
        );

        plot = $.plot(
          $("#" + graph_id),
          datas_treshold,
          $.extend(true, {}, options, {
            yaxis: {
              min: max_draw["min"],
              max: y_recal.max
            },
            xaxis: {
              min: plot.getAxes().xaxis.min,
              max: plot.getAxes().xaxis.max
            }
          })
        );

        thresholded = true;
      }
    });

    $("#menu_cancelzoom_" + graph_id).click(function() {
      // cancel the zooming
      delete data_base[0].threshold;
      plot = $.plot(
        $("#" + graph_id),
        data_base,
        $.extend(true, {}, options, {
          legend: { show: true }
        })
      );
      $("#menu_cancelzoom_" + graph_id).attr(
        "src",
        homeurl + "images/zoom_cross.disabled.png"
      );
      overview.clearSelection();
      currentRanges = null;
      thresholded = false;
      max_draw = [];
    });

    // Adjust the menu image on top of the plot
    // If there is no legend we increase top-padding to make space to the menu
    if (legend.length == 0) {
      $("#menu_" + graph_id)
        .parent()
        .css("padding-top", $("#menu_" + graph_id).css("height"));
    }

    // Add bottom margin in the legend
    // Estimated height of 24 (works fine with this data in all browsers)
    menu_height = 24;
    $("#legend_" + graph_id).css("margin-bottom", "10px");
    parent_height = parseInt(
      $("#menu_" + graph_id)
        .parent()
        .css("height")
        .split("px")[0]
    );
    adjust_menu(graph_id, plot, parent_height, width, show_legend);
  }

  if (!dashboard) {
    if (water_mark) {
      set_watermark(
        graph_id,
        plot,
        $("#watermark_image_" + graph_id).attr("src")
      );
    }
    //adjust_menu(graph_id, plot, parent_height, width, show_legend);
  }
}

function format_unit_yaxes(y) {
  var how_bigger = [];

  if (y > 1000000) {
    how_bigger["unit"] = "M";
    how_bigger["y"] = y / 1000000;
  } else if (y > 1000) {
    how_bigger["unit"] = "K";
    how_bigger["y"] = y / 1000;
  } else if (y < -1000000) {
    how_bigger["unit"] = "M";
    how_bigger["y"] = y / 1000000;
  } else if (y < -1000) {
    how_bigger["unit"] = "K";
    how_bigger["y"] = y / 1000;
  } else {
    how_bigger["unit"] = "";
    how_bigger["y"] = y;
  }

  return how_bigger;
}

function adjust_menu(graph_id, plot, parent_height, width, show_legend) {
  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;

  if (show_legend) {
    var legend_height =
      parseInt(
        $("#legend_" + graph_id)
          .css("height")
          .split("px")[0]
      ) +
      parseInt(
        $("#legend_" + graph_id)
          .css("margin-top")
          .split("px")[0]
      );
  } else {
    var legend_height = 0;
  }

  var menu_height = "25";

  if (
    $("#menu_" + graph_id).height() != undefined &&
    $("#menu_" + graph_id).height() > 20
  ) {
    menu_height = $("#menu_" + graph_id).height();
  }

  offset = $("#" + graph_id)[0].offsetTop;

  $("#menu_" + graph_id).css("top", offset + "px");

  $("#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) -
        $("#watermark_image_" + graph_id)[0].width -
        30;
      var top_pos = 7;
      //var top_pos = parseInt(context.canvas.height - down_ticks_height - 10) - $('#watermark_image_'+graph_id)[0].height;
      //var left_pos = 380;
      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");

    // Autologin
    if ($("#hidden-loginhash").val() != undefined) {
      inputs.push("loginhash=" + $("#hidden-loginhash").val());
      inputs.push("loginhash_data=" + $("#hidden-loginhash_data").val());
      inputs.push("loginhash_user=" + $("#hidden-loginhash_user").val());
    }

    jQuery.ajax({
      data: inputs.join("&"),
      type: "GET",
      url: (action = "../../ajax.php"),
      timeout: 10000,
      dataType: "html",
      async: false,
      success: function(data) {
        table = data;
        //forced_title_callback();
      }
    });
  }

  return table;
}

//Ajusta la grafica pequenña con el desplazamiento del eje y
function adjust_left_width_canvas(adapter_id, adapted_id) {
  var adapter_left_margin = $("#" + adapter_id + " .yAxis .tickLabel").width();
  var adapted_pix = $("#" + adapted_id).width();
  var new_adapted_width = adapted_pix - adapter_left_margin;
  $("#" + adapted_id).width(new_adapted_width);
  $("#" + adapted_id).css("margin-left", adapter_left_margin);
}

//Ajusta el ancho de la grafica pequeña con respecto a la grande
function update_left_width_canvas(graph_id) {
  $("#overview_" + graph_id).width($("#" + graph_id).width());
  $("#overview_" + graph_id).css(
    "margin-left",
    $("#" + graph_id + " .yAxis .tickLabel").width()
  );
}

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, short_data) {
  if (force_integer) {
    if (Math.round(number) != number) {
      return "";
    }
  } else {
    short_data++;
    decimals = pad(1, short_data, 0);
    number = Math.round(number * decimals) / decimals;
  }

  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 if (number <= -1000) {
      pos++;
      number = number / 1000;
    } else {
      break;
    }
  }

  return number + " " + shorts[pos] + unit;
}

function pad(input, length, padding) {
  var str = input + "";
  return length <= str.length ? str : pad(str + padding, length, padding);
}

// Recalculate the threshold data depends on warning and critical
function axis_thresholded(
  threshold_data,
  y_min,
  y_max,
  red_threshold,
  extremes,
  red_up
) {
  var y = {
    min: 0,
    max: 0
  };

  // Default values
  var yaxis_resize = {
    up: null,
    normal_up: 0,
    normal_down: 0,
    down: null
  };
  // Resize the y axis to display all intervals
  $.each(threshold_data, function() {
    if (/_up/.test(this.id)) {
      yaxis_resize["up"] = this.data[0][1];
    }
    if (/_down/.test(this.id)) {
      if (/critical/.test(this.id)) {
        yaxis_resize["down"] = red_threshold;
      } else {
        yaxis_resize["down"] = extremes[this.id];
      }
    }
    if (/_normal/.test(this.id)) {
      var end;
      if (/critical/.test(this.id)) {
        end = red_up;
      } else {
        end = extremes[this.id + "_2"];
      }
      if (yaxis_resize["normal_up"] < end) yaxis_resize["normal_up"] = end;
      if (yaxis_resize["normal_down"] > this.data[0][1])
        yaxis_resize["normal_down"] = this.data[0][1];
    }
  });

  // If you need to display a up or a down bar, display 10% of data height
  var margin_up_or_down = (y_max - y_min) * 0.1;

  // Calculate the new axis
  y["max"] =
    yaxis_resize["normal_up"] > y_max ? yaxis_resize["normal_up"] : y_max;
  y["min"] =
    yaxis_resize["normal_down"] > y_min ? yaxis_resize["normal_down"] : y_min;
  if (yaxis_resize["up"] !== null) {
    y["max"] =
      yaxis_resize["up"] + margin_up_or_down < y_max
        ? y_max
        : yaxis_resize["up"] + margin_up_or_down;
  }
  if (yaxis_resize["down"] !== null) {
    y["min"] =
      yaxis_resize["down"] - margin_up_or_down < y_min
        ? yaxis_resize["up"] + margin_up_or_down
        : y_min;
  }

  return y;
}

//add treshold
function add_threshold(
  data_base,
  threshold_data,
  y_min,
  y_max,
  red_threshold,
  extremes,
  red_up,
  markins_graph
) {
  var datas = new Array();

  $.each(data_base, function() {
    datas.push(this);
  });

  var threshold_array = [];

  // Resize the threshold data
  $.each(threshold_data, function(index, value) {
    threshold_array[index] = [];

    if (/_up/.test(this.id)) {
      this.bars.barWidth = y_max - this.data[0][1];

      if (/critical/.test(this.id)) {
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = y_max;
        threshold_array[index]["color"] = "red";
      } else {
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = y_max;
        threshold_array[index]["color"] = "yellow";
      }

      if (y_min > this.data[0][1]) {
        this.bars.barWidth = this.bars.barWidth - (y_min - this.data[0][1]);
        this.data[0][1] = y_min;
      }
    }

    if (/_down/.test(this.id)) {
      var end;
      if (/critical/.test(this.id)) {
        end = red_threshold;
      } else {
        end = extremes[this.id];
      }

      this.bars.barWidth = end - y_min;
      this.data[0][1] = y_min;

      if (/critical/.test(this.id)) {
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = this.bars.barWidth;
        threshold_array[index]["color"] = "red";
      } else {
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = this.bars.barWidth;
        threshold_array[index]["color"] = "yellow";
      }
    }

    if (/_normal/.test(this.id)) {
      var end;
      if (/critical/.test(this.id)) {
        end = red_up;
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = end;
        threshold_array[index]["color"] = "red";
      } else {
        var first = extremes[this.id + "_1"];
        var second = extremes[this.id + "_2"];
        if (first > second) {
          end = first;
        } else {
          end = second;
        }
        threshold_array[index]["min"] = this.data[0][1];
        threshold_array[index]["max"] = end;
        threshold_array[index]["color"] = "yellow";
      }

      if (this.data[0][1] < y_min) {
        this.bars.barWidth = end - y_min;
        this.data[0][1] = y_min;
        end = this.bars.barWidth + this.data[0][1];

        if (/critical/.test(this.id)) {
          threshold_array[index]["min"] = this.data[0][1];
          threshold_array[index]["max"] = this.data[0][1] + this.bars.barWidth;
          threshold_array[index]["color"] = "red";
        } else {
          threshold_array[index]["min"] = this.data[0][1];
          threshold_array[index]["max"] = this.data[0][1] + this.bars.barWidth;
          threshold_array[index]["color"] = "yellow";
        }
      }

      if (end > y_max) {
        this.bars.barWidth = y_max - this.data[0][1];

        if (/critical/.test(this.id)) {
          threshold_array[index]["min"] = this.data[0][1];
          threshold_array[index]["max"] = this.data[0][1] + this.bars.barWidth;
          threshold_array[index]["color"] = "red";
        } else {
          threshold_array[index]["min"] = this.data[0][1];
          threshold_array[index]["max"] = this.data[0][1] + this.bars.barWidth;
          threshold_array[index]["color"] = "yellow";
        }
      }
    }

    if (markins_graph && this.bars.barWidth > 0) {
      datas.push(this);
    }
  });

  var extreme_treshold_array = [];
  var i = 0;
  var flag = true;

  $.each(threshold_array, function(index, value) {
    flag = true;
    extreme_treshold_array[i] = {
      below: value["max"],
      color: value["color"]
    };
    i++;
    $.each(threshold_array, function(i, v) {
      if (value["min"] == v["max"]) {
        return (flag = false);
      }
    });
    if (flag) {
      extreme_treshold_array[i] = {
        below: value["min"],
        color: datas[0].color
      };
      i++;
    }
  });

  datas[0].threshold = extreme_treshold_array;

  return datas;
}

function reduceText(text, maxLength) {
  if (!text) return text;
  if (text.length <= maxLength) return text;
  var firstSlideEnd = parseInt((maxLength - 3) / 1.6);
  var str_cut = text.substr(0, firstSlideEnd);
  return str_cut + "...<br>" + text.substr(-firstSlideEnd - 3);
}