Hi I am trying to convert a cytoscape-web 1 application to a cytoscape-web 2 application.
I have a trivial example using a fixed set of elements created as the element: portion of the initial call to cytoscape web. I then want to add more elements to the existing graph. I have tried using add and load.
add does nothing there is no failure but also no change to my existing graph
load gets and error:
[19:29:52.005] json is undefined @ http://127.0.0.1:8020/LifeScience/jquery.cytoscapeweb.all.js:1918
The code is pretty trivial to reproduce
<!DOCTYPE html>
<html>
<head>
<title>Test Cyto</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
line-height: 1.5;
color: #000000;
font-size: 14px;
}
/* The Cytoscape Web container must have its dimensions set. */
#cy {
width: 100%;
height: 50%;
}
#note {
width: 100%;
height: 25%;
background-color: #f0f0f0;
overflow: auto;
}
p {
padding: 0 0.5em;
margin: 0;
}
p:first-child {
padding-top: 0.5em;
}
</style>
</head>
<body>
<p id="demo">
Test Demo
</p>
<button id="runQ2">
Do display
</button>
<div>
<p>
Graph Image
</p>
</div>
<div id="cy" style="width:1200px;height:500px;">
</div>
<div id="note">
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.cytoscapeweb.all.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("button#runQ2").click(function() {
draw_graph();
});
});
function draw_graph() {
$("#cy").cytoscapeweb({
elements : {
nodes : [{
data : {
id : "a"
}
}, {
data : {
id : "b"
}
}, {
data : {
id : "c"
}
}],
edges : [{
data : {
id : "ab",
source : "a",
target : "b"
}
}, {
data : {
id : "bc",
source : "b",
target : "c"
}
}, {
data : {
id : "ca",
source : "c",
target : "a"
}
}, {
data : {
id : "ac",
source : "a",
target : "c"
}
}]
},
ready : function(cth) {
//cth.add({ group: "nodes", data: { id: "n0" } });
cth.load([{
data : {
id : "n1"
},
group : "nodes"
}, {
data : {
id : "n2"
},
group : "nodes"
}, {
data : {
id : "e1",
source : "n1",
target : "n2"
},
group : "edges"
}]);
alert("in ready function" + graphArray);
}
})
}
</script>
</html>
Would really appreciate any opinions on what I am doing wrong or perhaps my example corrected.
Thanks Much Appreciated
