Quantcast
Channel: Library Questions - Processing 2.x and 3.x Forum
Viewing all articles
Browse latest Browse all 2896

Trying to Visualize Breath as a Line Graph

$
0
0

Hi all, I'm a noob.

I've got some JSON data from a device I wear that measures breathing. The file I reference in the code below is here.

And I've copied and pasted various bits of code from the Processing reference docs and also other sites to get to where I am now, which is code that parses the JSON and plots it on a graph, but right now it's only plotting one point. I know it's because I'm copying and pasting without really realizing the cause and effect, but I do believe I've actually learned a thing or two with that strategy over the last couple of days.

I've got a long way to go... like figuring out how to convert from Unix epoch to regular time, how to animate the line so it looks sorta like this EKG code, and how to only query the data for 24 hours at a time, etc. etc., but right now I'm just trying to figure out why I don't have a whole buncha dots plotted in that tiny space. Help?

// Importing Drawing Library from http://www.gicentre.net/utils/chart
import org.gicentre.utils.stat.*;

JSONObject json;
XYChart lineChart;

void setup() {
  size(500, 200);
  textFont(createFont("Arial", 10), 10);

  json = loadJSONObject("bigdata.json");

  JSONArray data = json.getJSONArray("data");

  for (int i = 0; i < data.size(); i++) {

    JSONObject item = data.getJSONObject(i);

    int timestamp = item.getInt("timestamp");
    float value = item.getFloat("value");
    String event_type = item.getString("event_type");

    //println(timestamp + ", " + value + ", " + event_type);

    // Both x and y data set here.
    lineChart = new XYChart(this);
    lineChart.setData(new float[] {timestamp},
      new float[] {value});

    // Axis formatting and labels.
    lineChart.showXAxis(true);
    lineChart.showYAxis(true);
    lineChart.setMinY(0);

    lineChart.setYFormat("00.00");  // Breath Rate
    lineChart.setXFormat("0000000000"); // EPOCH Timestamp Format

    // Symbol colours
    lineChart.setPointColour(color(180, 50, 50, 100));
    lineChart.setPointSize(5);
    lineChart.setLineWidth(2);
  }
}

void draw()
{
  background(255);
  textSize(9);
  lineChart.draw(15, 15, width-30, height-30);

  // Draw a title over the top of the chart.
  fill(120);
  textSize(20);
  text("Breath-rate", 70, 30);
  textSize(11);
  text(" Since Wearing Spire",
    70, 45);
}

Viewing all articles
Browse latest Browse all 2896

Trending Articles