Using the Overview renderers

The Overview relies on a renderer object for drawing its content. The default renderer, OverviewTemplateRenderer, is based on the same templating mechanism used to generate the visualization for the graph elements. The OverviewTemplateRenderer renderer can be configured with templates specific for the Overview. You can specify templates for Link, Node, and Subgraph, either as fixed templates or as functions that depend on the object for which the template is needed.
To create an OverviewTemplateRenderer:
  • Use the following code:
    JavaScript:
    renderer = new ibm_ilog.diagram.overview.OverviewTemplateRenderer(
                                          graph,
                                          myNodeTemplate,
                                          myLinkTemplate,
                                          mySubGraphTemplate
                                        );
    Markup:
    <div
      dojoType="ibm_ilog.diagram.overview.OverviewTemplateRenderer"
      graph="diagram.getGraph()"
      node="myNodeTemplate"
      link="myLinkTemplate"
      subgraph="mySubGraphTemplate"
      jsId="renderer"/>
    </div>
To set a configured renderer for the Overview:
  • Use its renderer attribute:
    overviewWidget = new ibm_ilog.diagram.overview.OverviewWidget({
      diagram:dijit.byId("myDiagram"),
      renderer: renderer
    });
    or
    change the renderer after the Overview has already been created:
    dijit.byId("myOverviewWidget").getOverview().setRenderer(renderer);