How Do I Create and Customize a Graph View?

A Graph View can easily be created and customized by using the Open View Dialog, the View Manager and the Properties Pad. Just follow these steps:

    1. In order to create a graph view, open your graph file (.slg) with the Open View Dialog. Select the view type Graph on the left-hand side of the Open View Dialog window. Then choose the default view template Graph (or one of your custom graph view templates under “My View Templates” if you have saved any previously). The “View Settings” section for a graph view gives you the opportunity to select the node and edge classes that you would like to include in the graph view.
      View Settings for the Graph View
      View Settings for the Graph View

      By default, All nodes is selected in the tab Nodes and All edges in the tab Edges. Using this setting, the resulting graph view will show all existing (non-abstract) elements of the data graph. You can limit the selection to certain classes by using the checkboxes. In addition, the drop-down menus next to the node classes (reading Node series by default) allow you to define a node class as normal Node series or as Collapsible node series. By clicking the OK button the Open View dialog is closed and the view is generated. For the example shown above, the graph view could look like this:

      Example of a graph view

      Note that we have not defined the detailed view properties of the graph view so far, such as colors or shapes of the elements. We only defined which data to plot. The initial view properties are set automatically by default. In order to fully customize the view and change the view properties to your specific needs you can subsequently use the View Manager (see step 2). On the right side you can see the legend of the graph explaining the different visualizations of data types. It can be hidden by clicking on the arrows symbol in the upper right corner and its title can be changed in the properties pad after selecting the legend.

    2. Open the View Manager if it is not open already. You can find the View Manager in the top menu section “Tools”. Select one or more Node or Edge series in the View Manager Pad to modify all elements of the series (as shown in the screenshot below). If you would like to modify just a few single nodes or edges, you can directly select them in the graph.

      View Manager for graph view with multiple node series selected
      View Manager for graph with multiple node series selected
    3. Go to the Properties Pad and adjust the view properties by choosing from drop downs, entering text or editing boxes. You can have a detailed view of each property by clicking on the “…” button. This will open the Edit Property dialog, which helps you to fine tune your visualization. The table at the end of this article will give you an overview of all available view properties.

      Adept the view properties in the properties pad
      Adapt the view properties by changing the settings in the Properties pad (left) and in the Edit Property dialog (right)
    4. Repeat this procedure for the canvas and the legend by clicking on these elements and adapting the properties as shown in step 3.
    5. As soon as you are happy with your customized view, you can save the settings by extracting a view template (see figure below). You can then reuse this template for any graph file built with the same metamodel. You find your saved view templates under “My View Templates” in the Open View Dialog.

      Extract a View Template and Save It for Reuse. You find it under My View Templates in the Open View Dialog
      Extract a View Template and Save It for Reuse

Available View Properties

In the properties pad, the following view properties can be set for the graph view:

Graph ElementsProperty NameDescription
NodeColorize ImageAllows coloring of images if you use them for visualizing your node
NodeFill ColorDefines the color of your element
NodeHeightDefines the height of your element
NodeImageDefines a picture which is used to visualize graph elements
Node, EdgeLabel Font ColorDefines the color of your label text
Node, EdgeLabel Font SizeDefines the size of your label
Node, EdgeLabel PositionDefines the position of your label according to cardinal directions
Node, EdgeLabel TextDefines the label text
Node, EdgeLabel TypeDefines the position of the label regarding whether it should be visualized within or outside of the node
Node, EdgeOutline ColorDefines the margin color of the node or the bubble/ The color of the edge
Node, EdgeOutline ThicknessDefines the margin size of the node or the bubble/ the thickness of the edge
NodeShapeDefines the shape of the element
Node, EdgeTooltipDefines the text which is showed while hovering over the element with the mouse
NodeWidthDefines the width of the element
NodeXDefines the X-position in the graph
NodeYDefines the Y-position in the Graph
EdgeDashDefines the line's shape of the edge
EdgeSource ArrowDefines the source arrow's shape of the node
EdgeTarget ArrowDefines the target arrow's shape of the node
CanvasBackground KindDefines, which kind of background is used, e.g. Gradient, Image or color
CanvasColorDefines the color of the background
CanvasGradient End ColorDefines the gradient end color if the background shows a color gradient
CanvasGradient Start ColorDefines the gradient startcolor if the background shows a color gradient
CanvasImageDefines the image that should be shown in the background
CanvasImage Tile ModeDefines whether and how the image should be tiled
CanvasMoving ImageSet the tick at moving image, if you want the backround image to follow the movement of your graph. Thus, i.e. your company´s logo stays in the view while you are scrolling through the graph.
CanvasShow Track BallEnables the trackball to quickly extract all relevant data while hovering over graph elements
LegendIs Legend VisibleDefines whether the legend is shown or hidden
LegendTitleSets the legend title
CanvasTooltipSets text which will be shown when hovering over the Graph window
NodePin NodeClick for explanation
Node, EdgeLabel LinkClick for explanation

Was this article helpful?

Related Articles