SVG + angular binding

<!DOCTYPE html>
<html ng-app="charts">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="BarsCtrl">
    <h1>Hello {{test}}!</h1>
    <div class="container">
      <div class="row">
	      <div class="span6">
		      <bar-chart block-width="24" label-width="162" h="26" x="0" y="0" results="data" ></bar-chart>
	      </div>
      </div>
    </div>
    <div>
    </div>
  </body>

</html>

// Code goes here

angular.module('charts', [])

.filter('range', function() {
  return function(input, total) {
    total = parseInt(total, 10);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
})

.directive('barChart', function() {
  return {
    restrict: 'E',
    templateUrl: 'bar.tpl.html',
    scope: {
      labelWidth: '=',
      blockWidth: '=',
      h: '=',
      x: '=',
      y: '=',
      results: '=',
    },
    replace: true,
    controller: function($scope) {
      $scope.getDomain = function(itemIndex, maxIndex) {
        if (itemIndex < maxIndex / 3) return 'tasks';
        if (itemIndex < (maxIndex / 3) * 2) return 'people';
        if (itemIndex < maxIndex) return 'behavior';
      }
      
      $scope.reverse = function(){
        $scope.list.reverse();
      }

    },
    link: function(scope) {
      scope.list = scope.results;
      
    }
  };
})

.controller('BarsCtrl', function BarsCtrl($scope) {
  $scope.test = "SVG";
  
  $scope.data = [{
		"id": 1,
		"name": "Item 1",
		"value": 5
	}, {
		"id": 2,
		"name": "Item 2",
		"value": 5
	}, {
		"id": 3,
		"name": "Item 3",
		"value": 8
	}, {
		"id": 4,
		"name": "Item 4",
		"value": 7
	}, {
		"id": 5,
		"name": "Item 5",
		"value": 3
	}, {
		"id": 6,
		"name": "Item 6",
		"value": 1
	}];
})

;

/* Styles go here */

/**
 * SVG styling
 */

.light-blue{
    fill: #B9E0FB
}

.light-green{
    fill: #E3F0B7
}

.light-orange{
    fill: #F0E7CC
}

.dark-blue{
    fill: #39A2F6
}

.dark-green{
    fill: #A1C434
}

.dark-orange{
    fill: #F5C436
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="500">
  	<g ng-repeat="item in list">
  		<rect ng-attr-x="0" ng-attr-y="{{y + $index * (h + 6)}}" ng-attr-width="{{labelWidth}}" ng-attr-height="{{h}}" fill="#E7E7E7"></rect>
  
  		<text ng-attr-x="{{4}}" ng-attr-y="{{y + $index * (h + 6) + (h / 2) + 4}}" opacity="0.8" font-family="'ArialMT'" font-size="13">{{item.name}}</text>
  		
  		<rect ng-repeat="n in [] | range:12" ng-attr-class="{{{'tasks': 'light-blue', 'people': 'light-green', 'behavior': 'light-orange'}[getDomain(item.id - 1, list.length)]}}" 
  		ng-attr-x="{{labelWidth + 4 + $index * (blockWidth + 1)}}" 
  		ng-attr-y="{{y + $parent.$index * (h + 6)}}" 
  		ng-attr-width="{{blockWidth}}" 
  		ng-attr-height="{{h}}"></rect>
  		
  		<rect ng-attr-class="{{{'tasks': 'dark-blue', 'people': 'dark-green', 'behavior': 'dark-orange'}[getDomain(item.id - 1, list.length)]}}" ng-attr-x="{{labelWidth + 4}}" ng-attr-y="{{y + $index * (h + 6)}}" ng-attr-width="{{item.value * (blockWidth + 1)}}" ng-attr-height="{{h}}"></rect>
  		
  		<text ng-attr-x="{{labelWidth + 8 + (12 * (blockWidth + 1))}}" ng-attr-y="{{y + $index * (h + 6) + (h / 2) + 4}}" fill="#747474" font-family="'ArialMT'" font-size="11">{{item.value}}</text>
  	</g>
  </svg>
  <br/>
  <button ng-click="reverse()">Reverse</button>
</div>