Define bar colors with a function.

ekkelenkamp · Nov 6, 2012 · 236afa4 · 236afa4
1 parent d6b955a
commit 236afa4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 5 deletions.
diff --git a/examples/bar-colors.html b/examples/bar-colors.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<head>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
+  <script src="../morris.js"></script>
+  <script src="lib/prettify.js"></script>
+  <script src="lib/example.js"></script>
+  <link rel="stylesheet" href="lib/example.css">
+  <link rel="stylesheet" href="lib/prettify.css">
+</head>
+<body>
+<h1>Bar charts</h1>
+<div id="graph"></div>
+<pre id="code" class="prettyprint linenums">
+// Use Morris.Bar
+Morris.Bar({
+  element: 'graph',
+  data: [
+    {x: '2011 Q1', y: 0},
+    {x: '2011 Q2', y: 1},
+    {x: '2011 Q3', y: 2},
+    {x: '2011 Q4', y: 3},
+    {x: '2012 Q1', y: 4},
+    {x: '2012 Q2', y: 5},
+    {x: '2012 Q3', y: 6},
+    {x: '2012 Q4', y: 7},
+    {x: '2013 Q1', y: 8}
+  ],
+  xkey: 'x',
+  ykeys: ['y'],
+  labels: ['Y'],
+  barColors: function (row, series, type) {
+    if (type === 'bar') {
+      var red = Math.ceil(255 * row.y / this.ymax);
+      return 'rgb(' + red + ',0,0)';
+    }
+    else {
+      return '#000';
+    }
+  }
+});
+</pre>
+</body>
diff --git a/lib/morris.bar.coffee b/lib/morris.bar.coffee
@@ -120,7 +120,7 @@ class Morris.Bar extends Morris.Grid
             bottom = @bottom
           left = @left + idx * groupWidth + leftPadding + sidx * (barWidth + @options.barGap)
           @r.rect(left, top, barWidth, bottom - top)
-            .attr('fill', @options.barColors[sidx % @options.barColors.length])
+            .attr('fill', @colorFor(row, sidx, 'bar'))
             .attr('stroke-width', 0)
         else
           null
@@ -156,7 +156,7 @@ class Morris.Bar extends Morris.Grid
     row = @data[index]
     @xLabel.attr('text', row.label)
     for y, i in row.y
-      @yLabels[i].attr('fill', @options.barColors[i % @options.barColors.length])
+      @yLabels[i].attr('fill', @colorFor(row, i, 'hover'))
       @yLabels[i].attr('text', "#{@options.labels[i]}: #{@yLabelFormat(y)}")
     # recalculate hover box width
     maxLabelWidth = Math.max.apply null, (l.getBBox().width for l in @yLabels)
@@ -187,3 +187,16 @@ class Morris.Bar extends Morris.Grid
     for hoverIndex in [0...@hoverMargins.length]
       break if @hoverMargins[hoverIndex] > x
     @hilight hoverIndex
+
+  # @private
+  #
+  # @param row  [Object] row data
+  # @param sidx [Number] series index
+  # @param type [String] "bar" or "hover"
+  colorFor: (row, sidx, type) ->
+    if typeof @options.barColors is 'function'
+      r = { x: row.x, y: row.y[sidx], label: row.label }
+      s = { index: sidx, key: @options.ykeys[sidx], label: @options.labels[sidx] }
+      @options.barColors.call(@, r, s, type)
+    else
+      @options.barColors[sidx % @options.barColors.length]
diff --git a/morris.js b/morris.js