Commit 1d00fca1 authored by Leo Iannacone's avatar Leo Iannacone

moved tooltip code to function

parent 145221ad
...@@ -105,6 +105,34 @@ function Page_History() { ...@@ -105,6 +105,34 @@ function Page_History() {
} }
// add tooltip to graphs
function _create_graph_tooltip(graph, element) {
var $chart = $(graph);
var $toolTip = $chart
.append('<div class="tooltip fade top in" role="tooltip">' +
'<div class="tooltip-arrow"></div> ' +
'<div class="tooltip-inner"></div>' +
'</div>').find('.tooltip').hide();
$chart.on('mousemove', function (event) {
$toolTip.css({
left: event.offsetX - $toolTip.width() / 2,
top: event.offsetY - $toolTip.height() - 20
});
});
$chart.on('mouseenter', element, function () {
var $point = $(this),
value = $point.attr('ct:value'),
seriesName = $point.parent().attr('ct:series-name');
$toolTip.find('.tooltip-inner').html(seriesName + ' (' + value + ')');
$toolTip.show();
});
$chart.on('mouseleave', element, function () {
$toolTip.hide();
});
}
function _create_graph_distributions() { function _create_graph_distributions() {
// build the distribution Pie graph // build the distribution Pie graph
var distributions_data = { var distributions_data = {
...@@ -147,43 +175,23 @@ function Page_History() { ...@@ -147,43 +175,23 @@ function Page_History() {
}); });
} }
Chartist.Line('#days-chart', days_data); Chartist.Line('#days-chart', days_data);
_create_graph_tooltip("#days-chart", '.ct-point');
var $chart = $('#days-chart');
var effect = function (x, t, b, c, d) { var effect = function (x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b; return -c * (t /= d) * (t - 2) + b;
}; };
var $chart = $('#days-chart');
var $toolTip = $chart
.append('<div class="tooltip fade top in" role="tooltip">' +
'<div class="tooltip-arrow"></div> ' +
'<div class="tooltip-inner"></div>' +
'</div>').find('.tooltip').hide();
$chart.on('mouseenter', '.ct-point', function () { $chart.on('mouseenter', '.ct-point', function () {
var $point = $(this), $(this).stop().animate({
value = $point.attr('ct:value'),
seriesName = $point.parent().attr('ct:series-name');
$point.stop().animate({
'stroke-width': '20px' 'stroke-width': '20px'
}, 200, effect); }, 200, effect);
$toolTip.find('.tooltip-inner').html(seriesName + ' (' + value + ')');
$toolTip.show();
}); });
$chart.on('mouseleave', '.ct-point', function () { $chart.on('mouseleave', '.ct-point', function () {
var $point = $(this); $(this).stop().animate({
$point.stop().animate({
'stroke-width': '10px' 'stroke-width': '10px'
}, 150, effect); }, 150, effect);
$toolTip.hide();
});
$chart.on('mousemove', function (event) {
$toolTip.css({
left: event.offsetX - $toolTip.width() / 2,
top: event.offsetY - $toolTip.height() - 20
});
}); });
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment