Graph package

org.concord.graph

Using a Graph Window

The main UI component (JComponent) of the graph package is the Graph Window (org.concord.graph.ui.GraphWindow).

This is a simple example of using a GraphWindow. If you want to add objects to the Graph Window, you need to write a class that implements the Graphable interface, or the more simple Drawable interface.

//Creating a Graph Window object
GraphWindow graph = new GraphWindow();

//Changing the scale and origin
CoordinateSystem coord = graph.getDefaultGraphArea().getCoordinateSystem();
coord.setScale(new Point2D.Double(30.0, 30.0)); //1 unit every 30 pixels
coord.setOriginOffset(new Point2D.Double(100.0, 100.0)); //The origin will be in the position (100,100) on the screen

//Adding a grid
Grid2D grid = new Grid2D();
graph.addDecoration(grid);

//Adding objects to the Graph Window
Drawable g = new ImplementationOfGraphable();
graph.add(g);

For more information on how to implement your own Drawable or Graphable class, see How to write objects to graph on a Graph Window.

Setting up the properties of a Graph Window

For more information, see the GraphWindow java docs

Adding a grid to the Graph Window

The graph package comes with a few default grids that you can use, although you can write your own grid class that implements the Graphable interface.

Creating a grid object

The graph package comes with a few options of classes you can use to create grid objects: Grid, SingleAxisGrid and Grid2D. Depending on your needs, you can choose which class to use.

Grid (org.concord.graph.ui.Grid)

This is a simple grid for linear coordinate systems. It has the capability of maintaining a buffer on an offscreen image (for speed purposes).
This grid paints the axis with a different color than the grid lines. It shows labels in the axis, and the y axis label is displayed vertically. It paints labels on the axis, with numbers for each one of the grid lines.
You can turn on and off the grid lines, the axis labels and grid number labels (by default they are all on). You can also change the size of the labels. The buffered image used can be turned off too.
This grid also optionally changes automatically the interval when the scale of the coordinate system changes. It doesn't have minor and major lines.

This is an example of how to create an org.concord.graph.ui.Grid object

//This constructs a default grid with interval of 1 in x and y
//that draws axis lines, grid lines, label numbers in the axis for each grid line
//and that automatically changes the interval when the scale of the coordinate system changes
Grid grid = new Grid();

//This changes the grid to have more properties different than the default ones
grid.setInterval(1.0, 2.0);
grid.setShowAxisLabels(true); //Show labels in the axis (true by default anyway)
grid.setShowGridLabels(true); //Show labels in the grid
grid.setAutoAdjustLabels(false); //Don't adjust the grid lines when scaling
grid.setLabelSize(16.0f); //Make the labels BIG
grid.setLabelXAxis("X axis"); //Label to show in the X axis
grid.setShowGridLines(false); //Don't show the grid lines
grid.setUseBufferedImage(false); //Don't use double buffering

SingleAxisGrid (org.concord.graph.ui.SingleAxisGrid)

This is a grid that works for one single axis (x axis or y axis only, for example). This allows to have the properties for each axis separately. It has axis, major and minor lines, labels in the minor or major lines and axis labels. All these are optional, by default are turned on but can be turned off. Colors can be set separately for axis lines, minor and major grid lines and labels. Also, the width of the grid and axis lines can be set separately. This grid also optionally changes automatically the interval when the scale of the coordinate system changes (true by default).

These are the properties that can be set:

This is an example of how to create a single grid for the Y axis, with horizontal grid lines:

//This creates a default single axis grid for the y axis
SingleAxisGrid yGrid = new SingleAxisGrid(2); //2 indicates Y axis

//Special properties
yGrid.setColorAxisLines(Color.black); //Axis will be black
yGrid.setColorMajorGridLines(Color.blue); //Major lines in blue
yGrid.setColorMinorGridLines(Color.cyan); //Minor lines in cyan
yGrid.setMajorInterval(5); //Every 5 minor lines there will be a minor line
yGrid.setShowLabelsOnMajorOnly(true)
yGrid.setAxisLabel("LABEL FOR Y"); //Label
yGrid.setColorAxisLabel(Color.red);
yGrid.setAxisLabelSize(20.0f); //Make the axis label BIG

For more information, see the SingleAxisGrid java docs

For an example, see the Single Axis Grid / Grid 2D axis modes example

Grid2D (org.concord.graph.ui.Grid2D)

The Grid2D is a grid that basically has 2 SingleAxisGrid objects, for the x and y axis. In order to set up the properties for each, you can use the getXGrid() and getYGrid() method, and this will give you a SingleAxisGrid object.

Example:

Grid2D grid = new Grid2D();
grid.getXAxisGrid().setColorGridLines(Color.green); //This changes the color of both the minor and major grid lines of the x axis

For more information, see the Grid2D java docs

Adding the grid object on the background of the Graph Window

Since the Grid is a Graphable object, it can be added normally to a Graph Window with the add() method, but normally, if you want the grid to stay always on the background, you can use the addDecoration() method on the Graph Window:

graph.addDecoration(grid);

Setting up the Graph Area and Coordinate System for the Graph Window

The Graph Window always creates a default Graph Area and a Default Coordinate system. The default Graph Area takes up the whole screen. The default coordinate system is a DefaultCoordinateSystem2D object.

You can change the default Graph Area of the Graph Window with the setDefaultGraphArea() method. What this means is that all the Drawable objects added to the Graph Window that don't have a graph area associated with it, will be added to this default graph area. To change the properties of a GraphArea you can call the getDefaultGraphArea() method. The GraphArea class has some useful methods to position itself in the Graph Window, or to position the Coordinate System in the Graph Area. For example, you can set the origin of the coordinate system in the middle of the graph area, so no matter how the graph area (or window) is resized, the origin will always be in the center. Another example, you can set the graph area to always take the whole window, no matter how the Graph Window is resized, the Graph Area resizes with it. Or you can set the Graph Area to have a fixed size and not change, or to be always in the upper right corner, etc.

GraphArea ga = graph.getDefaultGraphArea();
ga.setXCentered(); //This ensures the origin of the coordinate system will be centered horizontally

The default Coordinate System of the Graph Window is the coordinate system property of the default Graph Area. You can use getDefaultGraphArea().getCoordinateSystem() to access it. You can then change the properties of the coordinate system with the setScale() and setOriginOffset() methods.

To change the default coordinate system of the Graph Window, you can create a new GraphArea with the specified Coordinate System, and then change the default Graph Area.

//Changing the scale and origin
CoordinateSystem coord = graph.getDefaultGraphArea().getCoordinateSystem();
coord.setScale(new Point2D.Double(30.0, 30.0)); //1 unit every 30 pixels, both horizontally and vertically
coord.setOriginOffset(new Point2D.Double(100.0, 100.0)); //The origin will be in the position (100,100) on the screen, relative to the upper left corner

For more information on Coordinate Systems, see How to write objects to graph on a Graph Window.

Adding Objects to the Graph Window

To add an object to the Graph Window, this object has to be a Drawable, a Graphable or a GraphableList.

Drawable and Graphable objects are objects than can be drawn in a GraphWindow. The order used to add objects to the Graph Window will be the order used to draw them on the screen. This is, the first object that you add to the Graph Window will be the first object that will be drawn.

//Adding an object to the Graph Window
Drawable obj = new ImplementationOfGraphable();
graph.add(obj);

For more information on how to implement your own Drawable or Graphable class, see How to write objects to graph on a Graph Window.

You can also add a GraphableList to the GraphWindow. This allows you to do layering within the GraphWindow. Each layer is represented by a GraphableList that contains Graphables.

This example creates two layers in the Graph Window. Initially, the first layer has 2 objects and the second layer has 3. Since the first layer was added to the Graph Window first, it will be drawn first. If you add new objects to the Graph Window later, they will be added last. But if you want to add an object to the first layer, but you can easily do it with the GraphableList.

//Creating Graphable Lists to implement 2 layers
GraphableList firstLayer = new GraphableList();
GraphableList secondLayer = new GraphableList();

Drawable obj;
obj = new ImplementationOfGraphable();
firstLayer.add(obj);
obj = new ImplementationOfGraphable();
firstLayer.add(obj);

obj = new ImplementationOfGraphable();
secondLayer.add(obj);
obj = new ImplementationOfGraphable();
secondLayer.add(obj);
obj = new ImplementationOfGraphable();
secondLayer.add(obj);

graph.add(firstLayer);
graph.add(secondLayer);

For more information on how to use Lists to make layers in a Graph window, see Details about layering with Lists on a Graph Window.

Using a custom Mouse Manager or Draw Manager

The Graph Window uses a Default Mouse Manager and a Default Draw Manager. For more information on how do these default implementations work, see Details about Default Mouse and Draw Managers.

You can write a class that implements the GraphMouseManager interface and use it in a Graph Window with the setMouseManager() method. If you don't intend to handle user interaction with the mouse, it will be a good idea to get rid of the Mouse Manager in your Graph Window, to improve performance.

graph.setMouseManager(null);