Overview Diagrams

An Overview is a subclass of Diagram that is used to display all of the Parts of another diagram and to show where that diagram's viewport is relative to all of those parts. The user can also scroll the overviewed diagram by clicking or dragging within the overview.

The initialization of an Overview is just a matter of setting Overview.observed to refer to the Diagram that you want it to show. So there needs to be a DIV for your main diagram, for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you create the Overview in a very simple manner.

See samples that make use of Overviews in the samples index.

The code below first creates a Diagram that we want to view. It initializes the diagram with 1000 nodes of random colors.

It then creates an Overview and sets Overview.observed to the above Diagram. The DIV for the overview is named "myOverviewDiv". You can, if you wish, set Overview.observed at a later time. You can also set it to null in order to have the Overview stop showing any Diagram.

  // initialize the main Diagram
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key"))
    );

  // start off with a lot of nodes
  var nodeDataArray = [];
  for (var i = 0; i < 1000; i++) {
    nodeDataArray.push({ color: go.Brush.randomColor() });
  }
  diagram.model.nodeDataArray = nodeDataArray;

  // create the Overview and initialize it to show the main Diagram
  var myOverview =
    $(go.Overview, "myOverviewDiv",
      { observed: diagram });