xyplot

Plotting a 2D sine graph

This page will show a step by step example on the basic usage of GRAL. What we want to achieve is small line plot that looks like this:

Before we begin

Before we can plot something, we have to decide how we want to output it: on the screen or to a file. For this example we'll use a simple Swing frame to display our plot on the screen:

import javax.swing.JFrame;

public class LinePlotTest extends JFrame {
    public LinePlotTest() {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        // Insert rest of the code here
    }

    public static void main(String[] args) {
        LinePlotTest frame = new LinePlotTest();
        frame.setVisible(true);
    }
}

How do I feed GRAL with data?

First, we need data that our plot should display. All plots in GRAL need an instance of de.erichseifert.gral.data.DataSource as input. GRAL can import data from various sources like plain text files, or also images or audio files. However, for now we create the data by hand. A basic implementation of DataSource that allows to create data by hand is de.erichseifert.gral.data.DataTable:

...
DataTable data = new DataTable(Double.class, Double.class);
for (double x = -5.0; x <= 5.0; x+=0.25) {
    double y = 5.0*Math.sin(x);
    data.add(x, y);
}
...

Which plot do i have to create?

Next, we have to create a line plot. In GRAL a 2D line plot is created as a x-y plot with a special styling. So we have create a x-y plot first (de.erichseifert.gral.plots.XYPlot) and tell it which data it should display:

...
XYPlot plot = new XYPlot(data);
...

How do I display it?

The plot has to be shown in our frame. To achieve this, we simply add the plot to our frame by wrapping it in an de.erichseifert.gral.ui.InteractivePanel instance, a ready-to-use Swing component provided by GRAL:

...
getContentPane().add(new InteractivePanel(plot));
...

This is the first time we can run our application. We should see something like this:

The InteractivePanel allows you to use the mouse wheel to zoom in and out and the left mouse button to move the plot. It also provides a context menu where you can reset the view or export the current plot area to a file.

How can i make it look better?

As mentioned at the beginning, we want a line plot, so we have to change the appearance of out plot. To show connecting lines on our data we have to use a line renderer (de.erichseifert.gral.plots.lines.LineRenderer) and we can use a very basic renderer (de.erichseifert.gral.plots.lines.DefaultLineRenderer2D):

...
LineRenderer lines = new DefaultLineRenderer2D();
plot.setLineRenderers(data, lines);
...

Finally, to make the plot more beautiful we change the color of all points and lines:

...
Color color = new Color(0.0f, 0.3f, 1.0f);
plot.getPointRenderers(data).get(0).setColor(color);
plot.getLineRenderers(data).get(0).setColor(color);
...

So this is the final code of our small example:

import java.awt.Color;
import javax.swing.JFrame;
import de.erichseifert.gral.data.DataTable;
import de.erichseifert.gral.plots.XYPlot;
import de.erichseifert.gral.plots.lines.DefaultLineRenderer2D;
import de.erichseifert.gral.plots.lines.LineRenderer;
import de.erichseifert.gral.plots.points.PointRenderer;
import de.erichseifert.gral.ui.InteractivePanel;

public class LinePlotTest extends JFrame {
    public LinePlotTest() {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(600, 400);

        DataTable data = new DataTable(Double.class, Double.class);
        for (double x = -5.0; x <= 5.0; x+=0.25) {
            double y = 5.0*Math.sin(x);
            data.add(x, y);
        }
        XYPlot plot = new XYPlot(data);
        getContentPane().add(new InteractivePanel(plot));
        LineRenderer lines = new DefaultLineRenderer2D();
        plot.setLineRenderers(data, lines);
        Color color = new Color(0.0f, 0.3f, 1.0f);
        plot.getPointRenderers(data).get(0).setColor(color);
        plot.getLineRenderers(data).get(0).setColor(color);
    }

    public static void main(String[] args) {
        LinePlotTest frame = new LinePlotTest();
        frame.setVisible(true);
    }
}

How can I use this with my data?

To adjust this example to other data only the data source data has to be changed. You can populate it with your own values. You can do this manually by using the data.add() method of DataTable or you can use one of the built-in classes to import data from external sources. If you want to import data from a file with tab separated values you could use the following code:

DataReader reader = DataReaderFactory.getInstance().get("text/tab-separated-values");
data = reader.read(new FileInputStream(filename), Double.class, Double.class);

After you have prepared your data and look at your plot you will see that GRAL automatically chose the number of tick marks along each axis. If it doesn't suit your need you can also set the spacing manually:

// Draw a tick mark and a grid line every 10 units along x axis
plot.getAxisRenderer(XYPlot.AXIS_X).setTickSpacing(10.0);
// Draw a tick mark and a grid line every 20 units along y axis
plot.getAxisRenderer(XYPlot.AXIS_Y).setTickSpacing(20.0);

Be aware however that the spacing won't be adjusted anymore when you zoom in and out.

What more?

This is just a very basic example and there are many things you can change on your plot. This may include having different axis scalings—maybe even a logarithmic axis—a legend, or add color gradients, change line widths, change the shape and size of the points, and much more. If GRAL doesn't fully suit your needs you could also create your own renderers or plot types.

I hope you got a small impression how easy it is to create plots using GRAL. For more examples see the small applications that are delivered with the gral-examples package or read the documentation.