documentationfor yFiles for HTML 3.0.0.1

Creating a Graph from Business Data

The yFiles for HTML data binding module offers a way to create a graph structure from your business data. It is designed for use cases where a tree or general graph structure can be easily derived from a data model that meets certain conditions.

The yFiles for HTML data binding module also lets you specify the visual representation of nodes and edges in the graph and the hierarchical organization in a grouped graph. No layout algorithm is applied when a graph is built using this feature. However, you can easily apply a layout in a subsequent step.

The yFiles for HTML package contains a multistep code tutorial on how to use the data binding module, starting with the first step: Creating a graph from business data.

Even if your data model doesn’t perfectly fit the use cases for which the data binding classes are designed, the graph builders might still be useful for an initial import of at least part of the data model, for example, the nodes.In this case, it might be easier to create the graph in the “regular way” by building and populating a graph structure using the functionality provided by the default IGraph implementation.

The yFiles for HTML data binding module covers some common ways to create graph structures from business data. Because each use case has its own specifics, there are several different graph builder classes, each designed for a specific structure of the input data and the desired graph features.

A simple way to choose a data binding class is to consider whether the data has a tree structure. If it does, the TreeBuilder class can be used. All classes for general graphs can also be used for trees. AdjacencyGraphBuilder is a more general version of TreeBuilder.

If the business data describes a general graph instead of a tree structure, you can choose GraphBuilder or AdjacencyGraphBuilder based on how the connections between nodes are specified in the data model. The following table describes the data models required by each class:

Data binding classes
Type Name Graph Structure Description
TreeBuilderTreeCreates a tree from a tree-structured data model without explicit objects for edges. Each business object specifies its child objects, and edges are defined implicitly. The TreeBuilder does not support specifying children indirectly via IDs. If the data model specifies the children of a node via ID references, the AdjacencyGraphBuilder can be used instead. See more details below.
GraphBuilderGeneralCreates a general graph from a data model that provides business objects for both nodes and edges. The collection of nodes and the collection of edges are specified separately. Supports binding data to an edge’s label and also multiple edges between the same pair of node objects. See more details below.
AdjacencyGraphBuilderGeneralCreates a general graph from a data model without an explicit collection for edges. Each business object specifies the objects in its neighborhood and thus implicitly its incident edges. A node’s neighborhood may either directly specify its neighbor nodes or specify its neighbor edges as separate objects, which point to the respective other node. See more details below.

App Generator

The App Generator is an ETL tool that enables you to quickly prototype yFiles for HTML applications with custom data, styling, and graph layout.

Since the App Generator uses the GraphBuilder and related classes to build an application, it is also a useful tool for exploring and understanding how these classes work together.