How To Create a Graph From Your Data

Overview

If you have data of any kind and want to turn this data into a graph, you have the following options:

• Load a graph from GraphML.
• Use one of the convenience class GraphBuilder, TreeBuilder and AdjacentNodesGraphBuilder to automatically create a graph from JSON data.
• Create the graph manually using the IGraph API.

Which approach you should take depends on the kind of data you have. If you already have a GraphML file, the GraphML approach is fine. If you have data in JSON format, one of the other two approaches is the way to go.

Loading GraphML

GraphML is an XML-based format for storing graphs. yFiles lets you save graphs to GraphML files, which contain the graph structure, layout, style information as well as optional custom data. You can save a graph structure, e.g. to a hard drive, to a database, or to the cloud and restore the current graph state at a later time. For more information on GraphML, please refer to the developer's guide, the GraphML Demo and the samples Save and Load GraphML and Custom Data in GraphML of the Application Features Tutorial.

You should not try to create a GraphML file by hand, unless you really know what you're doing. Instead you should consider the two following options.

Using GraphBuilder et al.

The data binding classes GraphBuilder, TreeBuilder as well as AdjacentNodesGraphBuilder allow to create graphs quick and easily from business data. This lets you create graphs in no time from JSON data or object models. If you have JSON data, parse the data using JSON.parse() to get a JavaScript object model. This object can be used as input for GraphBuilder.

Also, you can automatically update the graph structure if the underlying business model has changed.

Please refer to the data binding demos for examples.

When should I use GraphBuilder?

Leverage the power of the GraphBuilder classes for a rapid prototyping approach where you want to get results quickly. The different classes are suited for different kinds of data structures. Take a look at the api documentation to find out which class is suited best for your data.

When should I not use GraphBuilder

If you have a complex scenario that requires a lot of custom code and customizations of the default behavior, GraphBuilder might not be sufficient for you. Please keep in mind that while the GraphBuilder classes allow some customization, they are simply convenience implementations meant for simple use-cases. They don't do anything that you can't do with a manual approach. If using GraphBuilder feels forced, or you have to workaround and fight against the built-in mechanisms, you should switch to manual graph creation.

Manual Graph Creation

You can create a graph structure manually using the IGraph api. Iterate over your data and create the corresponding graph items using createNode, createEdge, createGroupNode, addLabel and similar methods. Put the original business data objects in the item's tag to associate them with the graph items, or create a separate mapping.

The manual approach gives you control over every detail of the graph. This lets you customize everything, from item styles to locations, node sizes, associated data and much more.

The following demos show this approach:

• Build Graph from Data
• Build Swimlanes from Data
• The file demos/utils/JsonIO.js that is used in the Web Worker Demo and the Node.js Demo