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

Ability to disable grid drawing in Line, Area, and Bar charts (#114)

Browse Source
This commit is contained in:
Marcin Chwedziak 2012-12-13 23:05:44 +01:00
parent ff9856e8e9
commit 849f7ee480
7 changed files with 97 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

2
lib/morris.bar.coffee
View File

@ -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)

14
lib/morris.grid.coffee
View File

@ -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

2
lib/morris.line.coffee
View File

@ -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
View File

@ -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
View File

File diff suppressed because one or more lines are too long