Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-09-21 10:41:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merged custom sort, etc

Browse Source
This commit is contained in:
Tim Taubner 2012-03-18 11:35:43 +01:00
commit 2d2a2d4ebd
6 changed files with 249 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -25,6 +25,13 @@ Fork, hack, send a pull request :)
## Changelog ## Changelog
### 0.2.6 - 17th March 2012
- The X labels can be disabled (with `drawXlabels` option, default is true)
- The Y labels can be disabled (with `drawYlabels` option, default is true)
- The automatic data sort can be disabled (with `sortData` option, default is true)
- The options.data can be sorted via custom function (with `sortDataFunction` option, default is null)
### 0.2.5 - 15th March 2012 ### 0.2.5 - 15th March 2012
- Raw millisecond timestamp support (with `dateFormat` option) - Raw millisecond timestamp support (with `dateFormat` option)

39
examples/custom-sort.html Normal file
View File

@ -0,0 +1,39 @@
<!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>Custom data sort</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
var data = [
{"elapsed": "I", "value": 34},
{"elapsed": "II", "value": 24},
{"elapsed": "III", "value": 3},
{"elapsed": "IV", "value": 12},
{"elapsed": "V", "value": 13},
{"elapsed": "VI", "value": 22},
{"elapsed": "VII", "value": 5},
{"elapsed": "VIII", "value": 26},
{"elapsed": "IX", "value": 12},
{"elapsed": "X", "value": 19},
];
Morris.Line({
element: 'graph',
data: data,
xkey: 'elapsed',
ykeys: ['value'],
labels: ['value'],
parseTime: false,
sortDataFunction: function(a,b){
return a["value"] < b["value"];
}
});
</pre>
</body>

38
examples/no-xylabels.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">
</head>
<body>
<h1>Disable X and Y labels</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
var timestamp_data = [
{"period": 1349046000000, "licensed": 3407, "sorned": 660},
{"period": 1313103600000, "licensed": 3351, "sorned": 629},
{"period": 1299110400000, "licensed": 3269, "sorned": 618},
{"period": 1281222000000, "licensed": 3246, "sorned": 661},
{"period": 1273446000000, "licensed": 3257, "sorned": 667},
{"period": 1268524800000, "licensed": 3248, "sorned": 627},
{"period": 1263081600000, "licensed": 3171, "sorned": 660},
{"period": 1260403200000, "licensed": 3171, "sorned": 676},
{"period": 1254870000000, "licensed": 3201, "sorned": 656},
{"period": 1253833200000, "licensed": 3215, "sorned": 622}
];
Morris.Line({
element: 'graph',
data: timestamp_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN'],
drawYlabel: false,
drawXlabel: false,
dateFormat: function (x) { return new Date(x).toDateString(); }
});
</pre>
</body>

12
morris.coffee
View File

@ -63,12 +63,20 @@ class Morris.Line
xlabel: 'year' xlabel: 'year'
xlabelMargin: 50 xlabelMargin: 50
dateFormat: (x) -> new Date(x).toString() dateFormat: (x) -> new Date(x).toString()
sortData: true
sortDataFunction: null
drawYlabel: true
drawXlabel: true
# Do any necessary pre-processing for a new dataset # Do any necessary pre-processing for a new dataset
# #
precalc: -> precalc: ->
# sort data # sort data
if @options.sortData
if typeof @options.sortDataFunction isnt 'function'
@options.data.sort (a,b) => (a[@options.xkey] < b[@options.xkey]) - (b[@options.xkey] < a[@options.xkey]) @options.data.sort (a,b) => (a[@options.xkey] < b[@options.xkey]) - (b[@options.xkey] < a[@options.xkey])
else
@options.data.sort @options.sortDataFunction
# extract labels # extract labels
@columnLabels = $.map @options.data, (d) => d[@options.xkey] @columnLabels = $.map @options.data, (d) => d[@options.xkey]
@seriesLabels = @options.labels @seriesLabels = @options.labels
@ -147,6 +155,7 @@ class Morris.Line
for lineY in [firstY..lastY] by yInterval for lineY in [firstY..lastY] by yInterval
v = Math.floor(lineY) v = Math.floor(lineY)
y = transY(v) y = transY(v)
if @options.drawYlabels
@r.text(left - @options.marginLeft/2, y, v + @options.units) @r.text(left - @options.marginLeft/2, y, v + @options.units)
.attr('font-size', @options.gridTextSize) .attr('font-size', @options.gridTextSize)
.attr('fill', @options.gridTextColor) .attr('fill', @options.gridTextColor)
@ -155,7 +164,8 @@ class Morris.Line
.attr('stroke', @options.gridLineColor) .attr('stroke', @options.gridLineColor)
.attr('stroke-width', @options.gridStrokeWidth) .attr('stroke-width', @options.gridStrokeWidth)
## draw x axis labels ## draw x axis labels (if enabled)
if @options.drawXlabel
prevLabelMargin = null prevLabelMargin = null
xLabelMargin = @options.xlabelMargin # make this an option? xLabelMargin = @options.xlabelMargin # make this an option?
xLabel = @options.xlabel xLabel = @options.xlabel

16
morris.js
View File

@ -53,15 +53,25 @@
xlabelMargin: 50, xlabelMargin: 50,
dateFormat: function(x) { dateFormat: function(x) {
return new Date(x).toString(); return new Date(x).toString();
} },
sortData: true,
sortDataFunction: null,
drawYlabel: true,
drawXlabel: true
}; };
Line.prototype.precalc = function() { Line.prototype.precalc = function() {
var ykey, ymax, ymin, _i, _j, _len, _ref, _ref2, _results, var ykey, ymax, ymin, _i, _j, _len, _ref, _ref2, _results,
_this = this; _this = this;
if (this.options.sortData) {
if (typeof this.options.sortDataFunction !== 'function') {
this.options.data.sort(function(a, b) { this.options.data.sort(function(a, b) {
return (a[_this.options.xkey] < b[_this.options.xkey]) - (b[_this.options.xkey] < a[_this.options.xkey]); return (a[_this.options.xkey] < b[_this.options.xkey]) - (b[_this.options.xkey] < a[_this.options.xkey]);
}); });
} else {
this.options.data.sort(this.options.sortDataFunction);
}
}
this.columnLabels = $.map(this.options.data, function(d) { this.columnLabels = $.map(this.options.data, function(d) {
return d[_this.options.xkey]; return d[_this.options.xkey];
}); });
@ -145,9 +155,12 @@
for (lineY = firstY; firstY <= lastY ? lineY <= lastY : lineY >= lastY; lineY += yInterval) { for (lineY = firstY; firstY <= lastY ? lineY <= lastY : lineY >= lastY; lineY += yInterval) {
v = Math.floor(lineY); v = Math.floor(lineY);
y = transY(v); y = transY(v);
if (this.options.drawYlabels) {
this.r.text(left - this.options.marginLeft / 2, y, v + this.options.units).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end'); this.r.text(left - this.options.marginLeft / 2, y, v + this.options.units).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
}
this.r.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth); this.r.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
} }
if (this.options.drawXlabel) {
prevLabelMargin = null; prevLabelMargin = null;
xLabelMargin = this.options.xlabelMargin; xLabelMargin = this.options.xlabelMargin;
xLabel = this.options.xlabel; xLabel = this.options.xlabel;
@ -227,6 +240,7 @@
renderLabel(i, this.columnLabels[this.columnLabels.length - i - 1]); renderLabel(i, this.columnLabels[this.columnLabels.length - i - 1]);
} }
} }
}
columns = (function() { columns = (function() {
var _i, _len, _ref3, _results; var _i, _len, _ref3, _results;
_ref3 = this.xvals; _ref3 = this.xvals;

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long