Add pop-up tooltip in 'Global Progress' chart

FEA: ItEr76S15OrganizingPerProjectDashboard
This commit is contained in:
Diego Pino 2012-06-08 12:55:06 +02:00
parent bd80e44e92
commit a1e6e8a768
2 changed files with 41 additions and 1 deletions

View file

@ -131,6 +131,19 @@
var global_progress = { };
</script>
<n:style type="text/css">
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
</n:style>
<globalProgress />
<!-- Include jqPlot styles -->

View file

@ -63,7 +63,34 @@
if (series !== undefined) {
this.series = jQuery.parseJSON(series);
}
this.plot = $.jqplot(this.id, jQuery.parseJSON(data), this);
data = jQuery.parseJSON(data);
this.plot = $.jqplot(this.id, data, this);
this.attachTooltip();
},
attachTooltip: function() {
var node = $('#' + this.id);
node.bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
var x = ev.pageX - node.offset().left;
var y = ev.pageY - node.offset().top;
var tooltip = $('<span class="tooltip"></span>');
tooltip.text(data[0]).appendTo(node);
tooltip.css({'top': y, 'left': x, 'position': 'absolute'});
tooltip.fadeIn('slow');
}
);
node.bind('jqplotDataUnhighlight',
function (ev) {
$('.tooltip').remove();
}
);
node.mousemove(function(ev) {
var x = ev.pageX - node.offset().left;
var y = ev.pageY - node.offset().top;
$('.tooltip').css({'top': y, 'left': x, 'position': 'absolute'})
});
}
};