113 lines
3.7 KiB
JavaScript
113 lines
3.7 KiB
JavaScript
|
( function() {
|
|||
|
|
// Grab the data
|
|||
|
|
var labels = [],
|
|||
|
|
data = [];
|
|||
|
|
jQuery( '#ab_chart_data tfoot th' ).each( function() {
|
|||
|
|
labels.push( jQuery( this ).text() );
|
|||
|
|
} );
|
|||
|
|
jQuery( '#ab_chart_data tbody td' ).each( function() {
|
|||
|
|
data.push( jQuery( this ).text() );
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
// Draw
|
|||
|
|
var width = jQuery( '#ab_chart' ).parent().width() + 8,
|
|||
|
|
height = 140,
|
|||
|
|
leftgutter = 0,
|
|||
|
|
bottomgutter = 22,
|
|||
|
|
topgutter = 22,
|
|||
|
|
color = '#135e96',
|
|||
|
|
r = Raphael( 'ab_chart', width, height ),
|
|||
|
|
txt = { font: 'bold 12px "Open Sans", sans-serif', fill: '#1d2327' },
|
|||
|
|
X = ( width - leftgutter * 2 ) / labels.length,
|
|||
|
|
max = Math.max.apply( Math, data ),
|
|||
|
|
Y = ( height - bottomgutter - topgutter ) / max;
|
|||
|
|
|
|||
|
|
// Max value
|
|||
|
|
r
|
|||
|
|
.text( 16, 16, max )
|
|||
|
|
.attr(
|
|||
|
|
{
|
|||
|
|
font: 'normal 10px "Open Sans", sans-serif',
|
|||
|
|
fill: '#a7aaad',
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
var path = r.path().attr( { stroke: color, 'stroke-width': 2, 'stroke-linejoin': 'round' } ),
|
|||
|
|
bgp = r.path().attr( { stroke: 'none', opacity: .3, fill: color } ),
|
|||
|
|
label = r.set(),
|
|||
|
|
lx = 0,
|
|||
|
|
ly = 0,
|
|||
|
|
is_label_visible = false,
|
|||
|
|
leave_timer,
|
|||
|
|
blanket = r.set();
|
|||
|
|
label.push( r.text( 60, 12, '' ).attr( txt ) );
|
|||
|
|
label.push( r.text( 60, 27, '' ).attr( txt ).attr( { fill: color } ) );
|
|||
|
|
label.hide();
|
|||
|
|
var frame = r.popup( 100, 100, label, 'right' ).attr( { fill: '#fff', stroke: '#444', 'stroke-width': 1 } ).hide();
|
|||
|
|
|
|||
|
|
var p, bgpp;
|
|||
|
|
for ( var i = 0, ii = labels.length; i < ii; i++ ) {
|
|||
|
|
var y = Math.round( height - bottomgutter - Y * data[i] ),
|
|||
|
|
x = Math.round( leftgutter + X * ( i + .5 ) );
|
|||
|
|
if ( ! i ) {
|
|||
|
|
p = [ 'M', x, y, 'C', x, y ];
|
|||
|
|
bgpp = [ 'M', leftgutter + X * .5, height - bottomgutter, 'L', x, y, 'C', x, y ];
|
|||
|
|
}
|
|||
|
|
if ( i && i < ii - 1 ) {
|
|||
|
|
var Y0 = Math.round( height - bottomgutter - Y * data[i - 1] ),
|
|||
|
|
X0 = Math.round( leftgutter + X * ( i - .5 ) ),
|
|||
|
|
Y2 = Math.round( height - bottomgutter - Y * data[i + 1] ),
|
|||
|
|
X2 = Math.round( leftgutter + X * ( i + 1.5 ) );
|
|||
|
|
var a = getAnchors( X0, Y0, x, y, X2, Y2 );
|
|||
|
|
p = p.concat( [ a.x1, a.y1, x, y, a.x2, a.y2 ] );
|
|||
|
|
bgpp = bgpp.concat( [ a.x1, a.y1, x, y, a.x2, a.y2 ] );
|
|||
|
|
}
|
|||
|
|
var dot = r.circle( x, y, 4 ).attr( { fill: '#fff', stroke: color, 'stroke-width': 1 } );
|
|||
|
|
blanket.push( r.rect( leftgutter + X * i, 0, X, height - bottomgutter ).attr( { stroke: 'none', fill: '#fff', opacity: .2 } ) );
|
|||
|
|
var rect = blanket[blanket.length - 1];
|
|||
|
|
( function( x, y, data, date, dot ) {
|
|||
|
|
var timer,
|
|||
|
|
i = 0;
|
|||
|
|
rect.hover( function() {
|
|||
|
|
clearTimeout( leave_timer );
|
|||
|
|
var side = 'right';
|
|||
|
|
if ( x + frame.getBBox().width > width ) {
|
|||
|
|
side = 'left';
|
|||
|
|
}
|
|||
|
|
// set label content to determine correct dimensions
|
|||
|
|
label[0].attr( { text: date } );
|
|||
|
|
label[1].attr( { text: data + '× Spam' } );
|
|||
|
|
var ppp = r.popup( x, y, label, side, 1 ),
|
|||
|
|
anim = Raphael.animation( {
|
|||
|
|
path: ppp.path,
|
|||
|
|
transform: [ 't', ppp.dx, ppp.dy ],
|
|||
|
|
}, 200 * is_label_visible );
|
|||
|
|
lx = label[0].transform()[0][1] + ppp.dx;
|
|||
|
|
ly = label[0].transform()[0][2] + ppp.dy;
|
|||
|
|
frame.show().stop().animate( anim );
|
|||
|
|
|
|||
|
|
label[0].show().stop().animateWith( frame, anim, { transform: [ 't', lx, ly ] }, 200 * is_label_visible );
|
|||
|
|
label[1].show().stop().animateWith( frame, anim, { transform: [ 't', lx, ly ] }, 200 * is_label_visible );
|
|||
|
|
dot.attr( 'r', 6 );
|
|||
|
|
is_label_visible = true;
|
|||
|
|
}, function() {
|
|||
|
|
dot.attr( 'r', 4 );
|
|||
|
|
leave_timer = setTimeout( function() {
|
|||
|
|
frame.hide();
|
|||
|
|
label[0].hide();
|
|||
|
|
label[1].hide();
|
|||
|
|
is_label_visible = false;
|
|||
|
|
}, 1 );
|
|||
|
|
} );
|
|||
|
|
}( x, y, data[i], labels[i], dot ) );
|
|||
|
|
}
|
|||
|
|
p = p.concat( [ x, y, x, y ] );
|
|||
|
|
bgpp = bgpp.concat( [ x, y, x, y, 'L', x, height - bottomgutter, 'z' ] );
|
|||
|
|
path.attr( { path: p } );
|
|||
|
|
bgp.attr( { path: bgpp } );
|
|||
|
|
frame.toFront();
|
|||
|
|
label[0].toFront();
|
|||
|
|
label[1].toFront();
|
|||
|
|
blanket.toFront();
|
|||
|
|
}() );
|