Skip to content

Commit

Permalink
add option to fade in bars on hover
Browse files Browse the repository at this point in the history
  • Loading branch information
leriel committed Mar 23, 2015
1 parent 4ccdd76 commit 94eec4a
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 2 deletions.
39 changes: 39 additions & 0 deletions examples/bar-highlight-hover.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!doctype html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="../morris.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
<style type="text/css">
.morris-hover.morris-default-style {
display: none !important;
}
</style>
</head>
<body>
<h1>Title</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
Morris.Bar({
element: 'graph',
data: [
{x: 'One', y: 3, z: 2, a: 1, q: 2},
{x: 'Two', y: 2, z: null, a: 1, q: 2},
{x: 'Three', y: 0, z: 2, a: 1, q: 2},
{x: 'Four', y: 2, z: 4, a: 1, q: 2}
],
xkey: 'x',
ykeys: ['y', 'z'],
labels: [],
barColors: ['#1fbba6', '#f8aa33', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
barOpacity: 0.5,
resize: true,
gridTextColor: '#666',
grid: false

});
</pre>
</body>
26 changes: 24 additions & 2 deletions lib/morris.bar.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ class Morris.Bar extends Morris.Grid
'#9440ed'
],
barOpacity: 1.0
barHighlightOpacity: 1.0
highlightSpeed: 150
barRadius: [0, 0, 0, 0]
xLabelMargin: 50
horizontal: false
Expand Down Expand Up @@ -132,6 +134,7 @@ class Morris.Bar extends Morris.Grid
#
# @private
drawSeries: ->
@seriesBars = []
groupWidth = @xSize / @options.data.length

if @options.stacked
Expand All @@ -148,6 +151,7 @@ class Morris.Bar extends Morris.Grid
leftPadding = spaceLeft / 2
zeroPos = if @ymin <= 0 and @ymax >= 0 then @transY(0) else null
@bars = for row, idx in @data
@seriesBars[idx] = []
lastTop = 0
for ypos, sidx in row._y
if not @hasToShow(sidx)
Expand All @@ -174,11 +178,11 @@ class Morris.Bar extends Morris.Grid
top -= lastTop if @options.stacked
if not @options.horizontal
lastTop += size
@drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'),
@seriesBars[idx][sidx] = @drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'),
@options.barOpacity, @options.barRadius)
else
lastTop -= size
@drawBar(top, left, size, barWidth, @colorFor(row, sidx, 'bar'),
@seriesBars[idx][sidx] = @drawBar(top, left, size, barWidth, @colorFor(row, sidx, 'bar'),
@options.barOpacity, @options.barRadius)

if @options.inBarValue and
Expand All @@ -198,6 +202,22 @@ class Morris.Bar extends Morris.Grid
@flat_bars = $.grep @flat_bars, (n) -> return n?
@bar_els = $($.map @flat_bars, (n) -> return n[0])

# hightlight the bar on hover
#
# @private
hilight: (index) ->
if @seriesBars && @seriesBars[@prevHilight] && @prevHilight != null && @prevHilight != index
for y,i in @seriesBars[@prevHilight]
if y
y.animate({'fill-opacity': @options.barOpacity}, @options.highlightSpeed)

if @seriesBars && @seriesBars[index] && index != null && @prevHilight != index
for y,i in @seriesBars[index]
if y
y.animate({'fill-opacity': @options.barHighlightOpacity}, @options.highlightSpeed)

@prevHilight = index

# @private
#
# @param row [Object] row data
Expand Down Expand Up @@ -238,6 +258,7 @@ class Morris.Bar extends Morris.Grid
# @private
onHoverMove: (x, y) =>
index = @hitTest(x, y)
@hilight(index)
if index?
@hover.update(@hoverContentForRow(index)...)
else
Expand All @@ -247,6 +268,7 @@ class Morris.Bar extends Morris.Grid
#
# @private
onHoverOut: =>
@hilight(-1)
if @options.hideHover isnt false
@hover.hide()
Expand Down

0 comments on commit 94eec4a

Please sign in to comment.