01 Create Graph Demo - yFiles for HTML

Creating a graph from business data

This tutorial will guide you through configuring GraphBuilder to conveniently transfer business data into a graph that you can display, manage and explore.

GraphBuilder is a class which supports loading data from different — and even multiple — sources. It uses the data to construct the graph structure and provides multiple options to assign visualizations to the graph elements and add labels.

Another feature of GraphBuilder is the possibility to update the graph when the business data changes. It allows for specific changes without rebuilding the graph from scratch.

Using GraphBuilder

Before starting with GraphBuilder, let’s have a look at some sample data. It describes two entities representing two persons and a connection between them.

const data = {
  persons: [
    { id: '0', name: 'Erik Joplin' },
    { id: '1', name: 'Melissa Barner' }
  ],
  relationships: [{ id: '0', sourceId: '0', targetId: '1' }]
}

In this case, there are two arrays that contain objects with business data which are associated with an id to be able to reference them in connections or during updates.

Now, we are using GraphBuilder to create a graph containing two nodes that are connected. First, we create an instance of GraphBuilder and associate it with an IGraph instance. Most often the GraphComponent.graph property is used for this purpose. Then, data sources are added for nodes and for edges. Finally, calling the buildGraph method creates the graph.

// use the graph from the graph component, for example
const graph = graphComponent.graph

// instantiate the graph builder
const graphBuilder = new GraphBuilder(graph)

// add node and edge data
graphBuilder.createNodesSource(data.persons, 'id')
graphBuilder.createEdgesSource({
  data: data.relationships,
  id: 'id',
  sourceId: 'sourceId',
  targetId: 'targetId'
})

// create the graph
graphBuilder.buildGraph()

The graph on the right shows the result of this example.

Note	The above code snippets are taken from `create-graph.ts` which is part of this tutorial demo code. Try to change the data in the source file to observe how the graph changes.

Importing specific data structures

This tutorial focuses on the GraphBuilder class which is used when the data describes a general graph with information about nodes and edges.

There are two other graph builder classes that are better suited for specific scenarios: TreeBuilder and AdjacencyGraphBuilder. In principle, they work the same as GraphBuilder. They only differ in the way the node and edge sources are configured.

TreeBuilder is designed to create a graph from data that has a tree structure and AdjacencyGraphBuilder applies when the connections between the elements are not separately specified in the data.

See the steps about Adjacency Graph Builder and Tree Builder of this tutorial for an explanation on how these classes work.