JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div ng-app='App'>
    <div ng-controller='Ctrl'>
        <chart ng-model='data'></chart>
    </div>
</div>

CSS

chart {
    display:none;
    width:400px;
    height:200px;
}

JavaScript

var App = angular.module('App', []);

App.controller('Ctrl', function ($scope) {
    $scope.data = [
        [(new Date("07/11/2012 00:00 UTC")).getTime(), 1],
        [(new Date("07/11/2012 01:00 UTC")).getTime(), 2],
        [(new Date("07/11/2012 22:00 UTC")).getTime(), 5],
        [(new Date("07/11/2012 23:00 UTC")).getTime(), 6]
    ];
});

App.directive('chart', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            var opts = {
                xaxis: {
                    mode: "time",
                    timeformat: "%H:%M"
                },
            };
            var data = scope[attrs.ngModel];
            $.plot(elem, data, opts);
            elem.show();
        }
    };
});