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

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

130
morris.coffee
View File

@ -63,12 +63,20 @@ class Morris.Line
xlabel: 'year'
xlabelMargin: 50
dateFormat: (x) -> new Date(x).toString()
sortData: true
sortDataFunction: null
drawYlabel: true
drawXlabel: true
# Do any necessary pre-processing for a new dataset
#
precalc: ->
# sort data
@options.data.sort (a, b) => (a[@options.xkey] < b[@options.xkey]) - (b[@options.xkey] < a[@options.xkey])
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])
else
@options.data.sort @options.sortDataFunction
# extract labels
@columnLabels = $.map @options.data, (d) => d[@options.xkey]
@seriesLabels = @options.labels
@ -147,74 +155,76 @@ class Morris.Line
for lineY in [firstY..lastY] by yInterval
v = Math.floor(lineY)
y = transY(v)
@r.text(left - @options.marginLeft/2, y, v + @options.units)
.attr('font-size', @options.gridTextSize)
.attr('fill', @options.gridTextColor)
.attr('text-anchor', 'end')
if @options.drawYlabels
@r.text(left - @options.marginLeft/2, y, v + @options.units)
.attr('font-size', @options.gridTextSize)
.attr('fill', @options.gridTextColor)
.attr('text-anchor', 'end')
@r.path("M" + left + "," + y + 'H' + (left + width))
.attr('stroke', @options.gridLineColor)
.attr('stroke-width', @options.gridStrokeWidth)
## draw x axis labels
prevLabelMargin = null
xLabelMargin = @options.xlabelMargin # make this an option?
xLabel = @options.xlabel
nextLabel = (cur) -> # cur is a Date()
switch xLabel
when 'day'
new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 1, 0)
when 'month'
if cur.getMonth() == 11
## draw x axis labels (if enabled)
if @options.drawXlabel
prevLabelMargin = null
xLabelMargin = @options.xlabelMargin # make this an option?
xLabel = @options.xlabel
nextLabel = (cur) -> # cur is a Date()
switch xLabel
when 'day'
new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 1, 0)
when 'month'
if cur.getMonth() == 11
new Date(cur.getFullYear() + 1, 0, 1)
else
new Date(cur.getFullYear(), cur.getMonth() + 1, 1)
else # default: year
new Date(cur.getFullYear() + 1, 0, 1)
else
new Date(cur.getFullYear(), cur.getMonth() + 1, 1)
else # default: year
new Date(cur.getFullYear() + 1, 0, 1)
startLabel = (cur) -> # cur is a Date()
if xLabel == 'day' and cur.getHours() == 0
cur
else if xLabel == 'month' and cur.getDate() == 1
cur
else if xLabel == 'year' and cur.getDate() == 1 && cur.getMonth() == 0
cur
else
nextLabel(cur)
labelText = (cur) -> # cur is still a Date()
switch xLabel
when 'day'
d = cur.getDate().toString()
if d.length == 2 then d else '0' + d
when 'month'
m = (cur.getMonth() + 1).toString()
if m.length == 2 then m else '0' + m
else cur.getFullYear()
startLabel = (cur) -> # cur is a Date()
if xLabel == 'day' and cur.getHours() == 0
cur
else if xLabel == 'month' and cur.getDate() == 1
cur
else if xLabel == 'year' and cur.getDate() == 1 && cur.getMonth() == 0
cur
else
nextLabel(cur)
labelText = (cur) -> # cur is still a Date()
switch xLabel
when 'day'
d = cur.getDate().toString()
if d.length == 2 then d else '0' + d
when 'month'
m = (cur.getMonth() + 1).toString()
if m.length == 2 then m else '0' + m
else cur.getFullYear()
r = @r
options = @options
renderLabel = (xpos, text) ->
label = r.text(transX(xpos), options.marginTop + height + options.marginBottom / 2, text)
r = @r
options = @options
renderLabel = (xpos, text) ->
label = r.text(transX(xpos), options.marginTop + height + options.marginBottom / 2, text)
.attr('font-size', options.gridTextSize)
.attr('fill', options.gridTextColor)
labelBox = label.getBBox()
# ensure a minimum of `xLabelMargin` pixels between labels
if prevLabelMargin is null or prevLabelMargin <= labelBox.x
prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin
else
label.remove()
labelBox = label.getBBox()
# ensure a minimum of `xLabelMargin` pixels between labels
if prevLabelMargin is null or prevLabelMargin <= labelBox.x
prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin
else
label.remove()
if @options.parseTime
start = startLabel(new Date(@xmin))
end = new Date(@xmax)
cur = start
while cur <= end
xpos = cur.getTime()
if xpos < @xmin
continue
renderLabel(xpos, labelText cur)
cur = nextLabel cur
else
for i in [@xmin..@xmax]
renderLabel(i, @columnLabels[@columnLabels.length-i-1])
if @options.parseTime
start = startLabel(new Date(@xmin))
end = new Date(@xmax)
cur = start
while cur <= end
xpos = cur.getTime()
if xpos < @xmin
continue
renderLabel(xpos, labelText cur)
cur = nextLabel cur
else
for i in [@xmin..@xmax]
renderLabel(i, @columnLabels[@columnLabels.length-i-1])
# draw the actual series
columns = (transX(x) for x in @xvals)

174
morris.js
View File

@ -53,15 +53,25 @@
xlabelMargin: 50,
dateFormat: function(x) {
return new Date(x).toString();
}
},
sortData: true,
sortDataFunction: null,
drawYlabel: true,
drawXlabel: true
};
Line.prototype.precalc = function() {
var ykey, ymax, ymin, _i, _j, _len, _ref, _ref2, _results,
_this = this;
this.options.data.sort(function(a, b) {
return (a[_this.options.xkey] < b[_this.options.xkey]) - (b[_this.options.xkey] < a[_this.options.xkey]);
});
if (this.options.sortData) {
if (typeof this.options.sortDataFunction !== 'function') {
this.options.data.sort(function(a, b) {
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) {
return d[_this.options.xkey];
});
@ -145,86 +155,90 @@
for (lineY = firstY; firstY <= lastY ? lineY <= lastY : lineY >= lastY; lineY += yInterval) {
v = Math.floor(lineY);
y = transY(v);
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');
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.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
}
prevLabelMargin = null;
xLabelMargin = this.options.xlabelMargin;
xLabel = this.options.xlabel;
nextLabel = function(cur) {
switch (xLabel) {
case 'day':
return new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 1, 0);
case 'month':
if (cur.getMonth() === 11) {
if (this.options.drawXlabel) {
prevLabelMargin = null;
xLabelMargin = this.options.xlabelMargin;
xLabel = this.options.xlabel;
nextLabel = function(cur) {
switch (xLabel) {
case 'day':
return new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 1, 0);
case 'month':
if (cur.getMonth() === 11) {
return new Date(cur.getFullYear() + 1, 0, 1);
} else {
return new Date(cur.getFullYear(), cur.getMonth() + 1, 1);
}
break;
default:
return new Date(cur.getFullYear() + 1, 0, 1);
} else {
return new Date(cur.getFullYear(), cur.getMonth() + 1, 1);
}
break;
default:
return new Date(cur.getFullYear() + 1, 0, 1);
}
};
startLabel = function(cur) {
if (xLabel === 'day' && cur.getHours() === 0) {
return cur;
} else if (xLabel === 'month' && cur.getDate() === 1) {
return cur;
} else if (xLabel === 'year' && cur.getDate() === 1 && cur.getMonth() === 0) {
return cur;
}
};
startLabel = function(cur) {
if (xLabel === 'day' && cur.getHours() === 0) {
return cur;
} else if (xLabel === 'month' && cur.getDate() === 1) {
return cur;
} else if (xLabel === 'year' && cur.getDate() === 1 && cur.getMonth() === 0) {
return cur;
} else {
return nextLabel(cur);
}
};
labelText = function(cur) {
var d, m;
switch (xLabel) {
case 'day':
d = cur.getDate().toString();
if (d.length === 2) {
return d;
} else {
return '0' + d;
}
break;
case 'month':
m = (cur.getMonth() + 1).toString();
if (m.length === 2) {
return m;
} else {
return '0' + m;
}
break;
default:
return cur.getFullYear();
}
};
r = this.r;
options = this.options;
renderLabel = function(xpos, text) {
var label, labelBox;
label = r.text(transX(xpos), options.marginTop + height + options.marginBottom / 2, text).attr('font-size', options.gridTextSize).attr('fill', options.gridTextColor);
labelBox = label.getBBox();
if (prevLabelMargin === null || prevLabelMargin <= labelBox.x) {
return prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin;
} else {
return label.remove();
}
};
if (this.options.parseTime) {
start = startLabel(new Date(this.xmin));
end = new Date(this.xmax);
cur = start;
while (cur <= end) {
xpos = cur.getTime();
if (xpos < this.xmin) continue;
renderLabel(xpos, labelText(cur));
cur = nextLabel(cur);
}
} else {
return nextLabel(cur);
}
};
labelText = function(cur) {
var d, m;
switch (xLabel) {
case 'day':
d = cur.getDate().toString();
if (d.length === 2) {
return d;
} else {
return '0' + d;
}
break;
case 'month':
m = (cur.getMonth() + 1).toString();
if (m.length === 2) {
return m;
} else {
return '0' + m;
}
break;
default:
return cur.getFullYear();
}
};
r = this.r;
options = this.options;
renderLabel = function(xpos, text) {
var label, labelBox;
label = r.text(transX(xpos), options.marginTop + height + options.marginBottom / 2, text).attr('font-size', options.gridTextSize).attr('fill', options.gridTextColor);
labelBox = label.getBBox();
if (prevLabelMargin === null || prevLabelMargin <= labelBox.x) {
return prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin;
} else {
return label.remove();
}
};
if (this.options.parseTime) {
start = startLabel(new Date(this.xmin));
end = new Date(this.xmax);
cur = start;
while (cur <= end) {
xpos = cur.getTime();
if (xpos < this.xmin) continue;
renderLabel(xpos, labelText(cur));
cur = nextLabel(cur);
}
} else {
for (i = _ref = this.xmin, _ref2 = this.xmax; _ref <= _ref2 ? i <= _ref2 : i >= _ref2; _ref <= _ref2 ? i++ : i--) {
renderLabel(i, this.columnLabels[this.columnLabels.length - i - 1]);
for (i = _ref = this.xmin, _ref2 = this.xmax; _ref <= _ref2 ? i <= _ref2 : i >= _ref2; _ref <= _ref2 ? i++ : i--) {
renderLabel(i, this.columnLabels[this.columnLabels.length - i - 1]);
}
}
}
columns = (function() {

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long