mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-10 21:36:34 +01:00
support non-numeric y-axis values and single series timelines
This commit is contained in:
parent
8446be205e
commit
c7fe04e5b8
29
example.html
29
example.html
@ -114,4 +114,33 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h3>Text values</h3>
|
||||
<div id="graph-yyyy-mm-dd" class="graph" style="height:175px"></div>
|
||||
<script>
|
||||
$(function () {
|
||||
// data from https://en.wikipedia.org/wiki/United_States_presidential_election,_2012_timeline
|
||||
var day_data = [
|
||||
{"period": "2012-01-03", "event": "Iowa"},
|
||||
{"period": "2012-01-10", "event": "New Hampshire"},
|
||||
{"period": "2012-01-21", "event": "South Carolina"},
|
||||
{"period": "2012-01-31", "event": "Florida"},
|
||||
{"period": "2012-02-04", "event": "Maine, Nevada"},
|
||||
{"period": "2012-02-07", "event": "Colorado, Minnesota, Missouri"},
|
||||
{"period": "2012-02-28", "event": "Arizona, Michigan"},
|
||||
{"period": "2012-02-29", "event": "Wyoming"},
|
||||
{"period": "2012-03-01", "event": "Washington"},
|
||||
{"period": "2012-03-06", "event": "Super Tuesday"},
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph-yyyy-mm-dd',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['event'],
|
||||
labels: ['event'],
|
||||
marginBottom: 100,
|
||||
numLines: 1
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
@ -95,6 +95,9 @@ class Morris.Line
|
||||
# remove child elements (get rid of old drawings)
|
||||
@el.empty()
|
||||
|
||||
isNumber = (o) =>
|
||||
! isNan (o-0)
|
||||
|
||||
# the raphael drawing instance
|
||||
@r = new Raphael(@el[0])
|
||||
|
||||
@ -103,7 +106,7 @@ class Morris.Line
|
||||
width = @el.width() - left - @options.marginRight
|
||||
height = @el.height() - @options.marginTop - @options.marginBottom
|
||||
dx = width / (@xmax - @xmin)
|
||||
dy = height / @options.ymax
|
||||
dy = height / (if isNumber(@options.ymax) then @options.ymax else height)
|
||||
|
||||
# quick translation helpers
|
||||
transX = (x) =>
|
||||
@ -112,13 +115,15 @@ class Morris.Line
|
||||
else
|
||||
left + (x - @xmin) * dx
|
||||
transY = (y) =>
|
||||
return @options.marginTop + height - y * dy
|
||||
return @options.marginTop + height - (if isNumber(y) then y * dy else dy)
|
||||
|
||||
# draw y axis labels, horizontal lines
|
||||
lineInterval = height / (@options.numLines - 1)
|
||||
lineInterval = height / (if @options.numLines == 1 then 2 else (@options.numLines - 1))
|
||||
for i in [0..@options.numLines-1]
|
||||
y = @options.marginTop + i * lineInterval
|
||||
v = Math.round((@options.numLines - 1 - i) * @options.ymax / (@options.numLines - 1))
|
||||
v = Math.round((@options.numLines - 1 - i) * @options.ymax / (if @options.numLines == 1 then 1 else (@options.numLines - 1)))
|
||||
if isNaN(v)
|
||||
v = ""
|
||||
@r.text(left - @options.marginLeft/2, y, v)
|
||||
.attr('font-size', @options.gridTextSize)
|
||||
.attr('fill', @options.gridTextColor)
|
||||
@ -187,7 +192,7 @@ class Morris.Line
|
||||
hoverSet.show()
|
||||
xLabel.attr('text', @columnLabels[index])
|
||||
for i in [0..@series.length-1]
|
||||
yLabels[i].attr('text', "#{@seriesLabels[i]}: #{@commas(@series[i][index])}")
|
||||
yLabels[i].attr('text', "#{@seriesLabels[i]}: #{if isNumber(@series[i][index]) then @commas(@series[i][index]) else @series[i][index]}")
|
||||
# recalculate hover box width
|
||||
maxLabelWidth = Math.max.apply null, $.map yLabels, (l) ->
|
||||
l.getBBox().width
|
||||
|
16
morris.js
16
morris.js
@ -85,15 +85,18 @@
|
||||
};
|
||||
|
||||
Line.prototype.redraw = function() {
|
||||
var c, circle, columns, coords, dx, dy, height, hideHover, hilight, hover, hoverHeight, hoverMargins, hoverSet, i, label, labelBox, left, lineInterval, path, pointGrow, pointShrink, prevHilight, prevLabelMargin, s, seriesCoords, seriesPoints, touchHandler, transX, transY, updateHilight, updateHover, v, width, x, xLabel, xLabelMargin, y, yLabel, yLabels, _i, _j, _len, _len2, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8,
|
||||
var c, circle, columns, coords, dx, dy, height, hideHover, hilight, hover, hoverHeight, hoverMargins, hoverSet, i, isNumber, label, labelBox, left, lineInterval, path, pointGrow, pointShrink, prevHilight, prevLabelMargin, s, seriesCoords, seriesPoints, touchHandler, transX, transY, updateHilight, updateHover, v, width, x, xLabel, xLabelMargin, y, yLabel, yLabels, _i, _j, _len, _len2, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8,
|
||||
_this = this;
|
||||
this.el.empty();
|
||||
isNumber = function(o) {
|
||||
return !isNan(o - 0);
|
||||
};
|
||||
this.r = new Raphael(this.el[0]);
|
||||
left = this.measureText(this.options.ymax, this.options.gridTextSize).width + this.options.marginLeft;
|
||||
width = this.el.width() - left - this.options.marginRight;
|
||||
height = this.el.height() - this.options.marginTop - this.options.marginBottom;
|
||||
dx = width / (this.xmax - this.xmin);
|
||||
dy = height / this.options.ymax;
|
||||
dy = height / (isNumber(this.options.ymax) ? this.options.ymax : height);
|
||||
transX = function(x) {
|
||||
if (_this.xvals.length === 1) {
|
||||
return left + width / 2;
|
||||
@ -102,12 +105,13 @@
|
||||
}
|
||||
};
|
||||
transY = function(y) {
|
||||
return _this.options.marginTop + height - y * dy;
|
||||
return _this.options.marginTop + height - (isNumber(y) ? y * dy : dy);
|
||||
};
|
||||
lineInterval = height / (this.options.numLines - 1);
|
||||
lineInterval = height / (this.options.numLines === 1 ? 2 : this.options.numLines - 1);
|
||||
for (i = 0, _ref = this.options.numLines - 1; 0 <= _ref ? i <= _ref : i >= _ref; 0 <= _ref ? i++ : i--) {
|
||||
y = this.options.marginTop + i * lineInterval;
|
||||
v = Math.round((this.options.numLines - 1 - i) * this.options.ymax / (this.options.numLines - 1));
|
||||
v = Math.round((this.options.numLines - 1 - i) * this.options.ymax / (this.options.numLines === 1 ? 1 : this.options.numLines - 1));
|
||||
if (isNaN(v)) v = "";
|
||||
this.r.text(left - this.options.marginLeft / 2, y, v).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
|
||||
this.r.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
|
||||
}
|
||||
@ -183,7 +187,7 @@
|
||||
hoverSet.show();
|
||||
xLabel.attr('text', _this.columnLabels[index]);
|
||||
for (i = 0, _ref9 = _this.series.length - 1; 0 <= _ref9 ? i <= _ref9 : i >= _ref9; 0 <= _ref9 ? i++ : i--) {
|
||||
yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (_this.commas(_this.series[i][index])));
|
||||
yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (isNumber(_this.series[i][index]) ? _this.commas(_this.series[i][index]) : _this.series[i][index]));
|
||||
}
|
||||
maxLabelWidth = Math.max.apply(null, $.map(yLabels, function(l) {
|
||||
return l.getBBox().width;
|
||||
|
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