FLOT：如何在条形图中显示 "spread" 的数字？
FLOT: How do I show the figures for "spread" in the bars?
我的代码运行良好，所以我不需要帮助。但是我已经尝试完成这件事有一段时间了，但我找不到很多其他页面来帮助解决这个问题，所以我希望有人能够帮助我。
我的图表由 2 条线组成 - 用于显示数据和一个条形图，用于显示两者之间 "spread" 的大小。我输入了虚拟数据，这就是数字无法正确相加的原因。
我如何才能将数字插入 "spread" 数组的条形中，以便它们永久显示。
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>
我的代码运行良好，所以我不需要帮助。但是我已经尝试完成这件事有一段时间了，但我找不到很多其他页面来帮助解决这个问题，所以我希望有人能够帮助我。
我的图表由 2 条线组成 - 用于显示数据和一个条形图，用于显示两者之间 "spread" 的大小。我输入了虚拟数据，这就是数字无法正确相加的原因。
我如何才能将数字插入 "spread" 数组的条形中，以便它们永久显示。
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>