Grafica Library - Plot with two vertical axis

PetePT

Good afternoon,

After developing an interface and a set of plots, I now need to plot a graph with two vertical axis, one at right and the other at left. Basically, points with one x and two y. I'm using the grafica library. My thought was to build two plots, each with the same x and two different sets of y values. I was thinking of drawing the plots on top of each other and enabling the right axis on one of them. Unfortunately, I've only been able to display the vertical line of the axis, not the values of it. I've looked into the GAxis and GPlot classes. Both mention the right axis but the GAxis seems to address its representation. I've noticed, tough, that the GAxis class refers to the PApplet itselft...I'm puzzled and can't seem to figure out the solution to my problem. Can someone help?

Thank you in advance!

quark

I suggest you send a PM to the library author @jagracar as he is the one most likely have the knowledge to help.

jagracar

Hi PetePT and quark,

I just made this example to show how you can have two different y axes in your plot. It's basically using your trick.

import grafica.*;

GPlot plot1, plot2;

void setup() {
  size(340, 300);

  // Create the first plot
  plot1 = new GPlot(this);
  plot1.setPos(0, 0);
  plot1.setMar(60, 70, 40, 70);
  plot1.setDim(200, 200);
  plot1.setAxesOffset(4);
  plot1.setTicksLength(4);

  // Create the second plot with the same dimensions
  plot2 = new GPlot(this);
  plot2.setPos(plot1.getPos());
  plot2.setMar(plot1.getMar());
  plot2.setDim(plot1.getDim());
  plot2.setAxesOffset(4);
  plot2.setTicksLength(4);

  // Prepare the points
  int nPoints = 50;
  GPointsArray points = new GPointsArray(nPoints);

  for (int i = 0; i < nPoints; i++) {
    points.add(i, 30 + 10*noise(i*0.1));
  }  

  // Set the points, the title and the axis labels
  plot1.setPoints(points);
  plot1.setTitleText("Temperature");
  plot1.getYAxis().setAxisLabelText("T (Celsius)");
  plot1.getXAxis().setAxisLabelText("Time (minutes)");

  plot2.getRightAxis().setAxisLabelText("T (Kelvin)");

  // Make the right axis of the second plot visible
  plot2.getRightAxis().setDrawTickLabels(true);

  // Activate the panning (only for the first plot)
  plot1.activatePanning();
}

void draw() {
  background(255);

  // Draw the first plot
  plot1.beginDraw();
  plot1.drawBox();
  plot1.drawXAxis();
  plot1.drawYAxis();
  plot1.drawTitle();
  plot1.drawPoints();
  plot1.drawLines();
  plot1.endDraw();

  // Change the second plot vertical scale from Celsius to Kelvin
  plot2.setYLim(celsiusToKelvin(plot1.getYLim()));

  // Draw only the right axis
  plot2.beginDraw();
  plot2.drawRightAxis();
  plot2.endDraw();
}

//
// Transforms from degree Celsius to degree Kelvin
//
float[] celsiusToKelvin(float[] celsius){
  float[] kelvin = new float[celsius.length];

  for(int i = 0; i < celsius.length; i++){
    kelvin[i] = 273.15 + celsius[i];
  }

  return kelvin;
}

Let me know if that solves your problem :)

Thank you for using the library! javier