Diagram model from JSON file

GoJS
1

I need to load my diagram model from a JSON file. I found an example here: Page Not Found -- Northwoods Software

I was able to reproduce the concepts used in this example, and everything worked except for the location of nodes, because this requires instantiation of go.Point. Because there’s no way to represent the instantiation of an object in JSON, how would I load location data from a JSON file?

For clarity, here is some sample code I would like to be able to represent in a JSON file:

diagram.model = new go.GraphLinksModel(
 [ 
  { key: "0", color: "black", loc: new go.Point(0, 100), shape: "RoundedRectangle", },
  { key: "1", color: "black", loc: new go.Point(975, 100), shape: "RoundedRectangle", },
  { key: "2", color: "black", loc: new go.Point(300, 250), shape: "RoundedRectangle", },
  { key: "3", color: "black", loc: new go.Point(625, 255), shape: "RoundedRectangle", },
  { key: "4", color: "black", loc: new go.Point(300, 560), shape: "RoundedRectangle", },
  { key: "5", color: "black", loc: new go.Point(675, 560), shape: "RoundedRectangle", },
 ],
2

That’s why most of the samples use a Binding converter on the Node.location property to read a string value as point data:

    new go.Binding("location", "loc", go.Point.parse)

or

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)

where the node data would be something like:

{
  "nodeDataArray":
  [
    { "key":"0", "color":"black", "loc":"0 100", "shape":"RoundedRectangle" },
    { "key":"1", "color":"black", "loc":"975 100", "shape":"RoundedRectangle" }
  ]
}

See for example Flowchart, where the JSON-formatted text is shown in a <textarea> at the bottom of the page.

Note that most of the GoJS samples make use of the Model.toJson method and the Model.fromJson function: GoJS Using Models -- Northwoods Software

3

I just tried that, and I’m seeing the following error in the console:

property set error: Error: Part.location value is not an instance of Point: “100 0”

This repeats for every node in my JSON file.

I looked at some of the samples, and I don’t see what I’m doing wrong. Here is the node section of my code:

$(go.Node, "Auto",

 $(go.Shape, 
  new go.Binding("figure", "shape"),
  new go.Binding("fill", "color")
 ),

 $(go.TextBlock,
  { margin: 3, stroke: "white" },
  new go.Binding("text", "key")
 ),

 new go.Binding("location", "loc", go.Point.Parse),
 { locationSpot: go.Spot.Center },
);

How I’m calling the JSON:

jQuery.getJSON("model.json", load);
function load(jsondata) {
 diagram.model = new go.GraphLinksModel(jsondata["nodes"], jsondata["links"]);
}

And my JSON:

{
 "nodes":[
  {
   "key" : "0",
   "color" : "gray",
   "loc" : "100 0",
   "shape" : "Cube2"
  },

  {
   "key" : "1",
   "color" : "gray",
   "loc" : "900 0",
   "shape" : "Cube2"
  },

  {
   "key" : "2",
   "color" : "gray",
   "loc" : "0 400",
   "shape" : "Cube2"
  },

  {
   "key" : "3",
   "color" : "gray",
   "loc" : "950 400",
   "shape" : "Cube2"
  },

  {
   "key" : "4",
   "color" : "gray",
   "loc" : "475 250",
   "shape" : "Cube2"
  },

  {
   "key" : "5",
   "color" : "gray",
   "loc" : "475 575",
   "shape" : "Cube2"
  },
 ]
}
4

Javascript is case-sensitive, so you need go.Point.parse with a lowercase p.

5

Yep, that was the problem. I changed it from go.Point.Parse to go.point.parse. Thank you!