ControlP5 Chart Direction and Scale

wrightjmf

ControlP5 Chart Direction and Scale

in Contributed Library Questions • 1 year ago

I'm collecting real-time data and displaying it on a ControlP5 line chart. There are a couple of things that I haven't figured out how to do.

1. Reverse the direction of the chart. By default values are added at the left and are pushed to the right as new data comes in. That means that your oldest value (time 0 when recording real-time data) is to the right instead of the left. I would like to reverse this so that the oldest (first) values end up on the left and the newest on the right.

2. I would like to add a scale to both the X and Y axes. I haven't found a way to do this except by drawing the scales manually.

I'm new to Processing. Is there a better library than ControlP5 for charting like this while still having the other controls available?

Thanks,

Jeremy

Replies(3)

andreas.s..

Re: ControlP5 Chart Direction and Scale

1 year ago

Hi, there is no method that inserts data at the right side of the chart, but good point. The following lets you add data from the right. There is currently no scale implemented, you would need to continue adding it manually, you could use textlabels for that.

import controlP5.*;
ControlP5 cp5;
Chart myChart;
void setup() {
size(400, 700);
frameRate(50);
smooth();
cp5 = new ControlP5(this);
cp5.printPublicMethodsFor(Chart.class);
myChart = cp5.addChart("hello")
.setPosition(50, 50)
.setSize(200, 200)
.setRange(-20, 20)
.setView(Chart.LINE) // use Chart.LINE, Chart.PIE, Chart.AREA, Chart.BAR_CENTERED
;
myChart.getColor().setBackground(color(255, 100));
myChart.addDataSet("world");
myChart.setColors("world", color(255));
myChart.setData("world", new float[10]);
myChart.setStrokeWeight(1.5);
}
void draw() {
background(0);
// add data on the right side of the chart
myChart.addData("world",sin(frameCount*0.1)*10);
// if the dataSet has more than the required data entries, delete the first one on the left
if(myChart.getDataSet("world").size()>10) {
myChart.removeData("world",0);
}
}

wrightjmf

Re: ControlP5 Chart Direction and Scale

1 year ago

Thanks Andreas. I'll try this out.

Jeremy

wrightjmf

Re: ControlP5 Chart Direction and Scale

1 year ago

Thanks Andreas. I tried your method out and the chart now runs from right to left. I'll tackle the scale next.

Top Reply