mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-13 07:11:12 +01:00
Ability to disable grid drawing in Line, Area, and Bar charts (#114)
This commit is contained in:
Marcin Chwedziak
parent
ff9856e8e9
commit
849f7ee480
7 changed files with 97 additions and 13 deletions
30
examples/bar-no-grid.html
Normal file
30
examples/bar-no-grid.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>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
37
examples/no-grid.html
Normal 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>
|
||||
|
|
@ -74,7 +74,7 @@ class Morris.Bar extends Morris.Grid
|
|||
# Draws the bar chart.
|
||||
#
|
||||
draw: ->
|
||||
@drawXAxis()
|
||||
@drawXAxis() if @options.gridEnabled
|
||||
@drawSeries()
|
||||
@drawHover()
|
||||
@hilight(if @options.hideHover then null else @data.length - 1)
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ class Morris.Grid extends Morris.EventEmitter
|
|||
#
|
||||
gridDefaults:
|
||||
dateFormat: null
|
||||
gridEnabled: true
|
||||
gridLineColor: '#aaa'
|
||||
gridStrokeWidth: 0.5
|
||||
gridTextColor: '#888'
|
||||
|
|
@ -174,13 +175,16 @@ class Morris.Grid extends Morris.EventEmitter
|
|||
@elementHeight = h
|
||||
@dirty = false
|
||||
# calculate grid dimensions
|
||||
maxYLabelWidth = Math.max(
|
||||
@measureText(@yAxisFormat(@ymin), @options.gridTextSize).width,
|
||||
@measureText(@yAxisFormat(@ymax), @options.gridTextSize).width)
|
||||
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)
|
||||
|
|
@ -203,7 +207,7 @@ class Morris.Grid extends Morris.EventEmitter
|
|||
redraw: ->
|
||||
@r.clear()
|
||||
@_calc()
|
||||
@drawGrid()
|
||||
@drawGrid() if @options.gridEnabled
|
||||
@drawGoals()
|
||||
@drawEvents()
|
||||
@draw() if @draw
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ class Morris.Line extends Morris.Grid
|
|||
# Draws the line chart.
|
||||
#
|
||||
draw: ->
|
||||
@drawXAxis()
|
||||
@drawXAxis() if @options.gridEnabled
|
||||
@drawSeries()
|
||||
@drawHover()
|
||||
@hilight(if @options.hideHover then null else @data.length - 1)
|
||||
|
|
|
|||
23
morris.js
23
morris.js
|
|
@ -95,6 +95,7 @@
|
|||
|
||||
Grid.prototype.gridDefaults = {
|
||||
dateFormat: null,
|
||||
gridEnabled: true,
|
||||
gridLineColor: '#aaa',
|
||||
gridStrokeWidth: 0.5,
|
||||
gridTextColor: '#888',
|
||||
|
|
@ -266,11 +267,17 @@
|
|||
this.elementWidth = w;
|
||||
this.elementHeight = h;
|
||||
this.dirty = false;
|
||||
maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width);
|
||||
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);
|
||||
|
|
@ -296,7 +303,9 @@
|
|||
Grid.prototype.redraw = function() {
|
||||
this.r.clear();
|
||||
this._calc();
|
||||
this.drawGrid();
|
||||
if (this.options.gridEnabled) {
|
||||
this.drawGrid();
|
||||
}
|
||||
this.drawGoals();
|
||||
this.drawEvents();
|
||||
if (this.draw) {
|
||||
|
|
@ -579,7 +588,9 @@
|
|||
};
|
||||
|
||||
Line.prototype.draw = function() {
|
||||
this.drawXAxis();
|
||||
if (this.options.gridEnabled) {
|
||||
this.drawXAxis();
|
||||
}
|
||||
this.drawSeries();
|
||||
this.drawHover();
|
||||
return this.hilight(this.options.hideHover ? null : this.data.length - 1);
|
||||
|
|
@ -1143,7 +1154,9 @@
|
|||
};
|
||||
|
||||
Bar.prototype.draw = function() {
|
||||
this.drawXAxis();
|
||||
if (this.options.gridEnabled) {
|
||||
this.drawXAxis();
|
||||
}
|
||||
this.drawSeries();
|
||||
this.drawHover();
|
||||
return this.hilight(this.options.hideHover ? null : this.data.length - 1);
|
||||
|
|
|
|||
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue