How to Export a Graph as an Image

When exporting a graph as an image, the generated result can be influenced in many ways. Anything ranging from zoom level, custom image dimensions, or different clipping areas, to image background is possible.

All of the aforementioned configurations are done on the view containing the actual graph. This view is an instance of type Graph2DView, and class ViewPortConfigurator can be used to conveniently configure it.

The sample code fragment below shows several methods that together can be used to properly configure a dedicated view for image export of a graph.
What the sample code does:

• First, creates a dedicated "export" view using the method ImageOutputHandler.createDefaultGraph2DView(y.view.Graph2D).
• Then configures this Graph2DView instance for image export using class ViewPortConfigurator,
• attaches the view to the actual graph,
• writes out the graph using a descendant of ImageOutputHandler,
• and lastly, restores the originally active view.

void exportGraphToImageFileFormat(Graph2D graph, ImageOutputHandler ioh, 
                                  String outFile)
{
  Graph2DView originalView = replaceCurrentWithExportView(graph, ioh);
  configureExportView((Graph2DView)graph.getCurrentView());

  exportGraphAsImage(graph, ioh, outFile);
  restoreOriginalView(graph, originalView);
}

Graph2DView replaceCurrentWithExportView(Graph2D graph, ImageOutputHandler ioh)
{
  // Save the currently active view. 
  Graph2DView originalView = (Graph2DView)graph.getCurrentView();

  // Create a new Graph2DView instance with the graph. This will be the 
  // dedicated view for image export. 
  Graph2DView exportView = ioh.createDefaultGraph2DView(graph);
  // Use the Graph2DRenderer instance of the currently active view. 
  exportView.setGraph2DRenderer(originalView.getGraph2DRenderer());

  // Replace the currently active view containing the graph with the "export" 
  // view. 
  graph.setCurrentView(exportView);

  return originalView;
}

void configureExportView(Graph2DView exportView)
{
  ViewPortConfigurator vpc = new ViewPortConfigurator();

  // Register the graph to be exported with the configurator instance. 
  // Depending on the other settings (see below) the graph will be used to 
  // determine the image size, for example. 
  vpc.setGraph2D(exportView.getGraph2D());

  // The graph's bounding box should determine the size of the image. 
  vpc.setSizeType(ViewPortConfigurator.SIZE_USE_ORIGINAL);
  // The complete graph should be exported, hence set the clipping type 
  // accordingly. 
  vpc.setClipType(ViewPortConfigurator.CLIP_GRAPH);

  // Configure the export view using mainly default values, i.e., zoom level 
  // 100%, and 15 pixel margin around the graph's bounding box. 
  vpc.configure(exportView);
}

void exportGraphAsImage(Graph2D graph, IOHandler ioh, String outFile)
{
  try
  {
    // Writing out the graph using the given IOHandler. 
    ioh.write(graph, outFile);
  }
  catch (IOException ioEx)
  {
    // Something went wrong. Complain. 
    printErrorMessage("Cannot export graph as image file '" + outFile + "'.");
  }
}

void restoreOriginalView(Graph2D graph, Graph2DView originalView)
{
  // Remove the "export" view from the graph. 
  graph.removeView(graph.getCurrentView());
  // Reset the current view to the originally active view. 
  graph.setCurrentView(originalView);
}

As an example for image export, the yFiles source code demo demo.io.GraphFormatConverter shows how to convert a graph specified in GraphML/Zipped GraphML, YGF, or GML format to a GIF, JPG, SVG or GraphML output.