mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-09-21 18:51:32 +02:00
Merge pull request #120 from dynaum/master
Adding support to stacked bars
This commit is contained in:
commit
691bd8d017
30
examples/staked_bars.html
Normal file
30
examples/staked_bars.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!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>Stacked Bars chart</h1>
|
||||||
|
<div id="graph"></div>
|
||||||
|
<pre id="code" class="prettyprint linenums">
|
||||||
|
// Use Morris.Bar
|
||||||
|
Morris.Bar({
|
||||||
|
element: 'graph',
|
||||||
|
data: [
|
||||||
|
{x: '2011 Q1', y: 3, z: 2, a: 3},
|
||||||
|
{x: '2011 Q2', y: 2, z: null, a: 1},
|
||||||
|
{x: '2011 Q3', y: 0, z: 2, a: 4},
|
||||||
|
{x: '2011 Q4', y: 2, z: 4, a: 3}
|
||||||
|
],
|
||||||
|
xkey: 'x',
|
||||||
|
ykeys: ['y', 'z', 'a'],
|
||||||
|
labels: ['Y', 'Z', 'A'],
|
||||||
|
stacked: true
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</body>
|
@ -8,6 +8,7 @@ class Morris.Bar extends Morris.Grid
|
|||||||
# setup event handlers
|
# setup event handlers
|
||||||
#
|
#
|
||||||
init: ->
|
init: ->
|
||||||
|
@cumulative = @options.stacked
|
||||||
@prevHilight = null
|
@prevHilight = null
|
||||||
@el.mousemove (evt) =>
|
@el.mousemove (evt) =>
|
||||||
@updateHilight evt.pageX
|
@updateHilight evt.pageX
|
||||||
@ -105,11 +106,12 @@ class Morris.Bar extends Morris.Grid
|
|||||||
# @private
|
# @private
|
||||||
drawSeries: ->
|
drawSeries: ->
|
||||||
groupWidth = @width / @options.data.length
|
groupWidth = @width / @options.data.length
|
||||||
numBars = @options.ykeys.length
|
numBars = if @options.stacked? then 1 else @options.ykeys.length
|
||||||
barWidth = (groupWidth * @options.barSizeRatio - @options.barGap * (numBars - 1)) / numBars
|
barWidth = (groupWidth * @options.barSizeRatio - @options.barGap * (numBars - 1)) / numBars
|
||||||
leftPadding = groupWidth * (1 - @options.barSizeRatio) / 2
|
leftPadding = groupWidth * (1 - @options.barSizeRatio) / 2
|
||||||
zeroPos = if @ymin <= 0 and @ymax >= 0 then @transY(0) else null
|
zeroPos = if @ymin <= 0 and @ymax >= 0 then @transY(0) else null
|
||||||
@bars = for row, idx in @data
|
@bars = for row, idx in @data
|
||||||
|
lastTop = 0
|
||||||
for ypos, sidx in row._y
|
for ypos, sidx in row._y
|
||||||
if ypos != null
|
if ypos != null
|
||||||
if zeroPos
|
if zeroPos
|
||||||
@ -118,10 +120,17 @@ class Morris.Bar extends Morris.Grid
|
|||||||
else
|
else
|
||||||
top = ypos
|
top = ypos
|
||||||
bottom = @bottom
|
bottom = @bottom
|
||||||
left = @left + idx * groupWidth + leftPadding + sidx * (barWidth + @options.barGap)
|
|
||||||
@r.rect(left, top, barWidth, bottom - top)
|
left = @left + idx * groupWidth + leftPadding
|
||||||
|
left += sidx * (barWidth + @options.barGap) unless @options.stacked
|
||||||
|
size = bottom - top
|
||||||
|
|
||||||
|
top -= lastTop if @options.stacked
|
||||||
|
@r.rect(left, top, barWidth, size)
|
||||||
.attr('fill', @colorFor(row, sidx, 'bar'))
|
.attr('fill', @colorFor(row, sidx, 'bar'))
|
||||||
.attr('stroke-width', 0)
|
.attr('stroke-width', 0)
|
||||||
|
|
||||||
|
lastTop += size
|
||||||
else
|
else
|
||||||
null
|
null
|
||||||
|
|
||||||
|
18
morris.js
18
morris.js
@ -1033,6 +1033,7 @@
|
|||||||
Bar.prototype.init = function() {
|
Bar.prototype.init = function() {
|
||||||
var touchHandler,
|
var touchHandler,
|
||||||
_this = this;
|
_this = this;
|
||||||
|
this.cumulative = this.options.stacked;
|
||||||
this.prevHilight = null;
|
this.prevHilight = null;
|
||||||
this.el.mousemove(function(evt) {
|
this.el.mousemove(function(evt) {
|
||||||
return _this.updateHilight(evt.pageX);
|
return _this.updateHilight(evt.pageX);
|
||||||
@ -1138,9 +1139,9 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
Bar.prototype.drawSeries = function() {
|
Bar.prototype.drawSeries = function() {
|
||||||
var barWidth, bottom, groupWidth, idx, left, leftPadding, numBars, row, sidx, top, ypos, zeroPos;
|
var barWidth, bottom, groupWidth, idx, lastTop, left, leftPadding, numBars, row, sidx, size, top, ypos, zeroPos;
|
||||||
groupWidth = this.width / this.options.data.length;
|
groupWidth = this.width / this.options.data.length;
|
||||||
numBars = this.options.ykeys.length;
|
numBars = this.options.stacked != null ? 1 : this.options.ykeys.length;
|
||||||
barWidth = (groupWidth * this.options.barSizeRatio - this.options.barGap * (numBars - 1)) / numBars;
|
barWidth = (groupWidth * this.options.barSizeRatio - this.options.barGap * (numBars - 1)) / numBars;
|
||||||
leftPadding = groupWidth * (1 - this.options.barSizeRatio) / 2;
|
leftPadding = groupWidth * (1 - this.options.barSizeRatio) / 2;
|
||||||
zeroPos = this.ymin <= 0 && this.ymax >= 0 ? this.transY(0) : null;
|
zeroPos = this.ymin <= 0 && this.ymax >= 0 ? this.transY(0) : null;
|
||||||
@ -1150,6 +1151,7 @@
|
|||||||
_results = [];
|
_results = [];
|
||||||
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
|
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
|
||||||
row = _ref[idx];
|
row = _ref[idx];
|
||||||
|
lastTop = 0;
|
||||||
_results.push((function() {
|
_results.push((function() {
|
||||||
var _j, _len1, _ref1, _results1;
|
var _j, _len1, _ref1, _results1;
|
||||||
_ref1 = row._y;
|
_ref1 = row._y;
|
||||||
@ -1164,8 +1166,16 @@
|
|||||||
top = ypos;
|
top = ypos;
|
||||||
bottom = this.bottom;
|
bottom = this.bottom;
|
||||||
}
|
}
|
||||||
left = this.left + idx * groupWidth + leftPadding + sidx * (barWidth + this.options.barGap);
|
left = this.left + idx * groupWidth + leftPadding;
|
||||||
_results1.push(this.r.rect(left, top, barWidth, bottom - top).attr('fill', this.colorFor(row, sidx, 'bar')).attr('stroke-width', 0));
|
if (!this.options.stacked) {
|
||||||
|
left += sidx * (barWidth + this.options.barGap);
|
||||||
|
}
|
||||||
|
size = bottom - top;
|
||||||
|
if (this.options.stacked) {
|
||||||
|
top -= lastTop;
|
||||||
|
}
|
||||||
|
this.r.rect(left, top, barWidth, size).attr('fill', this.colorFor(row, sidx, 'bar')).attr('stroke-width', 0);
|
||||||
|
_results1.push(lastTop += size);
|
||||||
} else {
|
} else {
|
||||||
_results1.push(null);
|
_results1.push(null);
|
||||||
}
|
}
|
||||||
|
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user