0

I am attempting to make a live updating line chart similar to how an ecg or other monitors work. I've got a nice line getting drawn. It steps by 3 from left to right as new numbers are added.

The problem I'm having right now is to have it scroll to the right. After much research I'm still at a dead end.

Can I make the canvas scroll? Do I need to have all points in a point pair list of some sort? I've tried using an XYChart.Series (point pair), but was having trouble looping through it to change and update.

I can't really figure out how to get the lines that I've create in each graph as object that I can move or manipulate. I'm assuming that would be the best method instead of redrawing the canvas each time new data is added.

Here is my graph class.

public class Graph {
public Double accval;
public Double sndval;
public Double litval;
public boolean accAlive = false;
public boolean sndAlive = false;
public boolean litAlive = false;
public Canvas accCanvas;
public Canvas sndCanvas;
public Canvas litCanvas;
public GraphicsContext accGFXContext;
public GraphicsContext sndGFXContext;
public GraphicsContext litGFXContext;
public int accPrevX = 3;
public int sndPrevX = 3;
public int litPrevX = 3;
public Double accPrevY;
public Double sndPrevY;
public Double litPrevY;
public Group accgroup;
public Group sndgroup;
public Group litgroup;

public Canvas creategraph(Canvas canvas, String type){
    if (type.contains("acc")){accAlive = true; accCanvas = canvas; accgroup = new Group(); accGFXContext = accCanvas.getGraphicsContext2D(); return accCanvas;}
    if (type.contains("snd")){sndAlive = true; sndCanvas = canvas; sndgroup = new Group(); sndGFXContext = sndCanvas.getGraphicsContext2D(); return sndCanvas;}
    if (type.contains("lit")){litAlive = true; litCanvas = canvas; litgroup = new Group(); litGFXContext = litCanvas.getGraphicsContext2D(); return litCanvas;}
    return null;
}

public void addData(String type, Double data){
    if (type.contains("acc")){this.accval = data; draw("acc");}
    if (type.contains("snd")){this.sndval = data; draw("snd");}
    if (type.contains("lit")){this.litval = data; draw("lit");}
}

public void draw(String type){
    GraphicsContext gc = null;
    Double val = null;
    Double prevVal = null;
    int x = 0;

    if (type.contains("acc")){gc = accGFXContext; x = accPrevX; val = accval; if(accPrevY == null){accPrevY = accval;} prevVal = accPrevY;}
    if (type.contains("snd")){gc = sndGFXContext; x = sndPrevX; val = sndval; if(sndPrevY == null){sndPrevY = sndval;} prevVal = sndPrevY;}
    if (type.contains("lit")){gc = litGFXContext; x = litPrevX; val = litval; if(litPrevY == null){litPrevY = litval;} prevVal = litPrevY;}
    if (gc != null && val != null){

        gc.setLineWidth(1);
        gc.beginPath();
        gc.setStroke(Color.GREEN);
        gc.moveTo(x, prevVal);
        x+=2;
        gc.lineTo(x, val);
        gc.stroke();

        if (type.contains("acc")){accPrevY = val; accPrevX = x;}
        if (type.contains("snd")){sndPrevY = val; sndPrevX = x;}
        if (type.contains("lit")){litPrevY = val; litPrevX = x;}
    }

}

}

Here is my controller.

public class GUI implements Initializable{

private int currentval = 0;
public Graph graph;
Random rand;


@FXML
Canvas accCanvas;
@FXML
Canvas sndCanvas;
@FXML
Canvas litCanvas;


@Override
public void initialize(URL location, ResourceBundle resources) {
    rand = new Random();
    creategraph();
}

public void creategraph(){
    graph = new Graph();
    accCanvas = graph.creategraph(accCanvas, "acc");
    sndCanvas = graph.creategraph(sndCanvas, "snd");
    litCanvas = graph.creategraph(litCanvas, "lit");
    startgraphing();
}

public void updatenumber(){
    currentval = rand.nextInt(50) + 1;
}

public void startgraphing(){
    Runnable timerRunnable = new Runnable() {
        public void run() {
            updatenumber();
            System.out.println("Current Value: " + currentval);
            graph.addData("acc", (double) currentval);
            graph.addData("snd", (double) currentval);
            graph.addData("lit", (double) currentval);
        }
    };
    ScheduledExecutorService executor = Executors.newScheduledThreadPool(1);
    executor.scheduleAtFixedRate(timerRunnable, 0, 50, TimeUnit.MILLISECONDS);
    timerRunnable.run();
}

}

Not really looking for handouts. Just looking for ideas on how to move forward.

Redracer68
  • 958
  • 1
  • 7
  • 12
  • Do you need the historical data in the graph, i.e does it have to scroll? – MiiinimalLogic Jan 22 '17 at 00:20
  • Nope, once the data is out of view to the left it can be destroyed. This is just a display for information. Not something to really use. – Redracer68 Jan 22 '17 at 00:37
  • 1
    So update the old data with the new..FIFO style! – MiiinimalLogic Jan 22 '17 at 00:41
  • I'm sorry I though you meant did I want to be able to scroll back and see the old data. It does need to scroll from right to left. And if the data reaches the far left it can be destroyed. Similar to this. https://www.youtube.com/watch?v=psog7W52IQQ – Redracer68 Jan 22 '17 at 00:44

0 Answers0