A horizontal bar graph representing a quota.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="quotaBar.js"></script>
  </head>

  <body ng-app="cfaPerformanceApp" ng-controller="Main">
    Value:
    <input type="number" ng-model="value" />
    <br />
    Value 2:
    <input type="number" ng-model="value2" />
    <br />
    Max:
    <input type="number" ng-model="max" />
    <br />
    
    <quota-bar value="value" max="max" value2="value2"></quota-bar>
  </body>

</html>

// Code goes here

angular.module('cfaPerformanceApp', [])
.controller('Main', function ($scope) {
  $scope.value = 50;
  $scope.value2 = 55;
  $scope.max = 60;
  
});

/* Styles go here */

.quotaBar {
  border: 1px solid;
  position: relative;
}

.quotaBar .quotabar {
  background-color: #ccc;
}
.quotaBar .quotabar.ok {
  background-color: #0cf;
}
.quotaBar .quotabar.danger {
  background-color: #f44;
}

.quotaBar .quotaline {
  border-left: 1px solid red;
  border-right: 1px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
}


# Quota Bar Directive

This is a horizontal bar graph representing a quota. A marker line marks 
the quota amount.

The graph scales according to the data. By default, the quota line is placed 
at 70% width, but if the bars would overflow the chart area*, it all gets 
scaled down.

\* Actually, 98% of the chart area, because it looks nicer if the bars don't 
reach the right edge.

If bars pass the quota they get a css class attached to them, for changing the 
color. In this example, blue is "ok" and red is "over".

This example can be modified to support an arbitrary amount of bars at once.

'use strict';

/**
 * @ngdoc directive
 * @name cfaPerformanceApp.directive:quotaBar
 * @description
 * # quotaBar
 */
angular.module('cfaPerformanceApp')
  .directive('quotaBar', function () {
    return {
      template: '<div class="quotaBar">'+
        '<div class="quotabar" ng-style="{width:barWidth}" ng-class="barStyle" data-val="{{value}}">'+
          '<span ng-show="showLabel">{{title}}</span>&nbsp;'+
        '</div>'+
        '<div class="quotabar" ng-style="{width:otherWidth}" ng-class="barStyle2" data-val="{{other}}">'+
          '<span ng-show="showLabel">{{title}}</span>&nbsp;'+
        '</div>'+
        '<b class="quotaline" ng-style="{left:linePos}" data-val="{{max}}"></b>'+
        '</div>',
      restrict: 'E',
      scope: {
        value: '=',
        max: '=',
        value2: '='
      },
      link: function postLink(scope, element, attrs) {
        
        // The maximum horizontal placement of the quota line, from 0 to 1
        var lineMax = .7;
        // The maximum horizontal extent of the colored bar, from 0 to 1
        var barMax = .98; // we'll figure this in later
        scope.linePos = 0;
        scope.barStyle = null;
        scope.barWidth = 0;

        var calc = function () {
          var val = Number(scope.value);
          var val2 = Number(scope.value2);
          var highVal = Math.max(val, val2) || .001;
          var max = Number(scope.max) || .001;
          
          // this will come into play if the value is greater than 100%
          var widthScale = 1;
          // if the value would overflow the chart
          if (highVal > max*(1/lineMax)) {
            // adjust the scale
            widthScale = max*(1/lineMax) / highVal;
          }
          
          scope.linePos = lineMax*barMax*widthScale*100+'%';
          scope.barWidth   = ((val/max)*lineMax)*barMax*widthScale*100+'%';
          scope.otherWidth = ((val2/max)*lineMax)*barMax*widthScale*100+'%';
          
          // calculate the bar color
          scope.barStyle = val > max ? 'danger' : 'ok';
          scope.barStyle2 = val2 > max ? 'danger' : 'ok';
        };
        
        scope.$watch('value', calc);
        scope.$watch('value2', calc);
        scope.$watch('max', calc);

      }
    };
  });