mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-10 21:36:34 +01:00
Added code and options to animate the initial drawing of the graph
Options added: - animate (boolean) - flag on whether to animate or not - duration (number) - duration of the animation - easing (string) - one of Raphael's supported easing options Methods changed: - drawSeries - added animation code Method added: - seriesAverage - caculates the average y value for a set of coords NB minified js not modified
This commit is contained in:
Dave Tonge
parent
aa67b1a305
commit
a1218b68bb
@ -71,6 +71,9 @@ class Morris.Line
|
||||
dateFormat: (x) -> new Date(x).toString()
|
||||
xLabels: 'auto'
|
||||
xLabelFormat: null
|
||||
animate: true
|
||||
easing: "bounce"
|
||||
duration: 1500
|
||||
|
||||
# Do any necessary pre-processing for a new dataset
|
||||
#
|
||||
@ -248,23 +251,39 @@ class Morris.Line
|
||||
# draw the data series
|
||||
#
|
||||
drawSeries: ->
|
||||
averages = []
|
||||
for i in [@seriesCoords.length-1..0]
|
||||
coords = @seriesCoords[i]
|
||||
if coords.length > 1
|
||||
path = @createPath coords, @options.marginTop, @left, @options.marginTop + @height, @left + @width
|
||||
@r.path(path)
|
||||
.attr('stroke', @options.lineColors[i])
|
||||
.attr('stroke-width', @options.lineWidth)
|
||||
if @options.animate
|
||||
averages[i] = average = Morris.seriesAverage(coords)
|
||||
straightCoords = ({x:c.x, y:average} for c in coords)
|
||||
straightPath = @createPath straightCoords, @options.marginTop, @left, @options.marginTop + @height, @left + @width
|
||||
rPath = @r.path(straightPath)
|
||||
.attr('stroke', @options.lineColors[i])
|
||||
.attr('stroke-width', @options.lineWidth)
|
||||
do (rPath, path) =>
|
||||
rPath.animate {path}, @options.duration, @options.easing
|
||||
else
|
||||
@r.path(path)
|
||||
.attr('stroke', @options.lineColors[i])
|
||||
.attr('stroke-width', @options.lineWidth)
|
||||
@seriesPoints = ([] for i in [0..@seriesCoords.length-1])
|
||||
for i in [@seriesCoords.length-1..0]
|
||||
for c in @seriesCoords[i]
|
||||
if c == null
|
||||
circle = null
|
||||
else
|
||||
circle = @r.circle(c.x, c.y, @options.pointSize)
|
||||
y = if @options.animate then averages[i] else c.y
|
||||
circle = @r.circle(c.x, y, @options.pointSize)
|
||||
.attr('fill', @options.lineColors[i])
|
||||
.attr('stroke-width', 1)
|
||||
.attr('stroke', '#ffffff')
|
||||
if @options.animate
|
||||
do (circle, c) =>
|
||||
circle.animate {cy:c.y}, @options.duration, @options.easing
|
||||
|
||||
@seriesPoints[i].push(circle)
|
||||
|
||||
# create a path for a data series
|
||||
@ -565,5 +584,12 @@ Morris.AUTO_LABEL_ORDER = [
|
||||
"30sec", "15sec", "10sec", "5sec", "second"
|
||||
]
|
||||
|
||||
Morris.seriesAverage = (series) ->
|
||||
total = 0
|
||||
for point in series
|
||||
total += point.y ? 0
|
||||
(total / series.length) / 2
|
||||
|
||||
|
||||
window.Morris = Morris
|
||||
# vim: set et ts=2 sw=2 sts=2
|
||||
|
||||
61
morris.js
61
morris.js
@ -1,4 +1,4 @@
|
||||
// Generated by CoffeeScript 1.3.3
|
||||
// Generated by CoffeeScript 1.3.1
|
||||
(function() {
|
||||
var $, Morris, minutesSpecHelper, secondsSpecHelper,
|
||||
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
|
||||
@ -9,6 +9,8 @@
|
||||
|
||||
Morris.Line = (function() {
|
||||
|
||||
Line.name = 'Line';
|
||||
|
||||
function Line(options) {
|
||||
this.updateHilight = __bind(this.updateHilight, this);
|
||||
|
||||
@ -75,7 +77,10 @@
|
||||
return new Date(x).toString();
|
||||
},
|
||||
xLabels: 'auto',
|
||||
xLabelFormat: null
|
||||
xLabelFormat: null,
|
||||
animate: true,
|
||||
easing: "bounce",
|
||||
duration: 1500
|
||||
};
|
||||
|
||||
Line.prototype.precalc = function() {
|
||||
@ -286,12 +291,37 @@
|
||||
};
|
||||
|
||||
Line.prototype.drawSeries = function() {
|
||||
var c, circle, coords, i, path, _i, _j, _ref, _ref1, _results;
|
||||
var average, averages, c, circle, coords, i, path, rPath, straightCoords, straightPath, y, _i, _j, _ref, _ref1, _results,
|
||||
_this = this;
|
||||
averages = [];
|
||||
for (i = _i = _ref = this.seriesCoords.length - 1; _ref <= 0 ? _i <= 0 : _i >= 0; i = _ref <= 0 ? ++_i : --_i) {
|
||||
coords = this.seriesCoords[i];
|
||||
if (coords.length > 1) {
|
||||
path = this.createPath(coords, this.options.marginTop, this.left, this.options.marginTop + this.height, this.left + this.width);
|
||||
this.r.path(path).attr('stroke', this.options.lineColors[i]).attr('stroke-width', this.options.lineWidth);
|
||||
if (this.options.animate) {
|
||||
averages[i] = average = Morris.seriesAverage(coords);
|
||||
straightCoords = (function() {
|
||||
var _j, _len, _results;
|
||||
_results = [];
|
||||
for (_j = 0, _len = coords.length; _j < _len; _j++) {
|
||||
c = coords[_j];
|
||||
_results.push({
|
||||
x: c.x,
|
||||
y: average
|
||||
});
|
||||
}
|
||||
return _results;
|
||||
})();
|
||||
straightPath = this.createPath(straightCoords, this.options.marginTop, this.left, this.options.marginTop + this.height, this.left + this.width);
|
||||
rPath = this.r.path(straightPath).attr('stroke', this.options.lineColors[i]).attr('stroke-width', this.options.lineWidth);
|
||||
(function(rPath, path) {
|
||||
return rPath.animate({
|
||||
path: path
|
||||
}, _this.options.duration, _this.options.easing);
|
||||
})(rPath, path);
|
||||
} else {
|
||||
this.r.path(path).attr('stroke', this.options.lineColors[i]).attr('stroke-width', this.options.lineWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.seriesPoints = (function() {
|
||||
@ -305,7 +335,8 @@
|
||||
_results = [];
|
||||
for (i = _j = _ref1 = this.seriesCoords.length - 1; _ref1 <= 0 ? _j <= 0 : _j >= 0; i = _ref1 <= 0 ? ++_j : --_j) {
|
||||
_results.push((function() {
|
||||
var _k, _len, _ref2, _results1;
|
||||
var _k, _len, _ref2, _results1,
|
||||
_this = this;
|
||||
_ref2 = this.seriesCoords[i];
|
||||
_results1 = [];
|
||||
for (_k = 0, _len = _ref2.length; _k < _len; _k++) {
|
||||
@ -313,7 +344,15 @@
|
||||
if (c === null) {
|
||||
circle = null;
|
||||
} else {
|
||||
circle = this.r.circle(c.x, c.y, this.options.pointSize).attr('fill', this.options.lineColors[i]).attr('stroke-width', 1).attr('stroke', '#ffffff');
|
||||
y = this.options.animate ? averages[i] : c.y;
|
||||
circle = this.r.circle(c.x, y, this.options.pointSize).attr('fill', this.options.lineColors[i]).attr('stroke-width', 1).attr('stroke', '#ffffff');
|
||||
if (this.options.animate) {
|
||||
(function(circle, c) {
|
||||
return circle.animate({
|
||||
cy: c.y
|
||||
}, _this.options.duration, _this.options.easing);
|
||||
})(circle, c);
|
||||
}
|
||||
}
|
||||
_results1.push(this.seriesPoints[i].push(circle));
|
||||
}
|
||||
@ -670,6 +709,16 @@
|
||||
|
||||
Morris.AUTO_LABEL_ORDER = ["year", "month", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"];
|
||||
|
||||
Morris.seriesAverage = function(series) {
|
||||
var point, total, _i, _len, _ref;
|
||||
total = 0;
|
||||
for (_i = 0, _len = series.length; _i < _len; _i++) {
|
||||
point = series[_i];
|
||||
total += (_ref = point.y) != null ? _ref : 0;
|
||||
}
|
||||
return (total / series.length) / 2;
|
||||
};
|
||||
|
||||
window.Morris = Morris;
|
||||
|
||||
}).call(this);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user