Getting Started Tutorial - Step 1

Creating the View

How to create a basic view.

This step introduces class GraphComponent, which is the central UI element for working with graphs. The application does not provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a very basic example of how to display a GraphComponent within a web page.

See the sources for details.

Please note that the subsequent tutorial steps use a web component framework (demo-utils) to reduce the amount of code that is needed to demonstrate the relevant features. All of the code samples included in this distribution are also feasible using plain HTML and JavaScript together with yFiles HTML.

Important Note

yFiles provides workarounds which address several bugs in current browsers. Find demos/resources/demo-util.js as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.

App Generator

Use the App Generator to create visualization prototypes – quickly and easily.