Add tooltips to histograms (86d1acbd) · Commits · github_fork / Clip

web/fnordmetric.css

+19 −3

Original line number	Diff line number	Diff line
		@@ -784,3 +784,19 @@ input.input.lopen{
		color:#333;
		border-bottom:1px solid #999;
		}

		.widget_histogram_bars .tooltip {
		font-size: 12px;
		color: #fff;
		text-shadow: #000 1px 1px 0;
		background-color: rgba(0, 0, 0, 0.7);
		border: 1px solid rgba(0, 0, 0, 0.9);
		border-radius: 3px;
		padding: 0px 4px;
		margin: 2px;
		line-height: 18px;
		white-space: nowrap;
		overflow: hidden;
		position: absolute;
		display: none;
		}

+1833 −1811

Original line number	Diff line number	Diff line
		@@ -2162,6 +2162,7 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {


		var sdata = series.stack;

		for(var ind=0; ind < sdata.length; ind++){
		$(graph.element).append(
		$("<div>")
		@@ -2181,6 +2182,27 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
		n.setAttribute('fill', series.color);
		} );


		$('.widget_histogram_bars .tooltip').remove();
		$('.widget_histogram_bars rect').each(function(hist_i) {
		var left = parseInt($(this).offset().left);
		var top = parseInt($(this).offset().top) - 23;
		var tooltip = '<div class="tooltip" data-hist-id="' + hist_i
		+ '" style="left:' + left + 'px; top: ' + top + 'px">'
		+ sdata[hist_i].y + '</div>';
		$(this).parents('.widget_histogram_bars:first').append(tooltip);
		$(this).attr('data-id', hist_i);
		});

		$('.widget_histogram_bars rect').hover(function() {
		$('.widget_histogram_bars .tooltip[data-hist-id=' +
		$(this).attr('data-id') + ']').show();
		}, function() {
		$('.widget_histogram_bars .tooltip[data-hist-id=' +
		$(this).attr('data-id') + ']').fadeOut();
		});


		}, this );
		},