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 = [
[1438031893270, 1],
[1438031894270, 2],
[1438031895269, 3],
[1438031896269, 4],
[1438031897278, 5],
[1438031898270, 6],
[1438031899268, 7],
[1438031900277, 8],
[1438031901269, 9]
];
});
App.directive('chart', function () {
return {
restrict: 'E',
link: function (scope, elem, attrs) {
var opts = {
xaxis: {
mode: "time",
timeformat: "%H:%M:%S"
},
};
var data = scope[attrs.ngModel];
$.plot(elem, data, opts);
elem.show();
}
};
});