<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>angular-visjs example</title>
<script data-require="angular.js@1.x" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script data-require="angular-animate@*" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular-animate.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.css" />
<link rel="stylesheet" type="text/css" href="visTimeline.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.js"></script>
<script src="angular-vis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/locales.min.js"></script>
<script src="script.js"></script>
</head>
<body style="background-color: #eee; padding:30px">
<div ng-controller="MainCtrl">
<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline>
</div>
</body>
</html>
var app = angular.module('app', ['ngVis']);
app.controller('MainCtrl', ['$scope', 'VisDataSet',
function($scope, VisDataSet) {
$scope.visEvent = {};
$scope.visData = new vis.DataSet([
{id: 1, start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
{id: 2, start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
{id: 3, start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
//{start: new Date(2015,7,30,16,0,0), content: '<div>Todays Date</div>', title: 'Todays Date'}
]);
$scope.visOption = {
editable: false,
autoResize: true,
moveable: true,
start: '2015-07-26',
end: '2015-10-31',
margin: {
item: 10,
axis: 20
}
};
}
]);
/* Styles go here */
angular.module('ngVis', [])
.factory('VisDataSet', function () {
'use strict';
return function (data, options) {
// Create the new dataSets
return new vis.DataSet(data, options);
};
})
/**
* TimeLine directive
*/
.directive('visTimeline', function () {
'use strict';
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var timelineEvents = [
'rangechange',
'rangechanged',
'timechange',
'timechanged',
'select',
'doubleClick',
'click',
'contextmenu'
];
// Declare the timeline
var timeline = null;
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
if (timeline != null) {
timeline.destroy();
}
// Create the timeline object
timeline = new vis.Timeline(element[0], scope.data.items, scope.data.groups, scope.options);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (timelineEvents.indexOf(String(event)) >= 0) {
timeline.on(event, callback);
}
});
// onLoad callback
if (scope.events != null && scope.events.onload != null &&
angular.isFunction(scope.events.onload)) {
scope.events.onload(timeline);
}
});
scope.$watchCollection('options', function (options) {
if (timeline == null) {
return;
}
timeline.setOptions(options);
});
}
};
})
/**
* Directive for network chart.
*/
.directive('visNetwork', function () {
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var networkEvents = [
'click',
'doubleclick',
'oncontext',
'hold',
'release',
'selectNode',
'selectEdge',
'deselectNode',
'deselectEdge',
'dragStart',
'dragging',
'dragEnd',
'hoverNode',
'blurNode',
'zoom',
'showPopup',
'hidePopup',
'startStabilizing',
'stabilizationProgress',
'stabilizationIterationsDone',
'stabilized',
'resize',
'initRedraw',
'beforeDrawing',
'afterDrawing',
'animationFinished'
];
var network = null;
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
if (network != null) {
network.destroy();
}
// Create the graph2d object
network = new vis.Network(element[0], scope.data, scope.options);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (networkEvents.indexOf(String(event)) >= 0) {
network.on(event, callback);
}
});
// onLoad callback
if (scope.events != null && scope.events.onload != null &&
angular.isFunction(scope.events.onload)) {
scope.events.onload(network);
}
});
scope.$watchCollection('options', function (options) {
if (network == null) {
return;
}
network.setOptions(options);
});
}
};
})
/**
* Directive for graph2d.
*/
.directive('visGraph2d', function () {
'use strict';
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var graphEvents = [
'rangechange',
'rangechanged',
'timechange',
'timechanged',
'finishedRedraw'
];
// Create the chart
var graph = null;
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
if (graph != null) {
graph.destroy();
}
// Create the graph2d object
graph = new vis.Graph2d(element[0], scope.data.items, scope.data.groups, scope.options);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (graphEvents.indexOf(String(event)) >= 0) {
graph.on(event, callback);
}
});
// onLoad callback
if (scope.events != null && scope.events.onload != null &&
angular.isFunction(scope.events.onload)) {
scope.events.onload(graph);
}
});
scope.$watchCollection('options', function (options) {
if (graph == null) {
return;
}
graph.setOptions(options);
});
}
};
})
;
.vis-timeline {
/*border: 2px solid purple;*/
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffffff;
border: none;
}
.vis-panel {
border: none;
}
.vis-background {
border: none;
}
.vis-item {
border-color: #116493; //blue
background-color: green;
font-size: 15pt;
color: green;
box-shadow: 5px 5px 20px rgba(0,255,0, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: #525162; //steel
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: #525162; //steel
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #F991A3;
}
.vis-item.vis-background.preupgrade {
background-color: rgba(0, 153, 255, 1);
}
.vis-item.vis-background.prerelease {
background-color: rgba(102, 204, 255, 1);
}
.vis-item.vis-background.postupgrade {
background-color: rgba(204, 204, 255, 1);
}