josdejong
11 years ago
1 changed files with 119 additions and 0 deletions
Split View
Diff Options
+ 119
- 0
examples/graph/15_custom_style.html
View File
| @ -0,0 +1,119 @@ | |||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
| <html> | |||
| <head> | |||
| <title>Graph | Custom style</title> | |||
| <style type="text/css"> | |||
| body { | |||
| font: 10pt arial; | |||
| } | |||
| </style> | |||
| <script type="text/javascript" src="../../vis.js"></script> | |||
| <script type="text/javascript"> | |||
| var nodes = null; | |||
| var edges = null; | |||
| var options = null; | |||
| var graph = null; | |||
| // Called when the Visualization API is loaded. | |||
| function draw() { | |||
| // create nodes | |||
| nodes = [ | |||
| {id: 1, label: 'black node', group: 'black'}, | |||
| {id: 2, label: 'black node', group: 'black'}, | |||
| {id: 3, label: 'black node', group: 'black'}, | |||
| {id: 4, label: 'red node', group: 'black', backgroundColor: 'red'}, | |||
| {id: 5, label: 'gray node', group: 'gray'}, | |||
| {id: 6, label: 'gray node', group: 'gray'}, | |||
| {id: 7, label: 'gray node', group: 'gray'}, | |||
| {id: 8, label: 'gray node', group: 'gray'}, | |||
| {id: 9, label: 'image node', group: 'white'}, | |||
| {id: 10, label: 'image node', group: 'white'}, | |||
| {id: 11, label: 'default node'}, | |||
| {id: 12, label: 'default node'} | |||
| ]; | |||
| // create edges | |||
| edges = [ | |||
| {from: 1, to: 2}, | |||
| {from: 1, to: 3}, | |||
| {from: 1, to: 4}, | |||
| {from: 5, to: 6}, | |||
| {from: 5, to: 7}, | |||
| {from: 5, to: 8}, | |||
| {from: 9, to: 10}, | |||
| {from: 9, to: 11}, | |||
| {from: 9, to: 12}, | |||
| {from: 1, to: 5}, | |||
| {from: 5, to: 9}, | |||
| {from: 9, to: 1} | |||
| ]; | |||
| // specify options | |||
| options = { | |||
| 'width': '600px', | |||
| 'height': '600px', | |||
| 'stabilize': false, | |||
| 'edges': { | |||
| 'length': 120, | |||
| 'width': 2, | |||
| 'style': 'arrow', | |||
| 'color': 'gray' | |||
| }, | |||
| 'nodes': { | |||
| // default for all nodes | |||
| 'fontFace': 'times', | |||
| 'shape': 'circle', | |||
| 'borderColor': 'orange', | |||
| 'backgroundColor': 'yellow', | |||
| 'highlightColor': 'gold' | |||
| }, | |||
| 'groups': { | |||
| 'black': { | |||
| // defaults for nodes in this group | |||
| 'radius': 15, | |||
| 'borderColor': 'black', | |||
| 'backgroundColor': 'black', | |||
| 'highlightColor': 'black', | |||
| 'fontColor': 'white', | |||
| 'fontSize': 18, | |||
| 'fontFace': 'courier', | |||
| 'shape': 'rect' | |||
| }, | |||
| 'gray': { | |||
| 'borderColor': 'black', | |||
| 'backgroundColor': 'gray', | |||
| 'highlightColor': 'gray', | |||
| 'fontSize': 18, | |||
| 'fontFace': 'arial', | |||
| 'shape': 'circle' | |||
| }, | |||
| 'white': { | |||
| 'borderColor': 'black', | |||
| 'backgroundColor': 'white', | |||
| 'highlightColor': 'white', | |||
| 'fontColor': 'red', | |||
| 'shape': 'image', | |||
| 'image': 'img/soft-scraps-icons/User-Coat-Blue-icon.png' | |||
| } | |||
| } | |||
| }; | |||
| // create the graph | |||
| var container = document.getElementById('mygraph'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| graph = new vis.Graph(container, data, options); | |||
| } | |||
| </script> | |||
| </head> | |||
| <body onload="draw()"> | |||
| <div id="mygraph"></div> | |||
| </body> | |||
| </html> | |||