Loader.js

loadJSON: function( json, i )

Loads a JSON structure to the visualization.  The JSON structure can be a JSON tree or graph structure.

A JSON tree or graph structure consists of nodes, each having as properties

For JSON Tree structures, there’s an extra optional property children of type Array which contains the node’s children.

Example

var json = {
  "id": "aUniqueIdentifier",
  "name": "usually a nodes name",
  "data": {
    "some key": "some value",
    "some other key": "some other value"
   },
  "children": [ *other nodes or empty* ]
};

JSON Graph structures consist of an array of nodes, each specifying the nodes to which the current node is connected.  For JSON Graph structures, the children property is replaced by the adjacencies property.

There are two types of Graph structures, simple and extended graph structures.

For simple Graph structures, the adjacencies property contains an array of strings, each specifying the id of the node connected to the main node.

Example

var json = [
  {
    "id": "aUniqueIdentifier",
    "name": "usually a nodes name",
    "data": {
      "some key": "some value",
      "some other key": "some other value"
     },
    "adjacencies": ["anotherUniqueIdentifier", "yetAnotherUniqueIdentifier", 'etc']
  },

  'other nodes go here...'
];

For extended Graph structures, the adjacencies property contains an array of Adjacency objects that have as properties

Example

var json = [
  {
    "id": "aUniqueIdentifier",
    "name": "usually a nodes name",
    "data": {
      "some key": "some value",
      "some other key": "some other value"
     },
    "adjacencies": [
    {
      nodeTo:"aNodeId",
      data: {} //put whatever you want here
    },
    'other adjacencies go here...'
  },

  'other nodes go here...'
];

About the data property

As described before, you can store custom data in the data property of JSON nodes and adjacencies.  You can use almost any string as key for the data object.  Some keys though are reserved by the toolkit, and have special meanings.  This is the case for keys starting with a dollar sign, for example, $width.

For JSON node objects, adding dollar prefixed properties that match the names of the options defined in Options.Node will override the general value for that option with that particular value.  For this to work however, you do have to set overridable = true in Options.Node.

The same thing is true for JSON adjacencies.  Dollar prefixed data properties will alter values set in Options.Edge if Options.Edge has overridable = true.

When loading JSON data into TreeMaps, the data property must contain a value for the $area key, since this is the value which will be taken into account when creating the layout.  The same thing goes for the $color parameter.

In JSON Nodes you can use also $label- prefixed properties to refer to Options.Label properties.  For example, $label-size will refer to Options.Label size property.  Also, in JSON nodes and adjacencies you can set canvas specific properties individually by using the $canvas- prefix.  For example, $canvas-shadowBlur will refer to the shadowBlur property.

These properties can also be accessed after loading the JSON data from Graph.Nodes and Graph.Adjacences by using Accessors.  For more information take a look at the Graph and Accessors documentation.

Finally, these properties can also be used to create advanced animations like with Options.NodeStyles.  For more information about creating animations please take a look at the Graph.Plot and Graph.Plot.animate documentation.

loadJSON Parameters

toJSON: function( type )

Returns a JSON tree/graph structure from the visualization’s Graph.  See Loader.loadJSON for the graph formats available.

See also

Loader.loadJSON

Parameters