Option to disable grid drawing.

Merge branch 'issue-114' of github.com:tiraeth/morris.js into no-grid

Conflicts:
	morris.js
	morris.min.js
This commit is contained in:
Olly Smith 2012-12-20 07:35:16 +00:00
commit 672583b1e7
7 changed files with 97 additions and 13 deletions

30
examples/bar-no-grid.html Normal file
View 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>Bar charts</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
// Use Morris.Bar
Morris.Bar({
element: 'graph',
gridEnabled: false,
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']
});
</pre>
</body>

37
examples/no-grid.html Normal file
View file

@ -0,0 +1,37 @@
<!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>Formatting Dates YYYY-MM-DD</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',
gridEnabled: false,
data: day_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN']
});
</pre>
</body>

View file

@ -46,7 +46,7 @@ class Morris.Bar extends Morris.Grid
# Draws the bar chart.
#
draw: ->
@drawXAxis()
@drawXAxis() if @options.gridEnabled
@drawSeries()
# draw the x-axis labels

View file

@ -59,6 +59,7 @@ class Morris.Grid extends Morris.EventEmitter
#
gridDefaults:
dateFormat: null
gridEnabled: true
gridLineColor: '#aaa'
gridStrokeWidth: 0.5
gridTextColor: '#888'
@ -194,13 +195,16 @@ class Morris.Grid extends Morris.EventEmitter
@elementHeight = h
@dirty = false
# calculate grid dimensions
maxYLabelWidth = 0
if @options.gridEnabled
maxYLabelWidth = Math.max(
@measureText(@yAxisFormat(@ymin), @options.gridTextSize).width,
@measureText(@yAxisFormat(@ymax), @options.gridTextSize).width)
@left = maxYLabelWidth + @options.padding
@right = @elementWidth - @options.padding
@top = @options.padding
@bottom = @elementHeight - @options.padding - 1.5 * @options.gridTextSize
@bottom = @elementHeight - @options.padding;
@bottom -= 1.5 * @options.gridTextSize if @options.gridEnabled
@width = @right - @left
@height = @bottom - @top
@dx = @width / (@xmax - @xmin)
@ -223,7 +227,7 @@ class Morris.Grid extends Morris.EventEmitter
redraw: ->
@r.clear()
@_calc()
@drawGrid()
@drawGrid() if @options.gridEnabled
@drawGoals()
@drawEvents()
@draw() if @draw

View file

@ -124,7 +124,7 @@ class Morris.Line extends Morris.Grid
# Draws the line chart.
#
draw: ->
@drawXAxis()
@drawXAxis() if @options.gridEnabled
@drawSeries()
if @options.hideHover is false
@displayHoverForRow(@data.length - 1)

View file

@ -117,6 +117,7 @@
Grid.prototype.gridDefaults = {
dateFormat: null,
gridEnabled: true,
gridLineColor: '#aaa',
gridStrokeWidth: 0.5,
gridTextColor: '#888',
@ -289,11 +290,17 @@
this.elementWidth = w;
this.elementHeight = h;
this.dirty = false;
maxYLabelWidth = 0;
if (this.options.gridEnabled) {
maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width);
}
this.left = maxYLabelWidth + this.options.padding;
this.right = this.elementWidth - this.options.padding;
this.top = this.options.padding;
this.bottom = this.elementHeight - this.options.padding - 1.5 * this.options.gridTextSize;
this.bottom = this.elementHeight - this.options.padding;
if (this.options.gridEnabled) {
this.bottom -= 1.5 * this.options.gridTextSize;
}
this.width = this.right - this.left;
this.height = this.bottom - this.top;
this.dx = this.width / (this.xmax - this.xmin);
@ -319,7 +326,9 @@
Grid.prototype.redraw = function() {
this.r.clear();
this._calc();
if (this.options.gridEnabled) {
this.drawGrid();
}
this.drawGoals();
this.drawEvents();
if (this.draw) {
@ -698,7 +707,9 @@
};
Line.prototype.draw = function() {
if (this.options.gridEnabled) {
this.drawXAxis();
}
this.drawSeries();
if (this.options.hideHover === false) {
return this.displayHoverForRow(this.data.length - 1);
@ -1147,7 +1158,9 @@
};
Bar.prototype.draw = function() {
if (this.options.gridEnabled) {
this.drawXAxis();
}
return this.drawSeries();
};

2
morris.min.js vendored

File diff suppressed because one or more lines are too long