Hi GoJS Team,
I am new in Javascript, but somehow I survived following your documentation, and connect to database using :
document.getElementById("mySavedModel").value = myDiagram.model.toJson(); and the ...
My questions is :
How to save the Fishbone diagram using the
model.toJson?
Calling Model.toJson, such as myDiagram.model.toJson(), will produce a possibly very long string in JSON format representing the state of the diagram’s model. That is what is usually sent to or received from the server.
It is only our samples that have a <textarea> that are used for demonstration purposes so that users can see the contents of the model. I would not expect that element to be in any real web page.
So when you want to save a diagram’s model, you need to call Model.toJson to get the string, but then you should use some mechanism to send the string (and maybe other information) to your server. I don’t know PHP, so I can’t help you there, but I’m sure it’s a common operation.
Hi Walter,
Thanks for your reply.
It is because the Fishbone sample does not call save() and load() function, instead directly uses “var json = {…};”
I have tried to incorporate save and load function etc, with no luck. It seems the Fishbone is similar to organization chart which uses parent and child relationship, but instead using “parent: parent key”, Fishbone uses nested array/json.
Is there any way to modify the Fishbone so that it uses the normal myDiagram.model using parent and child model?
I mean, can Fishbone sample take data from
…as in any other sample?
So, if I want to use model to Json using the parent and child, first thing first, I need to put the data into the textarea :
{ "class": "go.TreeModel",
"nodeDataArray": [
{"key":1, "text":"Incorrect Deliveries", "size":18, "weight":"Bold"},
{"key":2, "text":"Skills", "size":14, "weight":"Bold", "parent":1},
{"key":3, "text":"knowledge", "weight":"Bold", "parent":2},
{"key":4, "text":"procedures", "parent":3},
{"key":5, "text":"documentation", "parent":4},
{"key":6, "text":"products", "parent":3},
{"key":7, "text":"literacy", "weight":"Bold", "parent":2},
{"key":8, "text":"Procedures", "size":14, "weight":"Bold", "parent":1},
{"key":9, "text":"manual", "weight":"Bold", "parent":8},
{"key":10, "text":"consistency", "parent":9},
{"key":11, "text":"automated", "weight":"Bold", "parent":8},
{"key":12, "text":"correctness", "parent":11},
{"key":13, "text":"reliability", "parent":11},
{"key":14, "text":"Communication", "size":14, "weight":"Bold", "parent":1},
{"key":15, "text":"ambiguity", "weight":"Bold", "parent":14},
{"key":16, "text":"sales staff", "weight":"Bold", "parent":14},
{"key":17, "text":"order details", "parent":16},
{"key":18, "text":"lack of knowledge", "parent":17},
{"key":19, "text":"telephone orders", "weight":"Bold", "parent":14},
{"key":20, "text":"lack of information", "parent":19},
{"key":21, "text":"picking slips", "weight":"Bold", "parent":14},
{"key":22, "text":"details", "parent":21},
{"key":23, "text":"legibility", "parent":21},
{"key":24, "text":"Transport", "size":14, "weight":"Bold", "parent":1},
{"key":25, "text":"information", "weight":"Bold", "parent":24},
{"key":26, "text":"incorrect person", "parent":25},
{"key":27, "text":"incorrect addresses", "parent":25},
{"key":28, "text":"customer data base", "parent":27},
{"key":29, "text":"not up-to-date", "parent":28},
{"key":30, "text":"incorrect program", "parent":28},
{"key":31, "text":"incorrect dept", "parent":25},
{"key":32, "text":"carriers", "weight":"Bold", "parent":24},
{"key":33, "text":"efficiency", "parent":32},
{"key":34, "text":"methods", "parent":32}
]}
And from the code below, it seems that the function below producing parent child key, so is it still neded?
function walkJson(obj, arr) {
var key = arr.length;
obj.key = key;
arr.push(obj);
var children = obj.causes;
if (children) {
for (var i = 0; i < children.length; i++) {
var o = children[i];
o.parent = key; // reference to parent node data
walkJson(o, arr);
}
}
}
// build the tree model
var nodeDataArray = [];
walkJson(json, nodeDataArray);
myDiagram.model = new go.TreeModel(nodeDataArray);
So after making the above changes, what else should I do?
Please point me the directions.
Many thanks
It depends on what format you want to save the model.
The Fishbone Layout sample takes in a structured tree of nested data. The code that you quoted walks that tree in order to produce a TreeModel, which expects a flat Array of node data with parent references.
That Fishbone sample is read-only, so it has no reason to have code that converts a TreeModel back into a structured tree of nested data. If you really want that as your saved output format, you’ll need to write that code.
Hi Walter,
Thanks for your reply. Actually there are some other Gojs samples that mimics the intention usage of Fishbone, and I can use that.
I have added arrow, rectangle, color etc to the Fishbone, but not yet into save and load function.
There are a number of sample apps that just display diagrams rather than allow the user to really edit them. That’s just the way they are. I suppose it would be nice if there were editor versions of each such app.
Hi Walter,
Yes, the string is very long, but it works now. The two way binding updates automatically. So,actually a link can only connect to node, so in fishbone, it looks like the link connect to other link, but actually the corner is very sharp.
Anyway, thanks.