Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-11-11 05:46:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

adds xLabelsDiagonal options, as asked in #235

Browse Source
This commit is contained in:
Marcin Chwedziak 2013-05-09 21:21:52 +02:00
parent f857797684
commit 3960ecfcdb
7 changed files with 140 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/diagonal-xlabels-bar.html Normal file
View File

@ -0,0 +1,38 @@
<!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">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Displaying X Labels Diagonally (Bar Chart)</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
var day_data = [
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
];
Morris.Bar({
element: 'graph',
data: day_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN'],
xLabelsDiagonal: true
});
</pre>
</body>

38
examples/diagonal-xlabels.html Normal file
View File

@ -0,0 +1,38 @@
<!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">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Displaying X Labels Diagonally</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
var day_data = [
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
];
Morris.Line({
element: 'graph',
data: day_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN'],
xLabelsDiagonal: true
});
</pre>
</body>

15
lib/morris.bar.coffee
View File

@ -62,13 +62,16 @@ class Morris.Bar extends Morris.Grid
row = @data[@data.length - 1 - i] row = @data[@data.length - 1 - i]
label = @drawXAxisLabel(row._x, ypos, row.label) label = @drawXAxisLabel(row._x, ypos, row.label)
labelBox = label.getBBox() labelBox = label.getBBox()
# ensure a minimum of `xLabelMargin` pixels between labels, and ensure if @options.xLabelsDiagonal
# labels don't overflow the container label.rotate(-90).translate(-labelBox.width/2, 0)
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
prevLabelMargin = labelBox.x - @options.xLabelMargin
else else
label.remove() # ensure a minimum of `xLabelMargin` pixels between labels, and ensure
# labels don't overflow the container
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
prevLabelMargin = labelBox.x - @options.xLabelMargin
else
label.remove()
# draw the data series # draw the data series
# #

13
lib/morris.grid.coffee
View File

@ -67,6 +67,7 @@ class Morris.Grid extends Morris.EventEmitter
gridTextSize: 12 gridTextSize: 12
hideHover: false hideHover: false
yLabelFormat: null yLabelFormat: null
xLabelsDiagonal: false
numLines: 5 numLines: 5
padding: 25 padding: 25
parseTime: true parseTime: true
@ -240,7 +241,13 @@ class Morris.Grid extends Morris.EventEmitter
yLabelWidths = for gridLine in @grid yLabelWidths = for gridLine in @grid
@measureText(@yAxisFormat(gridLine), @options.gridTextSize).width @measureText(@yAxisFormat(gridLine), @options.gridTextSize).width
@left += Math.max(yLabelWidths...) @left += Math.max(yLabelWidths...)
@bottom -= 1.5 * @options.gridTextSize if @options.xLabelsDiagonal
bottomOffsets = for i in [0...@data.length]
@measureText(@data[i].text, @options.gridTextSize, -90).height
@maxXLabelHeight = Math.max(bottomOffsets...)
@bottom -= @maxXLabelHeight
else
@bottom -= 1.5 * @options.gridTextSize
@width = Math.max(1, @right - @left) @width = Math.max(1, @right - @left)
@height = Math.max(1, @bottom - @top) @height = Math.max(1, @bottom - @top)
@dx = @width / (@xmax - @xmin) @dx = @width / (@xmax - @xmin)
@ -270,8 +277,8 @@ class Morris.Grid extends Morris.EventEmitter
# @private # @private
# #
measureText: (text, fontSize = 12) -> measureText: (text, fontSize = 12, angle = 0) ->
tt = @raphael.text(100, 100, text).attr('font-size', fontSize) tt = @raphael.text(100, 100, text).attr('font-size', fontSize).rotate(angle)
ret = tt.getBBox() ret = tt.getBBox()
tt.remove() tt.remove()
ret ret

15
lib/morris.line.coffee
View File

@ -148,13 +148,16 @@ class Morris.Line extends Morris.Grid
drawLabel = (labelText, xpos) => drawLabel = (labelText, xpos) =>
label = @drawXAxisLabel(@transX(xpos), ypos, labelText) label = @drawXAxisLabel(@transX(xpos), ypos, labelText)
labelBox = label.getBBox() labelBox = label.getBBox()
# ensure a minimum of `xLabelMargin` pixels between labels, and ensure if @options.xLabelsDiagonal
# labels don't overflow the container label.rotate(-90).translate(-labelBox.height/2, 0)
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
prevLabelMargin = labelBox.x - @options.xLabelMargin
else else
label.remove() # ensure a minimum of `xLabelMargin` pixels between labels, and ensure
# labels don't overflow the container
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
prevLabelMargin = labelBox.x - @options.xLabelMargin
else
label.remove()
if @options.parseTime if @options.parseTime
if @data.length == 1 and @options.xLabels == 'auto' if @data.length == 1 and @options.xLabels == 'auto'
# where there's only one value in the series, we can't make a # where there's only one value in the series, we can't make a

45
morris.js
View File

@ -127,6 +127,7 @@
gridTextSize: 12, gridTextSize: 12,
hideHover: false, hideHover: false,
yLabelFormat: null, yLabelFormat: null,
xLabelsDiagonal: false,
numLines: 5, numLines: 5,
padding: 25, padding: 25,
parseTime: true, parseTime: true,
@ -344,7 +345,7 @@
}; };
Grid.prototype._calc = function() { Grid.prototype._calc = function() {
var gridLine, h, w, yLabelWidths; var bottomOffsets, gridLine, h, i, w, yLabelWidths;
w = this.el.width(); w = this.el.width();
h = this.el.height(); h = this.el.height();
if (this.elementWidth !== w || this.elementHeight !== h || this.dirty) { if (this.elementWidth !== w || this.elementHeight !== h || this.dirty) {
@ -367,7 +368,20 @@
return _results; return _results;
}).call(this); }).call(this);
this.left += Math.max.apply(Math, yLabelWidths); this.left += Math.max.apply(Math, yLabelWidths);
this.bottom -= 1.5 * this.options.gridTextSize; if (this.options.xLabelsDiagonal) {
bottomOffsets = (function() {
var _i, _ref, _results;
_results = [];
for (i = _i = 0, _ref = this.data.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
_results.push(this.measureText(this.data[i].text, this.options.gridTextSize, -90).height);
}
return _results;
}).call(this);
this.maxXLabelHeight = Math.max.apply(Math, bottomOffsets);
this.bottom -= this.maxXLabelHeight;
} else {
this.bottom -= 1.5 * this.options.gridTextSize;
}
} }
this.width = Math.max(1, this.right - this.left); this.width = Math.max(1, this.right - this.left);
this.height = Math.max(1, this.bottom - this.top); this.height = Math.max(1, this.bottom - this.top);
@ -402,12 +416,15 @@
} }
}; };
Grid.prototype.measureText = function(text, fontSize) { Grid.prototype.measureText = function(text, fontSize, angle) {
var ret, tt; var ret, tt;
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
} }
tt = this.raphael.text(100, 100, text).attr('font-size', fontSize); if (angle == null) {
angle = 0;
}
tt = this.raphael.text(100, 100, text).attr('font-size', fontSize).rotate(angle);
ret = tt.getBBox(); ret = tt.getBBox();
tt.remove(); tt.remove();
return ret; return ret;
@ -833,10 +850,14 @@
var label, labelBox; var label, labelBox;
label = _this.drawXAxisLabel(_this.transX(xpos), ypos, labelText); label = _this.drawXAxisLabel(_this.transX(xpos), ypos, labelText);
labelBox = label.getBBox(); labelBox = label.getBBox();
if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < _this.el.width()) { if (_this.options.xLabelsDiagonal) {
return prevLabelMargin = labelBox.x - _this.options.xLabelMargin; return label.rotate(-90).translate(-labelBox.height / 2, 0);
} else { } else {
return label.remove(); if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < _this.el.width()) {
return prevLabelMargin = labelBox.x - _this.options.xLabelMargin;
} else {
return label.remove();
}
} }
}; };
if (this.options.parseTime) { if (this.options.parseTime) {
@ -1338,10 +1359,14 @@
row = this.data[this.data.length - 1 - i]; row = this.data[this.data.length - 1 - i];
label = this.drawXAxisLabel(row._x, ypos, row.label); label = this.drawXAxisLabel(row._x, ypos, row.label);
labelBox = label.getBBox(); labelBox = label.getBBox();
if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < this.el.width()) { if (this.options.xLabelsDiagonal) {
_results.push(prevLabelMargin = labelBox.x - this.options.xLabelMargin); _results.push(label.rotate(-90).translate(-labelBox.width / 2, 0));
} else { } else {
_results.push(label.remove()); if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < this.el.width()) {
_results.push(prevLabelMargin = labelBox.x - this.options.xLabelMargin);
} else {
_results.push(label.remove());
}
} }
} }
return _results; return _results;

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long