| 1 |
(function () { |
| 2 |
|
| 3 |
// Grab the data |
| 4 |
var labels = [], |
| 5 |
data = [], |
| 6 |
statify_chart_id = 'statify_chart', |
| 7 |
$statify_data_table = jQuery('#statify_chart_data'); |
| 8 |
|
| 9 |
if ( ! $statify_data_table.length ) { |
| 10 |
return; |
| 11 |
} |
| 12 |
|
| 13 |
jQuery('th', $statify_data_table).each(function () { |
| 14 |
labels.push(jQuery(this).text()); |
| 15 |
}); |
| 16 |
jQuery('td', $statify_data_table).each(function () { |
| 17 |
data.push(jQuery(this).text()); |
| 18 |
}); |
| 19 |
|
| 20 |
// Draw |
| 21 |
var width = jQuery('#' + statify_chart_id).parent().width() + 8, |
| 22 |
height = 140, |
| 23 |
leftgutter = 0, |
| 24 |
bottomgutter = 22, |
| 25 |
topgutter = 22, |
| 26 |
color = '#0074a2', |
| 27 |
r = Raphael(statify_chart_id, width, height), |
| 28 |
txt = {font: 'bold 12px "Open Sans", sans-serif', fill: "#333"}, |
| 29 |
X = (width - leftgutter * 2) / labels.length, |
| 30 |
max = Math.max.apply(Math, data), |
| 31 |
Y = (height - bottomgutter - topgutter) / max; |
| 32 |
|
| 33 |
/* Max Wert */ |
| 34 |
r |
| 35 |
.text(16, 16, max) |
| 36 |
.attr( |
| 37 |
{ |
| 38 |
'font': 'normal 10px "Open Sans", sans-serif', |
| 39 |
fill: "#bbb" |
| 40 |
} |
| 41 |
); |
| 42 |
|
| 43 |
var path = r.path().attr({stroke: color, "stroke-width": 2, "stroke-linejoin": "round"}), |
| 44 |
bgp = r.path().attr({stroke: "none", opacity: .3, fill: color}), |
| 45 |
label = r.set(), |
| 46 |
lx = 0, ly = 0, |
| 47 |
is_label_visible = false, |
| 48 |
leave_timer, |
| 49 |
blanket = r.set(); |
| 50 |
label.push(r.text(60, 12, "7777 Pageviews").attr(txt)); |
| 51 |
label.push(r.text(60, 27, "23.12.2013").attr(txt).attr({fill: color})); |
| 52 |
label.hide(); |
| 53 |
var frame = r.popup(100, 100, label, "right").attr({fill: "#fff", stroke: "#444", "stroke-width": 1}).hide(); |
| 54 |
|
| 55 |
var p, bgpp; |
| 56 |
for (var i = 0, ii = labels.length; i < ii; i++) { |
| 57 |
var y = Math.round(height - bottomgutter - Y * data[i]), |
| 58 |
x = Math.round(leftgutter + X * (i + .5)); |
| 59 |
if (!i) { |
| 60 |
p = ["M", x, y, "C", x, y]; |
| 61 |
bgpp = ["M", leftgutter + X * .5, height - bottomgutter, "L", x, y, "C", x, y]; |
| 62 |
} |
| 63 |
if (i && i < ii - 1) { |
| 64 |
var Y0 = Math.round(height - bottomgutter - Y * data[i - 1]), |
| 65 |
X0 = Math.round(leftgutter + X * (i - .5)), |
| 66 |
Y2 = Math.round(height - bottomgutter - Y * data[i + 1]), |
| 67 |
X2 = Math.round(leftgutter + X * (i + 1.5)); |
| 68 |
var a = getAnchors(X0, Y0, x, y, X2, Y2); |
| 69 |
p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]); |
| 70 |
bgpp = bgpp.concat([a.x1, a.y1, x, y, a.x2, a.y2]); |
| 71 |
} |
| 72 |
var dot = r.circle(x, y, 4).attr({fill: "#fff", stroke: color, "stroke-width": 1}); |
| 73 |
blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: '#fff', opacity: .2})); |
| 74 |
var rect = blanket[blanket.length - 1]; |
| 75 |
(function (x, y, data, lbl, dot) { |
| 76 |
var timer, i = 0; |
| 77 |
rect.hover(function () { |
| 78 |
clearTimeout(leave_timer); |
| 79 |
var side = "right"; |
| 80 |
if (x + frame.getBBox().width > width) { |
| 81 |
side = "left"; |
| 82 |
} |
| 83 |
var ppp = r.popup(x, y, label, side, 1), |
| 84 |
anim = Raphael.animation({ |
| 85 |
path: ppp.path, |
| 86 |
transform: ["t", ppp.dx, ppp.dy] |
| 87 |
}, 200 * is_label_visible); |
| 88 |
lx = label[0].transform()[0][1] + ppp.dx; |
| 89 |
ly = label[0].transform()[0][2] + ppp.dy; |
| 90 |
frame.show().stop().animate(anim); |
| 91 |
|
| 92 |
label[0].attr({text: data + " " + ( data > 1 ? statify_translations.pageviews : statify_translations.pageview )}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible); |
| 93 |
label[1].attr({text: lbl }).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible); |
| 94 |
dot.attr("r", 6); |
| 95 |
is_label_visible = true; |
| 96 |
}, function () { |
| 97 |
dot.attr("r", 4); |
| 98 |
leave_timer = setTimeout(function () { |
| 99 |
frame.hide(); |
| 100 |
label[0].hide(); |
| 101 |
label[1].hide(); |
| 102 |
is_label_visible = false; |
| 103 |
}, 1); |
| 104 |
}); |
| 105 |
})(x, y, data[i], labels[i], dot); |
| 106 |
} |
| 107 |
p = p.concat([x, y, x, y]); |
| 108 |
bgpp = bgpp.concat([x, y, x, y, "L", x, height - bottomgutter, "z"]); |
| 109 |
path.attr({path: p}); |
| 110 |
bgp.attr({path: bgpp}); |
| 111 |
frame.toFront(); |
| 112 |
label[0].toFront(); |
| 113 |
label[1].toFront(); |
| 114 |
blanket.toFront(); |
| 115 |
})(); |
