How To Animate Morris Bar Chart?

I am trying to animate morris bar chart, morris bar chart got displayed but I want animation and different colour for each bar. And my code is: success:function(response){

Solution 1:

Adding animation to morris charts is possible through the function animate of Raphael js but many changes in the code are needed.

The main idea is that we need to create a straight path that will be bound with path computed by Morris.

I show below how I did with Coffee script:

drawLinePath: (path, lineColor, lineIndex) ->
  straightPath = ''for row, ii in @dataifstraightPath== ''
        straightPath = 'M'+row._x+','+@transY(@ymin)else
        straightPath += ','+row._x+','+@transY(@ymin)

  rPath = @raphael.path(straightPath)
                  .attr('stroke', lineColor)
                  .attr('stroke-width', this.lineWidthForSeries(lineIndex))
      do (rPath, path) =>
      rPath.animate {path}, 500, '<>'

Below is the resulting javascript:

Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
  var ii, rPath, row, straightPath, _i, _len, _ref,
  _this = this;
  straightPath = '';
  _ref = this.data;
  for (ii = _i = 0, _len = _ref.length; _i < _len; ii = ++_i) {
    row = _ref[ii];
    if (straightPath === '') {
      straightPath = 'M' + row._x + ',' + this.transY(this.ymin);
    } else {
      straightPath += ',' + row._x + ',' + this.transY(this.ymin);
    }
  }
  rPath = this.raphael.path(straightPath).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex));

  return (function(rPath, path) {
    return rPath.animate({
    path: path
    }, 500, '<>');
  })(rPath, path);
};

As I also needed this function, I made a fork a of Morris, those interested with it can check it here: https://pierresh.github.io/morris.js/

Solution 2:

for the animation thing, I'm looking for the exact same thing ;) But, for the colors, your data array must be like this one:

vardata= {
    labels: ["l1", "l2", "l3"],
    datasets: [
        {
            label:"In",
            fillColor:"rgba(220,220,220,0)",
            strokeColor:"rgba(37,131,154,1)",
            pointColor:"#fff",
            pointStrokeColor:"#rgba(37,131,154,1)",
            pointHighlightFill:"rgba(37,131,154,1)",
            pointHighlightStroke:"rgba(37,131,154,1)",
            data: [1000, 2000, 3000]
        },
        {
            label:"Out",
            fillColor:"rgba(220,220,220,0)",
            strokeColor:"#ffa874",
            pointColor:"#fff",
            pointStrokeColor:"#ffa874",
            pointHighlightFill:"#ffa874",
            pointHighlightStroke:"#ffa874",
            data: [3000, 2000, 1000]
        }
    ]};

If you want different colors on a same dataset, I think it's not a native option... Maybe I'm wrong and if you've fund something, please share ;)

Solution 3:

It can be simply done with the attribute barColors:

Check the below example:

take datain json
var plotdata =[{"x":"A","y1":59,"y2":64,"y3":834,"y4":787},{"x":"B","y1":597,"y2":615,"y3":837,"y4":787}];

morris = Morris.Bar({
    element: 'normal-bar',
    data: plotdata,
    xkey: 'x',
    ykeys: ['y1', 'y2', 'y3','y4'],
    labels:   ['Label1', 'Label2', 'Label3','label4'],
    barColors: ["#3498db", "#26A65B", "#1F3A93", "#6C7A89"],
})