Search code examples
javascriptgraphflot

FLOT: How do I show the figures for "spread" in the bars?

My code works well, so it's not that I need help with. But I have been trying to get this done for a while and I can't find many other pages to help with this so I was hoping someone would be able to help me.

My graph consists of 2 lines - to display the data and a bars to show how much "spread" is between the two. I have entered dummy data which is why the numbers won't add up properly.

How would I be able to insert the numbers into the bars for the "spread" array so they display permanently.

Solution

  • Use the value labels plugin

        valueLabels: {
      show: true,
      xoffset: 50 // depends on your chart width and number of bars
    },


    ! function(a) {
  "use strict";

  function e(e) {
    e.hooks.draw.push(function(e, t) {
      var l, s, o, i, r, n, d, f, u, b, h, v, x, g, c, L, w, p, m, M, y, z, O, C = {},
        B = "left";
      a.each(e.getData(), function(a, P) {
        if (P.valueLabels.show) {
          var k = P.valueLabels.showLastValue,
            A = P.valueLabels.showMaxValue,
            S = P.valueLabels.showMinValue,
            F = P.valueLabels.showTextLabel,
            V = P.valueLabels.labelFormatter,
            Z = P.valueLabels.xoffset,
            T = P.valueLabels.yoffset,
            D = P.valueLabels.xoffsetMin || Z,
            I = P.valueLabels.yoffsetMin || T,
            R = P.valueLabels.xoffsetMax || Z,
            X = P.valueLabels.yoffsetMax || T,
            Y = P.valueLabels.xoffsetLast || Z,
            j = P.valueLabels.yoffsetLast || T,
            Q = P.valueLabels.valign,
            W = P.valueLabels.valignLast || Q,
            q = P.valueLabels.valignMin,
            E = P.valueLabels.valignMax,
            G = P.valueLabels.align,
            H = P.valueLabels.horizAlign,
            J = P.valueLabels.horizAlignMin || H,
            K = P.valueLabels.horizAlignMax || H,
            N = P.valueLabels.horizAlignLast || H,
            U = P.valueLabels.fontcolor || "#222222",
            $ = P.valueLabels.shadowColor,
            _ = P.valueLabels.font || P.xaxis.font || "9pt san-serif",
            aa = P.valueLabels.hideZero,
            ea = P.valueLabels.hideSame,
            ta = P.valueLabels.reverseAlignBelowZero,
            la = P.valueLabels.showShadow,
            sa = P.valueLabels.useDecimalComma,
            oa = P.stack,
            ia = P.valueLabels.decimals,
            ra = P.valueLabels.useBackground,
            na = P.valueLabels.backgroundColor,
            da = P.valueLabels.useBorder,
            fa = P.valueLabels.borderColor;
          P.seriesIndex = a;
          var ua = null,
            ba = -1e3,
            ha = -1e3,
            va = "categories" == P.xaxis.options.mode,
            xa = "categories" == P.yaxis.options.mode;
          if (O = P.points.show ? P.points.radius - P.points.lineWidth / 2 : 0, (S || A) && "undefined" != typeof P.data[0]) {
            P.data[0][0] = +P.data[0][0], P.data[0][1] = +P.data[0][1];
            for (var ga = +P.data[0][0], ca = +P.data[0][0], La = +P.data[0][1], wa = +P.data[0][1], pa = 1; pa < P.data.length; ++pa) P.data[pa][0] = +P.data[pa][0], P.data[pa][1] = +P.data[pa][1], +P.data[pa][0] < ga && (ga = +P.data[pa][0]), +P.data[pa][0] > ca && (ca = +P.data[pa][0]), +P.data[pa][1] < La && (La = +P.data[pa][1]), +P.data[pa][1] > wa && (wa = +P.data[pa][1])
          } else {
            S = !1, A = !1;
            for (var pa = 0; pa < P.data.length; ++pa) P.data[pa][0] = +P.data[pa][0], P.data[pa][1] = +P.data[pa][1]
          }
          g = S || A || k;
          for (var pa = 0; pa < P.data.length; ++pa)
            if (null !== P.data[pa]) {
              if (s = P.data[pa][0], d = P.data[pa][1], l = F && P.data[pa].length > 2 ? P.data[pa][2] : !1, g) {
                if (c = !1, S && La == d && !P.bars.horizontal ? (c = !0, n = D, h = I, v = q, S = !1) : S && ga == s && P.bars.horizontal ? (c = !0, n = D, h = I, x = J, S = !1) : A && wa == d && !P.bars.horizontal ? (c = !0, n = R, h = X, v = E, A = !1) : A && ca == s && P.bars.horizontal ? (c = !0, n = R, h = X, x = K, A = !1) : k && pa == P.data.length - 1 && !P.bars.horizontal ? (c = !0, n = Y, h = j, v = W) : k && pa == P.data.length - 1 && P.bars.horizontal && (c = !0, n = Y, h = j, x = N), !c) continue
              } else ta && 0 > d && !P.bars.horizontal ? (n = Z, h = -1 * T, "above" == Q ? Q = "below" : "below" == Q && (Q = "above"), v = Q) : (n = Z, h = T, v = Q, x = H);
              if ("top" == v && (v = "above"), va && (s = P.xaxis.categories[s]), xa && (d = P.yaxis.categories[d]), !(s < P.xaxis.min || s > P.xaxis.max || d < P.yaxis.min || d > P.yaxis.max)) {
                if (l !== !1) L = l;
                else {
                  if (L = P.bars.horizontal ? s : d, null == L && (L = ""), 0 === L && (aa || oa)) continue;
                  ia !== !1 && (L = parseFloat(L).toFixed(ia))
                }
                P.valueLabels.valueLabelFunc && (L = P.valueLabels.valueLabelFunc({
                  series: P,
                  seriesIndex: a,
                  index: pa
                })), L = "" + L, L = V(L), ea && L == ua && pa != P.data.length - 1 || (P.bars.horizontal && (t.font = _, y = da || ra ? 10 : 6, Math.abs(P.xaxis.p2c(s) - P.xaxis.p2c(0)) < t.measureText(L).width + Math.abs(n) + y && "outside" != x && (n = -1 * n, x = "outside")), sa && (L = L.toString().replace(".", ",")), w = 0, oa && (C[s] || (C[s] = 0), w = C[s], C[s] = C[s] + d), o = P.xaxis.p2c(s) + e.getPlotOffset().left, f = P.yaxis.p2c(d + w) + e.getPlotOffset().top, (!ea || Math.abs(f - ha) > 20 || o > ba) && (ua = L, ba = o + 8 * L.length, ha = f, P.bars.horizontal ? (b = f, z = "middle", s >= 0 ? "outside" == x ? (B = "left", n += 4) : "insideMax" == x ? (B = "right", n -= 4) : "insideCenter" == x ? (B = "center", o = e.getPlotOffset().left + P.xaxis.p2c(0) + (P.xaxis.p2c(s) - P.xaxis.p2c(0)) / 2 + n) : "insideZero" == x && (B = "left", o = e.getPlotOffset().left + P.xaxis.p2c(0) + 3 + n) : "outside" == x ? (B = "right", n -= 4) : "insideMax" == x ? (B = "left", n += 4) : "insideCenter" == x ? (B = "center", o = e.getPlotOffset().left + P.xaxis.p2c(0) + (P.xaxis.p2c(s) - P.xaxis.p2c(0)) / 2 + n) : "insideZero" == x && (B = "right", o = e.getPlotOffset().left + P.xaxis.p2c(0) - 4 + n), r = o + n) : ("bottom" == v ? (z = "bottom", f = e.getPlotOffset().top + e.height()) : "middle" == v ? (z = "middle", M = e.getPlotOffset().top + e.height(), f = (M + f) / 2) : "below" == v ? (z = "top", h = h + 4 + O) : "above" == v && (z = "bottom", h = h - 2 - O), r = o + n, b = f + h, 0 >= f && (b += 16), o >= e.width() + e.getPlotOffset().left ? (r = e.width() + e.getPlotOffset().left + n - 3, B = "right") : B = G), t.font = _, (da || ra) && (m = t.measureText(L).width + 5, m % 2 == 1 && m++, p = parseInt(_, 10) + 7, "top" == z ? (u = b, b += 3) : "bottom" == z ? (u = b - p - 2, b -= 2) : "middle" == z && (u = b - (p + 1) / 2, b += 1), "right" == B ? (i = r - m + 1, r -= 2) : "left" == B ? (i = r, r += 3) : i = r - m / 2, t.shadowOffsetX = 0, t.shadowOffsetY = 0, t.shadowBlur = 0, da && (t.strokeStyle = fa, t.strokeRect(i, u, m, p)), ra && (t.fillStyle = na, t.fillRect(i, u, m, p))), t.fillStyle = U, la ? (t.shadowOffsetX = 0, t.shadowOffsetY = 0, t.shadowBlur = 1.5, t.shadowColor = $) : t.shadowBlur = 0, t.textAlign = B, t.textBaseline = z, t.fillText(L, r, b)))
              }
            }
        }
      })
    })
  }
  var t = {
    series: {
      valueLabels: {
        show: !1,
        showTextLabel: !1,
        showMaxValue: !1,
        showMinValue: !1,
        showLastValue: !1,
        labelFormatter: function(a) {
          return a
        },
        align: "center",
        valign: "above",
        valignMin: "below",
        valignMax: "above",
        horizAlign: "insideMax",
        xoffset: 0,
        yoffset: 0,
        useDecimalComma: !1,
        decimals: !1,
        hideZero: !1,
        hideSame: !1,
        reverseAlignBelowZero: !1,
        showShadow: !1,
        shadowColor: !1,
        useBackground: !1,
        backgroundColor: "#cccccc",
        fontcolor: "#222222",
        useBorder: !1,
        borderColor: "#999999"
      }
    }
  };
  a.plot.plugins.push({
    init: e,
    options: t,
    name: "valueLabels",
    version: "2.0.0"
  })
}(jQuery);

// end of plugin

$(function() {
  var dw = [
    [0, 2234506735], //Jan 16
    [1, 2423228540], //Feb 16
    [2, 2572325679], //Mar 16
    [3, 2623236552], //Apr 16
    [4, 2383236553], //May 16
    [5, 1116187626], //Jun 16
    [6, 6293855432], //Jul 16
    [7, 7415252345], //Aug 16
    [8, 7689084325], //Sep 16
    [9, 2548362329], //Oct 16
    [10, 284463540], //Nov 16
    [11, 3043645527], //Dec 16
    [12, 3232254269] //Jan 17
  ];

  var aa = [
    [0, 1923335489], //Jan 16
    [1, 214502542229], //Feb 16
    [2, 2286222221], //Mar 16
    [3, 23114561121], //Apr 16
    [4, 2099514524], //May 16
    [5, 24123654227], //Jun 16
    [6, 2049124532], //Jul 16
    [7, 20311414933], //Aug 16
    [8, 2242114241], //Sep 16
    [9, 23902434234], //Oct 16
    [10, 2412432216], //Nov 16
    [11, 260121224], //Dec 16
    [12, 2886112432] //Jan 17

  ];

  var spread = [
    [12, 271130622], //Jan 17
    [11, 437114103], //Dec 16
    [10, 400944311], //Nov 16
    [9, 40752051131], //Oct 16
    [8, 3483442413], //Sep 16
    [7, 2217514642], //Aug 16
    [6, 2441325340], //Jul 16
    [5, 3482373959], //Jun 16
    [4, 2846263212], //May 16
    [3, 33096755537], //Apr 16
    [2, 28438238666], //Mar 16
    [1, 2834506661], //Feb 16
    [0, 4798313216] //Jan 16
  ];

  /*Data indicating ticks/Xaxis values*/
  var ticks = [
    [0, "Jan 16"],
    [1, "Feb 16"],
    [2, "Mar 16"],
    [3, "Apr 16"],
    [4, "May 16"],
    [5, "Jun 16"],
    [6, "Jul 16"],
    [7, "Aug 16"],
    [8, "Sep 16"],
    [9, "Oct 16"],
    [10, "Nov 16"],
    [11, "Dec 16"],
    [12, "Jan 17"],
  ];

  var data = [{
    label: "Data Warehouse",
    data: dw,
    lines: {
      show: true
    },
    points: {
      show: true
    },
    color: "#009900"
  }, {
    label: "mation",
    data: aa,
    lines: {
      show: true
    },
    points: {
      show: true
    },
    color: "#0066ff" //orange
  }, {
    label: "Spread", //Plotting the Spread information
    data: spread,
    bars: {
      show: true
    },
    valueLabels: {
      show: true,
      xoffset: 50 // depends on your chart width and number of bars
    },
    color: " #862d86" //purple
  }];

  var options = { //Editing layout of graph
    xaxis: {
      ticks: ticks
    },
    grid: {
      hoverable: true,
      backgroundColor: {
        colors: ["#ffffff", "#ffffff"] //white
      }
    },
    legend: {
      labelBoxBorderColor: "#000000", //black
      container: $("#legendcontainer"),
      noColumns: 0
    }
  };

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

  var previousPoint = null;
  $("#placeholder").bind("plothover", function(event, pos, item) {
    if (item) {
      if (previousPoint != item.dataIndex) {
        previousPoint = item.dataIndex;

        $("#tooltip").remove();
        var x = item.datapoint[0].toFixed(0),
          y = item.datapoint[1].toFixed(0);

        showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
      }
    } else {
      $("#tooltip").remove();
      previousPoint = null;
    }
  });

  var plot = $.plot($("#placeholder"),
    data, options);
});
    #title {
  text-align: center;
  text-decoration: underline;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>


<!--Declaring the graph and styling-->
<div id="paymentGraph">
  <div id="legendcontainer" style="width: 800px; margin-top: 170px;"></div>
  <div id="placeholder" style="width: 1450px;
		   height:600px; 
		   text-align: 
		   center; 
		   margin-top: 50px;
		   margin-left: 150px"></div>
</div>

<!--Declaring the title and styling-->
<div id="title" style="position: absolute;
		left: 570px; 
		top: 5px; 
		color: black; 
		font-size: 45px">
  <b>Deposit Discrepancies<br> Adobe Analytics vs Data Warehouse</b>
</div>

<!--Declaring the Xaxis and styling-->
<div id="xaxis" style="position: absolute;
		left: 875px; 
		top: 875px; 
		color: black; 
		font-size: 16px">
  <em><b>Time</b></em>
</div>

<!--Declaring the Yaxis and styling-->
<div id="yaxis" style="position: absolute; 
		left: 50px; 
		top: 520px; 
		color: black; 
		font-size: 16px">
  <em><b>Number</br>of</br>Registrations</b></em>
</div>