Skip to content

Instantly share code, notes, and snippets.

@MHenderson
Last active August 29, 2015 13:59
Show Gist options
  • Save MHenderson/10667009 to your computer and use it in GitHub Desktop.
Save MHenderson/10667009 to your computer and use it in GitHub Desktop.
Demonstration of vis.js options.
<!doctype html>
<html>
<head>
<title>vis.js Options Demo</title>
<script src="http://visjs.org/dist/vis.js"></script>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#graph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script src="options.js"></script>
</head>
<body >
<div id="graph"></div>
<script>
var nodes = [
{id: 0, label: 'a'},
{id: 1, label: 'b'},
{id: 2, label: 'c'},
{id: 3, label: 'd'},
{id: 4, label: 'e'},
];
var edges = [
{from: 0, to: 1},
{from: 0, to: 2},
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
];
var container = document.getElementById('graph');
var data = {
nodes: nodes,
edges: edges,
};
var graph = new vis.Graph(container, data, options);
zoomExtent();
</script>
</body>
</html>
options.js: options.coffee
coffee --bare --compile options.coffee
options =
navigation: true
smoothCurves: false
physics:
barnesHut:
enabled: false
edges:
width: 3
style: 'line'
color:
color: 'black'
highlight: 'grey'
nodes:
shape: 'circle'
fontColor: 'black'
color:
border: 'black'
background: 'black'
highlight:
border: 'grey'
background: 'grey'
// Generated by CoffeeScript 1.6.3
var options;
options = {
navigation: true,
smoothCurves: false,
physics: {
barnesHut: {
enabled: false
}
},
edges: {
width: 3,
style: 'line',
color: {
color: 'black',
highlight: 'grey'
}
},
nodes: {
shape: 'circle',
fontColor: 'black',
color: {
border: 'black',
background: 'black',
highlight: {
border: 'grey',
background: 'grey'
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment