Question

I’m using raphaeljs to create a series of charts on a canvas, and when each new chart is added to the canvas, I want to perferm a series of changes to the previous charts (making them smaller and moving them) – but these animations don’t seem to work. I’ve been able to animate the stroke, so I’m guessing that it’s at least possible, but apparently my syntax won’t work. Here’s my code:

var chartArray = [];

Raphael.fn.pieChart = function (cx, cy, r, rin, graphArray, stroke) {

  var groupName;
  var paper = this,
      rad = Math.PI / 180,
      chart = this.set();

  function sector(cx, cy, r, startAngle, endAngle, params) {
    return paper.path([ ... ]).attr(params); //creates each slice of the pie chart
  }

  ...

  chartArray.push(chart);
  return chart;

}

$('#clicker').click(function(){
  raphCanvas.pieChart(125, 125 + (graphID*10), 100, 50, graphArray, "#fff");
  chartArray[0][j].animate({stroke: "#000"}, 2000); //works to set the stroke of each item in the set to black
  chartArray[0].animate({x: 0}, 2000); //does not work to move the x position of the set
});

Answer 1

In raphael, you cant just animate the “x” attribute, you have use a translation, like this:

var moveX = 100;
var moveY = 0;
view.animate({translation : (moveX)+" , "+(moveY)},500,function(){
  console.log("finished");
});