Wijmo 5 - BulletGraph

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h1>BulletGraph Demo</h1>
    
    <p>Bullet graphs were designed by Stephen Few for use in dashboards.</p>
        
    <wj-bullet-graph
    	value="actual"
		target="{{target}}"
		min="{{min}}" max="{{max}}"
		bad="{{target * .75}}"
		good="{{target * 1.05}}">
	</wj-bullet-graph>
        
</div>

CSS

.wj-bulletgraph {
    margin: 20px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    $scope.target=100;
    $scope.actual=120;
    $scope.min=0;
    $scope.max=250;
});