Skip to content

Commit b722937

Browse files
oesmithoesmith
committed
Merge pull request #239 from oesmith/diagonal-series
Diagonal series
2 parents f857797 + 05cdc7f commit b722937

File tree

7 files changed

+170
-27
lines changed

7 files changed

+170
-27
lines changed

‎examples/diagonal-xlabels-bar.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<head>
3+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
4+
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
5+
<script src="../morris.js"></script>
6+
<script src="lib/prettify.js"></script>
7+
<script src="lib/example.js"></script>
8+
<link rel="stylesheet" href="lib/example.css">
9+
<link rel="stylesheet" href="lib/prettify.css">
10+
<link rel="stylesheet" href="../morris.css">
11+
</head>
12+
<body>
13+
<h1>Displaying X Labels Diagonally (Bar Chart)</h1>
14+
<div id="graph"></div>
15+
<pre id="code" class="prettyprint linenums">
16+
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
17+
var day_data = [
18+
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
19+
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
20+
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
21+
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
22+
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
23+
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
24+
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
25+
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
26+
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
27+
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
28+
];
29+
Morris.Bar({
30+
element: 'graph',
31+
data: day_data,
32+
xkey: 'period',
33+
ykeys: ['licensed', 'sorned'],
34+
labels: ['Licensed', 'SORN'],
35+
xLabelAngle: 60
36+
});
37+
</pre>
38+
</body>

‎examples/diagonal-xlabels.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<head>
3+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
4+
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
5+
<script src="../morris.js"></script>
6+
<script src="lib/prettify.js"></script>
7+
<script src="lib/example.js"></script>
8+
<link rel="stylesheet" href="lib/example.css">
9+
<link rel="stylesheet" href="lib/prettify.css">
10+
<link rel="stylesheet" href="../morris.css">
11+
</head>
12+
<body>
13+
<h1>Displaying X Labels Diagonally</h1>
14+
<div id="graph"></div>
15+
<pre id="code" class="prettyprint linenums">
16+
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
17+
var day_data = [
18+
{"period": "2012-10-30", "licensed": 3407, "sorned": 660},
19+
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
20+
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
21+
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
22+
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
23+
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
24+
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
25+
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
26+
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
27+
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
28+
];
29+
Morris.Line({
30+
element: 'graph',
31+
data: day_data,
32+
xkey: 'period',
33+
ykeys: ['licensed', 'sorned'],
34+
labels: ['Licensed', 'SORN'],
35+
xLabelAngle: 60
36+
});
37+
</pre>
38+
</body>

‎lib/morris.bar.coffee‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,29 @@ class Morris.Bar extends Morris.Grid
5656
# @private
5757
drawXAxis: ->
5858
# draw x axis labels
59-
ypos = @bottom + @options.gridTextSize * 1.25
59+
ypos = @bottom + @options.padding / 2
6060
prevLabelMargin = null
61+
prevAngleMargin = null
6162
for i in [0...@data.length]
6263
row = @data[@data.length - 1 - i]
6364
label = @drawXAxisLabel(row._x, ypos, row.label)
65+
textBox = label.getBBox()
66+
label.transform("r#{-@options.xLabelAngle}")
6467
labelBox = label.getBBox()
65-
# ensure a minimum of `xLabelMargin` pixels between labels, and ensure
66-
# labels don't overflow the container
67-
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
68-
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
68+
label.transform("t0,#{labelBox.height / 2}...")
69+
if @options.xLabelAngle != 0
70+
offset = -0.5 * textBox.width *
71+
Math.cos(@options.xLabelAngle * Math.PI / 180.0)
72+
label.transform("t#{offset},0...")
73+
# try to avoid overlaps
74+
if (not prevLabelMargin? or
75+
prevLabelMargin >= labelBox.x + labelBox.width or
76+
prevAngleMargin? and prevAngleMargin >= labelBox.x) and
77+
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
78+
if @options.xLabelAngle != 0
79+
margin = 1.25 * @options.gridTextSize /
80+
Math.sin(@options.xLabelAngle * Math.PI / 180.0)
81+
prevAngleMargin = labelBox.x - margin
6982
prevLabelMargin = labelBox.x - @options.xLabelMargin
7083
else
7184
label.remove()

‎lib/morris.grid.coffee‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ class Morris.Grid extends Morris.EventEmitter
6767
gridTextSize: 12
6868
hideHover: false
6969
yLabelFormat: null
70+
xLabelAngle: 0
7071
numLines: 5
7172
padding: 25
7273
parseTime: true
@@ -240,7 +241,9 @@ class Morris.Grid extends Morris.EventEmitter
240241
yLabelWidths = for gridLine in @grid
241242
@measureText(@yAxisFormat(gridLine), @options.gridTextSize).width
242243
@left += Math.max(yLabelWidths...)
243-
@bottom -= 1.5 * @options.gridTextSize
244+
bottomOffsets = for i in [0...@data.length]
245+
@measureText(@data[i].text, @options.gridTextSize, -@options.xLabelAngle).height
246+
@bottom -= Math.max(bottomOffsets...)
244247
@width = Math.max(1, @right - @left)
245248
@height = Math.max(1, @bottom - @top)
246249
@dx = @width / (@xmax - @xmin)
@@ -270,8 +273,8 @@ class Morris.Grid extends Morris.EventEmitter
270273

271274
# @private
272275
#
273-
measureText: (text, fontSize = 12) ->
274-
tt = @raphael.text(100, 100, text).attr('font-size', fontSize)
276+
measureText: (text, fontSize = 12, angle = 0) ->
277+
tt = @raphael.text(100, 100, text).attr('font-size', fontSize).rotate(angle)
275278
ret = tt.getBBox()
276279
tt.remove()
277280
ret

‎lib/morris.line.coffee‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ class Morris.Line extends Morris.Grid
3636
smooth: true
3737
xLabels: 'auto'
3838
xLabelFormat: null
39-
xLabelMargin: 50
39+
xLabelMargin: 24
4040
continuousLine: true
4141
hideHover: false
4242

@@ -143,15 +143,29 @@ class Morris.Line extends Morris.Grid
143143
# @private
144144
drawXAxis: ->
145145
# draw x axis labels
146-
ypos = @bottom + @options.gridTextSize * 1.25
146+
ypos = @bottom + @options.padding / 2
147147
prevLabelMargin = null
148+
prevAngleMargin = null
148149
drawLabel = (labelText, xpos) =>
149150
label = @drawXAxisLabel(@transX(xpos), ypos, labelText)
151+
textBox = label.getBBox()
152+
label.transform("r#{-@options.xLabelAngle}")
150153
labelBox = label.getBBox()
151-
# ensure a minimum of `xLabelMargin` pixels between labels, and ensure
152-
# labels don't overflow the container
153-
if (not prevLabelMargin? or prevLabelMargin >= labelBox.x + labelBox.width) and
154-
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
154+
label.transform("t0,#{labelBox.height / 2}...")
155+
if @options.xLabelAngle != 0
156+
offset = -0.5 * textBox.width *
157+
Math.cos(@options.xLabelAngle * Math.PI / 180.0)
158+
label.transform("t#{offset},0...")
159+
# try to avoid overlaps
160+
labelBox = label.getBBox()
161+
if (not prevLabelMargin? or
162+
prevLabelMargin >= labelBox.x + labelBox.width or
163+
prevAngleMargin? and prevAngleMargin >= labelBox.x) and
164+
labelBox.x >= 0 and (labelBox.x + labelBox.width) < @el.width()
165+
if @options.xLabelAngle != 0
166+
margin = 1.25 * @options.gridTextSize /
167+
Math.sin(@options.xLabelAngle * Math.PI / 180.0)
168+
prevAngleMargin = labelBox.x - margin
155169
prevLabelMargin = labelBox.x - @options.xLabelMargin
156170
else
157171
label.remove()

‎morris.js‎

Lines changed: 49 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎morris.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)