BulletCharts Sparklines

StartFiddle, AngularJs, AngularUI, Bootstrap, jQuery UI, jQuery, Sparklines

by iscrow

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<link rel="stylesheet" href="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<script src="http://omnipotent.net/jquery.sparkline/2.0/jquery.sparkline.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div>Static BulletChart:<span ui-jq="sparkline" ui-options="'html', {type: 'bullet'}">10,15,12,8,7</span></div>
        <div>Static Defaultsparkline:<span ui-jq="sparkline" ui-options="html">10,15,12,8,7</span></div>
        <div>Sparkline with no data:<span ui-jq="sparkline" ui-options="html, {type:'bullet'}"></span></div>
        <table class="table">
            <thead>
                <tr>
                    <th>Bulletcharts</th>
                    <th>Bulletcharts</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="bc in bulletsData">
                    <td>{{bc.bcd}}</td>
                    <td><div ui-jq="sparkline" ui-options="'html', {type: 'bullet'}">{{bc.bcd}}</div></td>
                    <td><bulletcharksparkline data="{{bc.bcd}}"></bulletcharksparkline></td>
                </tr>
            </tbody>
        </table>
        <hr />
        <bulletcharksparkline data="10,15,12,8,7"></bulletcharksparkline><br />
        <bulletcharksparkline data="10,15,12,8,7"></bulletcharksparkline>
        <bulletcharksparkline data="10,15,12,8,7"></bulletcharksparkline>
        
    </div>
</div>

CSS

.tpl {
 color:red;   
}

.replaced {
  color: blue;   
}

span{
 padding-left: 15px;   
}

JavaScript

var myapp = angular.module('myapp', ["ui"]);

myapp.controller('myctrl', function($scope) {

    $scope.testInfo = "TestInfo";

    $scope.bulletsData = [
        {bcd: "15,10,12,8,7"},
        {bcd: "15,8,19,8,1"},
        {bcd: "16,10,10,8,5"},
        {bcd: "8,15,12,8,5"},
        {bcd: "3,19,9,8,4"},
        {bcd: "15,10,12,8,5"}
    ];

});

myapp.directive("bulletcharksparkline", function() {
    return {
        restrict:"E",
        scope:{
            data:"@"
        },
        //template: "<div class='tpl'></div>",
        compile: function(tElement,tAttrs,transclude){
            tElement.replaceWith("<span>"+tAttrs.data+"</span>");
            return function(scope, element, attrs){
                attrs.$observe("data", function(newValue){
                    element.html(newValue);
                    element.sparkline('html',{type:'bullet'});
                });
            };
        }
    };
});