Add pop-up tooltip in 'Global Progress' chart
FEA: ItEr76S15OrganizingPerProjectDashboard
This commit is contained in:
parent
bd80e44e92
commit
a1e6e8a768
2 changed files with 41 additions and 1 deletions
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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'})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue