animating SVG path when changing value

Question

I am trying to create a graph using SVG and angular directive to change the dynamic parts. Right now I've done this:

http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview

app.directive('pieChart', function($document) {
    return {
        restrict: "E",
        template: '<svg width="500" height="500">' +
          '<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' +
        '</svg>',
        scope: {
          value: '='
        },
        link: function(scope, elem, attr) {
        }
    }
});

I want my graph to look like this when it's 100% value, and when the value is -- let's say -- 45%, I would like to see this line but with only 45% of it's length from the top center. I probably have to re-calculate the path value of the path but I wanted to ask, is it possible when I change the path with JS to make it animate while it's changing the size?

Thank you in advance, or if any of you know a good tutorial on this stuff please link it to me.

EDIT: I changed the directive to a simple bar graph but this is just for example, I know this can be done without SVG since you can make it using divs but i want the chart to be more complex after.

Here's a jsfiddle http://jsfiddle.net/fg9e7eo4/1/

In my example, the chart keeps animating and I would like to make it animate only once and than remain at that point.

By the way, this is the directive that I'm trying out to make it work:

testApp.directive('pieChart', function() {
  var html = 
    '<svg width="510" height="20" style="background: #fff">' +
      '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' +
        '<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' +
      '</path>' +
    '</svg>';

  return {
    restrict: 'E',
    template: html,
    scope: {
      'value': '='
    },

    link: function(scope, elem, attrs) {

      scope.$watch('value', function(newValue, oldValue) {
        scope.path = 'M 5 10, L ' + (newValue * 5) + ' 10';
        scope.path2 = 'M 5 10, L ' + (oldValue * 5) + ' 10; M 5 10, L ' + (newValue * 5) + ' 10';
        elem.children().children().beginElement();
      });

    }
  };
});

Answer 1

If you want to use bar chart, why don't you use rect instead of path? IMO, rect is more descriptive than path.

Here is my example to use rect to animate it.

http://plnkr.co/edit/2hEzBqIVgh0rgE3D0Pd4?p=preview

For AngularJS, you simply set width and to attribute.

<rect x="10" y="10" height="110" width="500"
     style="stroke:#ff0000; fill: #0000ff">
    <animate
        attributeName="width"
        begin="0s"
        dur="2s"
        from="0"
        to="500"
    />
</rect>

This answer is also helpful, I think.
SMIL animation on SVG ng-repeat'ed element only occurs on page load

Answer 2

If you want it to animate only once and then stop replace repeatCount="indefinite" by repeatCount="1" fill="freeze"

If you make sure the paths in the values are consistent in the numbers and types of command you should get smooth animation. Here's an example:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <path d="M100,200 L150,200" stroke="black" stroke-width="10" fill="none">
        <animate attributeName="d" values="M100,200 L150,200;M100,200 L200, 200" fill="freeze" begin="1s" dur="2s" />
    </path>
</svg>

The SVG testsuite has an example of path animation. and there's a w3c primer on animation.