I want joint.js library to read my JSON and display it as a chart...

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 200,
    model: graph
});

var graph = new joint.dia.Graph;

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }';

graph.fromJSON(JSON.parse(jsonstring));

I want joint.js library to read my JSON and display it as a chart...

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 200,
    model: graph
});

var graph = new joint.dia.Graph;

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }';

graph.fromJSON(JSON.parse(jsonstring));

• javascript
• json
• jointjs

• 1 I'm intrigued by a library that has a fromJSON method that doesn't accept JSON... – lonesomeday Commented Nov 20, 2013 at 12:47
• 1 There is a reason for that. Read developer.mozilla/en-US/docs/JSON#toJSON()_method and an example of another library: backbonejs/#Model-toJSON. JSON.stringify calls toJSON() of the object it stringifies recursively. toJSON() is supposed to return an object, not a string. Try: JSON.stringify({ toJSON: function() { return { foo: 'bar' } } }). fromJSON() is the opposite and therefore accepts an object, not a string. – dave Commented Nov 20, 2013 at 14:53

1 Answer 1

From the API for joint.dia.Graph:

joint.dia.Graph is the model holding all the cells (elements and links) of the diagram. It's a Backbone model. The collection of all the cells is stored in the property cells.

So the expected JSON should be in this form: { cells: [] }. Where cells is an array of both elements and links. Each element should have the form:

{ 
    id: <string>, 
    type: '<type of shape>', 
    attrs: { <attrs> }, 
    position: { x: <int>, y: <int> }, 
    angle: <deg>, 
    size: { width: <int>, height: <int> }, 
    z: <int>, 
    ... and some other, maybe custom, data properties 
}

Reference: Using Server Data with JointJS