Plot date using Grafica in Processing

Processing Libraries
1

Hello, I have a csv that I have created in processing. Now I want the user to be able to create a graph from these data using the date as the x-axis, and other data on the y-axis. Here is a snippet of the csv.

‘Time BattV PanelV Distance AirTemp WaterTemp
|7/24/2018 18:45|12.676302|12.683285|1182|27.899666|27.673334|
|7/24/2018 19:00|12.67989|12.683285|1183|27.029999|26.269167|
|7/24/2018 19:30|12.600195|12.609971|1174|25.592669|25.11875|
|7/24/2018 19:45|12.575471|12.583228|1154|25.173077|24.984615|
|7/24/2018 20:00|12.540969|12.545587|1136|23.716923|24.715384|
|7/24/2018 20:15|12.5047|12.506225|1125|21.755283|24.449245|
|7/24/2018 20:30|12.469093|12.470392|1131|20.841732|24.058462|
|7/24/2018 21:15|12.419421|12.417815|1131|19.513422|23.304028|
|7/24/2018 22:00|12.370555|12.366774|1111|18.350616|22.573235|
|7/24/2018 22:30|12.327514|12.327033|1106|17.415123|21.848293|
|7/24/2018 22:45|12.316715|12.314272|1103|17.111|21.534286|
|7/24/2018 23:00|12.304075|12.294569|1103|17.124193|21.360666|
|7/24/2018 23:15|12.289223|12.285613|1103|16.899445|21.13|
|7/24/2018 23:30|12.279571|12.273949|1102|16.754349|20.945|
|7/24/2018 23:45|12.268817|12.2669|1103|16.593636|20.727499|
|7/25/2018 0:15|12.255621|12.248666|1101|16.70619|20.429836|
|7/25/2018 0:45|12.236419|12.234369|1100|16.63255|20.123138|
|7/25/2018 1:00|12.224908|12.218964|1099|16.089025|19.889473|
|7/25/2018 1:15|12.218964|12.212358|1099|15.820263|19.713333|
|7/25/2018 1:45|12.201368|12.189454|1098|15.4225|19.5174|’

Now using the grafica library, I have seen that they parse everything into month date year, but I already have the date and time in the first column. When trying to .add(time) into the array, it returns all nan’s. I have tried string and float but am lost now. Is there another way to plot the date on the x axis with data on the y? Thank you.


import grafica.*;

//String[] monthNames = new String[] {"January", "February", "March", "April", "May", "June", "July", 
//                                     "August", "September", "October", "November", "December"};
//int[] daysPerMonth = new int[] {31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};
//int[] daysPerMonthLeapYear = new int[] {31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};

GPlot plot;

void setup() {
  size(800, 410);

  // Load the Oktoberfest vs. Bundestagswahl (German elections day) Google 
  // search history file (obtained from the Google trends page). 
  // The csv file has the following format: 
  // year,month,day,oktoberfest,bundestagswahl
  // 2004,0,1,5,1
  // ...
  String wd = "C:/Users/Crisp/Desktop/Ranch/Projects/Stream_Gages/Pioneer_Stream_Gage/Data/";
  String fileName = "Pioneer_Canal_Data.csv";
  Table table = loadTable(wd+fileName, "header");
  
  
  table.setColumnType("Time", Table.FLOAT);
  table.setColumnType("BattV", Table.FLOAT);
  table.setColumnType("PanelV", Table.FLOAT);
  table.setColumnType("Distance", Table.INT);
  table.setColumnType("AirTemp", Table.FLOAT);
  table.setColumnType("WaterTemp", Table.FLOAT);

  // Save the data in two GPointsArrays
    GPointsArray pointsPioneer = new GPointsArray();
  //GPointsArray pointsOktoberfest = new GPointsArray();
  //GPointsArray pointsElections = new GPointsArray();

  for (int row = 0; row < table.getRowCount(); row++) {

    float timePlot = table.getFloat(row, "Time");
    float battPlot = table.getFloat(row, "BattV");
    float panelPlot = table.getFloat(row, "PanelV");
    int distancePlot = table.getInt(row, "Distance");
    float airTPlot = table.getFloat(row, "AirTemp");
    float waterTPlot = table.getFloat(row, "WaterTemp");

    //int oktoberfestCount = table.getInt(row, "oktoberfest");

    pointsPioneer.add(timePlot,battPlot);
    println(timePlot);

    //pointsPioneer.add(timePlot, battPlot, panelPlot, distancePlot, airTPlot, waterTPlot); //, oktoberfestCount, monthNames[month]);
  }

  // Create the plot
  plot = new GPlot(this);
  plot.setDim(700, 300);
  plot.setTitleText("batteryV over time");
  plot.getXAxis().setAxisLabelText("Date");
  plot.getYAxis().setAxisLabelText("BatteryV");
  plot.getXAxis().setNTicks(10);
  plot.setPoints(pointsPioneer);
  plot.setLineColor(color(100, 100, 100));
  //plot.addLayer("German elections day", pointsElections);
  //plot.getLayer("German elections day").setLineColor(color(255, 100, 255));
  plot.activatePointLabels();
}

void draw() {
  background(255);

  // Draw the plot  
  plot.beginDraw();
  plot.drawBox();
  plot.drawXAxis();
  plot.drawYAxis();
  plot.drawTitle();
  plot.drawGridLines(GPlot.VERTICAL);
  plot.drawFilledContours(GPlot.HORIZONTAL, 0);
  //plot.drawLegend(new String[] {"Oktoberfest", "Bundestagswahl"}, new float[] {0.07, 0.22}, 
  //                new float[] {0.92, 0.92});
  plot.drawLabels();
  plot.endDraw();
}  


// Not really the exact date, but it's ok for this example
/*
float getExactDate(int year, int month, int day) {
  boolean leapYear = false;

  if (year % 400 == 0) {
    leapYear = true;
  }
  else if (year % 100 == 0) {
    leapYear = false;
  }
  else if (year % 4 == 0) {
    leapYear = true;
  }

  if (leapYear) {
    return year + (month + (day - 1f)/daysPerMonthLeapYear[month])/12f;
  }
  else {
    return year + (month + (day - 1f)/daysPerMonth[month])/12f;
  }
}
*/
2

I changed

table.setColumnType("Time", Table.FLOAT);
//and
float timePlot = table.getFloat(row, "Time");

to Strings. Now I can get the date, but I can’t plot it. Also, how can I just extract say the day from this entire string?

3

how can I just extract say the day from this entire string?

Try the java.text.DateFormat class, which can take a string and convert it into a java.util.Date object. I’m not an expert, but it’s a good place to start. In the future, it’s also good to be able to break down your problem and ask more specific questions of the internet, such as “How do I convert a String to a Date?”.

Ultimately, it’s good to remember that you’re not alone in your strugges - thousands of students before you have asked the same questions. And this is a great thing, because more often than not, someone has already answered your question! It just takes a little googling (and a ton of StackOverflow)

2 Likes