RGraph change on the fly different graphs, json1 -> json2 -> json3...
206 views
Skip to first unread message
severi...@gmail.com
Jun 18, 2010, 1:05:26 PM6/18/10
to JavaScript Information Visualization Toolkit
Many many thanks Nico for the helpful jit...
i have one problem:
first i initialize a RGraph with json1.
then i would remove the first RGraph json1 and load the RGraph with an
new and different json2 in the same RGraph.
ant then remove json2 and load json3, and so on...
But i can't rgraph.loadJSON(json2, 0); after remove the json1 tree...
The problem is, the reload without the rgraph.root element dos not
work...
Test:
var lbs = rgraph.fx.labels;
for (var label in lbs) {
if (lbs[label]) {
lbs[label].parentNode.removeChild(lbs[label]);
}
}
var json2 = eval('(' + graph + ')');
rgraph.loadJSON(json2);
rgraph.refresh();
it works only when json2 is smaller then json1
But i have no ideas, how can i made the changes for the trees...
Please some help
Best Regards from Zürich
Severin
i have one problem:
first i initialize a RGraph with json1.
then i would remove the first RGraph json1 and load the RGraph with an
new and different json2 in the same RGraph.
ant then remove json2 and load json3, and so on...
But i can't rgraph.loadJSON(json2, 0); after remove the json1 tree...
The problem is, the reload without the rgraph.root element dos not
work...
Test:
var lbs = rgraph.fx.labels;
for (var label in lbs) {
if (lbs[label]) {
lbs[label].parentNode.removeChild(lbs[label]);
}
}
var json2 = eval('(' + graph + ')');
rgraph.loadJSON(json2);
rgraph.refresh();
it works only when json2 is smaller then json1
But i have no ideas, how can i made the changes for the trees...
Please some help
Best Regards from Zürich
Severin
Nico Garcia Belmonte
Jun 21, 2010, 11:08:51 AM6/21/10
to javascript-information...@googlegroups.com
could you paste specific values for the variables json and graph when this problem happens?
thanks
--
You received this message because you are subscribed to the Google Groups "JavaScript Information Visualization Toolkit" group.
To post to this group, send email to javascript-information...@googlegroups.com.
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
--
I would never die for my beliefs because I might be wrong.
Bertrand Russell
severi...@gmail.com
Jul 7, 2010, 2:50:25 PM7/7/10
to JavaScript InfoVis Toolkit
Hey Nico
it's doesn't work the rGraph Change on the fly on my Sample Code...
I have 3 different Methods teste for change the rgraph...
my Goal is:
onload show me rgraph -> json;
then i would change the rgraph, not add Nodes or trees, a completle
new rgraph in the same show.
my Sample:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML:
include Jit.js
include script.js
<body onload="init();">
<script>
var json = {
"id": "0",
"name": "1",
"children": []
}
var json1 = {
"id": "0",
"name": "Severin",
"children": [{
"id": "1",
"name": "Mad",
"children": []},
{
"id": "2",
"name": "Mad",
"children": []},
{
"id": "3",
"name": "Tom",
"children": [{
"id": "4",
"name": "Mad",
"children": []},
{
"id": "5",
"name": "Fred",
"children": []
}]
}]
};
var json2 = {
"id": "0",
"name": "Clarissa",
"children": [{
"id": "2",
"name": "Chiara",
"children": [{
"id": "3",
"name": "Hedi",
"children": []},
{
"id": "4",
"name": "Juliet",
"children": []},
{
"id": "5",
"name": "Anna",
"children": []
}]
}]
};
var json3 = {
"id": "0",
"name": "Elefant",
"children": [{
"id": "2",
"name": "Giraffe",
"children": [{
"id": "3",
"name": "Mouse",
"children": []
}]
}]
};
</script>
<div id="container">
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="right-container">
<h4>Global Options</h4>
<table>
<tr>
<td>
<input type="button" value="Refresh"
onclick="window.location = window.location" />
</td>
</tr>
</table>
<h4>Refresh</h4>
<table>
<tr>
<td>
<input type="button" value="JSON 1 Tree"
onclick="refreshTree1()" />
<input type="button" value="JSON 2 Tree" onclick="refreshTree2()" /
>
<input type="button" value="JSON 3 Tree" onclick="refreshTree3()" /
>
</td>
</tr>
</table>
</div>
<div id="log"></div>
</div>
</body>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Javascript:
var refreshTree1 = function(){
rgraph.op.sum(json1, {
type: 'fade:seq',
duration: 150,
fps: 30,
hideLabels: false,
onComplete: function(){
}
});
};
var refreshTree2 = function(){
rgraph.refresh();
var subnodes =
Graph.Util.getSubnodes(rgraph.graph.getNode(rgraph.root), 0);
var map = [];
for (var i = 0; i < subnodes.length; i++) {
node = subnodes[i].id;
rgraph.controller.onCreateLabel(rgraph.graph.getNode(node), node);
}
rgraph.refresh();
};
var refreshTree3 = function(){
rgraph.refresh();
var subnodes =
Graph.Util.getSubnodes(rgraph.graph.getNode(rgraph.root), 0);
var map = [];
for (var i = 0; i < subnodes.length; i++) {
node = subnodes[i].id;
rgraph.controller.onCreateLabel(rgraph.graph.getNode(node), node);
// rgraph.controller.onPlaceLabel(rgraph.graph.getNode(node), node);
}
rgraph.refresh();
};
function init(){
var infovis = document.getElementById('infovis');
var w = infovis.offsetWidth, h = infovis.offsetHeight;
var canvas = new Canvas('mycanvas', {
'injectInto': 'infovis',
'width': w,
'height': h,
'backgroundCanvas': {
'styles': {
'strokeStyle': '#444'
},
'impl': {
'init': function(){},
'plot': function(canvas, ctx){
var times = 6, d = 100;
var pi2 = Math.PI * 2;
for (var i = 1; i <= times; i++) {
ctx.beginPath();
ctx.arc(0, 0, i * d, 0, pi2, true);
ctx.stroke();
ctx.closePath();
}
}
}
}
});
rgraph = new RGraph(canvas, {
Node: {
color: '#ccddee'
},
Edge: {
color: '#772277'
},
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
},
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
}
});
rgraph.loadJSON(json);
rgraph.refresh();
}
So many thanks for helping
Severin
it's doesn't work the rGraph Change on the fly on my Sample Code...
I have 3 different Methods teste for change the rgraph...
my Goal is:
onload show me rgraph -> json;
then i would change the rgraph, not add Nodes or trees, a completle
new rgraph in the same show.
my Sample:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML:
include Jit.js
include script.js
<body onload="init();">
<script>
var json = {
"id": "0",
"name": "1",
"children": []
}
var json1 = {
"id": "0",
"name": "Severin",
"children": [{
"id": "1",
"name": "Mad",
"children": []},
{
"id": "2",
"name": "Mad",
"children": []},
{
"id": "3",
"name": "Tom",
"children": [{
"id": "4",
"name": "Mad",
"children": []},
{
"id": "5",
"name": "Fred",
"children": []
}]
}]
};
var json2 = {
"id": "0",
"name": "Clarissa",
"children": [{
"id": "2",
"name": "Chiara",
"children": [{
"id": "3",
"name": "Hedi",
"children": []},
{
"id": "4",
"name": "Juliet",
"children": []},
{
"id": "5",
"name": "Anna",
"children": []
}]
}]
};
var json3 = {
"id": "0",
"name": "Elefant",
"children": [{
"id": "2",
"name": "Giraffe",
"children": [{
"id": "3",
"name": "Mouse",
"children": []
}]
}]
};
</script>
<div id="container">
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="right-container">
<h4>Global Options</h4>
<table>
<tr>
<td>
<input type="button" value="Refresh"
onclick="window.location = window.location" />
</td>
</tr>
</table>
<h4>Refresh</h4>
<table>
<tr>
<td>
<input type="button" value="JSON 1 Tree"
onclick="refreshTree1()" />
<input type="button" value="JSON 2 Tree" onclick="refreshTree2()" /
>
<input type="button" value="JSON 3 Tree" onclick="refreshTree3()" /
>
</td>
</tr>
</table>
</div>
<div id="log"></div>
</div>
</body>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Javascript:
var refreshTree1 = function(){
rgraph.op.sum(json1, {
type: 'fade:seq',
duration: 150,
fps: 30,
hideLabels: false,
onComplete: function(){
}
});
};
var refreshTree2 = function(){
var lbs = rgraph.fx.labels;
for (var label in lbs) {
if (lbs[label] && lbs[label].id != rgraph.root) {
for (var label in lbs) {
lbs[label].parentNode.removeChild(lbs[label]);
}
}
rgraph.loadJSON(json2);
}
}
rgraph.refresh();
var subnodes =
Graph.Util.getSubnodes(rgraph.graph.getNode(rgraph.root), 0);
var map = [];
for (var i = 0; i < subnodes.length; i++) {
node = subnodes[i].id;
rgraph.controller.onCreateLabel(rgraph.graph.getNode(node), node);
}
rgraph.refresh();
};
var refreshTree3 = function(){
var lbs = rgraph.fx.labels;
for (var label in lbs) {
if (lbs[label] && lbs[label].id != rgraph.root) {
for (var label in lbs) {
lbs[label].parentNode.removeChild(lbs[label]);
}
}
rgraph.loadJSON(json3);
}
}
rgraph.refresh();
var subnodes =
Graph.Util.getSubnodes(rgraph.graph.getNode(rgraph.root), 0);
var map = [];
for (var i = 0; i < subnodes.length; i++) {
node = subnodes[i].id;
rgraph.controller.onCreateLabel(rgraph.graph.getNode(node), node);
// rgraph.controller.onPlaceLabel(rgraph.graph.getNode(node), node);
}
rgraph.refresh();
};
function init(){
var infovis = document.getElementById('infovis');
var w = infovis.offsetWidth, h = infovis.offsetHeight;
var canvas = new Canvas('mycanvas', {
'injectInto': 'infovis',
'width': w,
'height': h,
'backgroundCanvas': {
'styles': {
'strokeStyle': '#444'
},
'impl': {
'init': function(){},
'plot': function(canvas, ctx){
var times = 6, d = 100;
var pi2 = Math.PI * 2;
for (var i = 1; i <= times; i++) {
ctx.beginPath();
ctx.arc(0, 0, i * d, 0, pi2, true);
ctx.stroke();
ctx.closePath();
}
}
}
}
});
rgraph = new RGraph(canvas, {
Node: {
color: '#ccddee'
},
Edge: {
color: '#772277'
},
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
},
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
}
});
rgraph.loadJSON(json);
rgraph.refresh();
}
So many thanks for helping
Severin
Nico Garcia Belmonte
Jul 7, 2010, 3:04:31 PM7/7/10
to javascript-information...@googlegroups.com
what version of the toolkit are you using?
--
You received this message because you are subscribed to the Google Groups "JavaScript InfoVis Toolkit" group.
To post to this group, send email to javascript-information...@googlegroups.com.
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
severi...@gmail.com
Jul 7, 2010, 3:08:40 PM7/7/10
to JavaScript InfoVis Toolkit
Version: 1.1.3
On 7 Jul., 21:04, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> what version of the toolkit are you using?
>
> On Wed, Jul 7, 2010 at 8:50 PM, severin.r...@gmail.com <
> > javascript-information-visua...@googlegroups.com<javascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
> > .
> > .
On 7 Jul., 21:04, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> what version of the toolkit are you using?
>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/javascript-information-visualization-t...
> > .
Nico Garcia Belmonte
Jul 7, 2010, 3:21:40 PM7/7/10
to javascript-information...@googlegroups.com
The only code structure you should be using when refreshing the data is this one:
rgraph.refresh();
var lbs = rgraph.fx.labels;
for (var label in lbs) {
for (var label in lbs) {
if (lbs[label]) {
lbs[label].parentNode.removeChild(lbs[label]);
}
}
rgraph.loadJSON(json3);}
}
rgraph.refresh();
...no "sum", no "getSubnodes", etc. just that,
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
severi...@gmail.com
Jul 7, 2010, 3:49:02 PM7/7/10
to JavaScript InfoVis Toolkit
much more better...
the graph works alltimes json0 -> json1 -> json2 -> json3 -> json2 and
so on
but the lables
domElement.innerHTML = node.name;
are not showing after second change...
some labels are not showing...
the graph works alltimes json0 -> json1 -> json2 -> json3 -> json2 and
so on
but the lables
domElement.innerHTML = node.name;
are not showing after second change...
some labels are not showing...
Nico Garcia Belmonte
Jul 7, 2010, 4:06:12 PM7/7/10
to javascript-information...@googlegroups.com
Try using unique ids for the nodes across all JSONs (so that each node has a unique id among all nodes of all JSONs)
--
You received this message because you are subscribed to the Google Groups "JavaScript InfoVis Toolkit" group.
To post to this group, send email to javascript-information...@googlegroups.com.
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
severi...@gmail.com
Jul 7, 2010, 4:15:03 PM7/7/10
to JavaScript InfoVis Toolkit
it works fine, thanks Nico...
one question, on the second refresh from the same rgraph, the lables
are hidden...
if have you a idea to fix these, otherwise, i count the id's on the
second show
sample:
first show:
count = 0;
json1 = {
"id": count_"1",
"name": "Severin",
"children":...
count = 1;
json1 = {
"id": count_"1",
"name": "Severin",
"children":...
and so on...
On 7 Jul., 22:06, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Try using unique ids for the nodes across all JSONs (so that each node has a
> unique id among all nodes of all JSONs)
>
> On Wed, Jul 7, 2010 at 9:49 PM, severin.r...@gmail.com <
> > .
> > .
one question, on the second refresh from the same rgraph, the lables
are hidden...
if have you a idea to fix these, otherwise, i count the id's on the
second show
sample:
first show:
count = 0;
json1 = {
"id": count_"1",
"name": "Severin",
"children":...
count = 1;
json1 = {
"id": count_"1",
"name": "Severin",
"children":...
and so on...
On 7 Jul., 22:06, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Try using unique ids for the nodes across all JSONs (so that each node has a
> unique id among all nodes of all JSONs)
>
>
>
>
> severin.r...@gmail.com> wrote:
> > much more better...
> > the graph works alltimes json0 -> json1 -> json2 -> json3 -> json2 and
> > so on
>
> > but the lables
> > domElement.innerHTML = node.name;
> > are not showing after second change...
> > some labels are not showing...
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript InfoVis Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > javascript-information-visua...@googlegroups.com<javascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
>
>
> severin.r...@gmail.com> wrote:
> > much more better...
> > the graph works alltimes json0 -> json1 -> json2 -> json3 -> json2 and
> > so on
>
> > but the lables
> > domElement.innerHTML = node.name;
> > are not showing after second change...
> > some labels are not showing...
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript InfoVis Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/javascript-information-visualization-t...
> > .
KFrancis
Jul 27, 2010, 2:16:57 PM7/27/10
to JavaScript InfoVis Toolkit
How should this code change with the newer version? It doesn't seem to
work.
I'm getting an "Cannot call method 'removeChild' of undefined
On Jul 7, 3:21 pm, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> The only code structure you should be using when refreshing the data is this
> one:
>
> var lbs = rgraph.fx.labels;
> for (var label in lbs) {
> if (lbs[label]) {
> lbs[label].parentNode.removeChild(lbs[label]);
> }
> }
>
> rgraph.loadJSON(json3);
> rgraph.refresh();
>
> ...no "sum", no "getSubnodes", etc. just that,
>
> On Wed, Jul 7, 2010 at 9:08 PM, severin.r...@gmail.com <
> > javascript-information-visualization-toolkit%2Bunsu...@googlegroups.com <javascript-information-visualization-toolkit%252Bunsubscribe@googlegroups. com>
> > .
> > For more...
>
> read more »
work.
I'm getting an "Cannot call method 'removeChild' of undefined
On Jul 7, 3:21 pm, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> The only code structure you should be using when refreshing the data is this
> one:
>
> var lbs = rgraph.fx.labels;
> for (var label in lbs) {
> if (lbs[label]) {
> lbs[label].parentNode.removeChild(lbs[label]);
> }
> }
>
> rgraph.loadJSON(json3);
> rgraph.refresh();
>
> ...no "sum", no "getSubnodes", etc. just that,
>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/javascript-information-visualization-t.
> > ..
> > > > .
>
> > > --
> > > I would never die for my beliefs because I might be wrong.
>
> > > Bertrand Russell
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript InfoVis Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > javascript-information-visua...@googlegroups.com<j avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/javascript-information-visualization-t.
> > ..
> > > > .
>
> > > --
> > > I would never die for my beliefs because I might be wrong.
>
> > > Bertrand Russell
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript InfoVis Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > .
> > For more...
>
> read more »
Nico Garcia Belmonte
Jul 27, 2010, 2:59:04 PM7/27/10
to javascript-information...@googlegroups.com
No need to delete the labels, just call loadJSON and then refresh.
> To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
Reply all
Reply to author
Forward
0 new messages