Scrolling line graph


#1

Hi everyone! 

I've been a long time reader of the forum, but every question I've had up till this point has been answered somewhere, apart from this, so I thought it was about time I joined:)

 

I need to create a scrolling line graph, which scrolls right to left and updates itself every second, much like a network traffic Tx/Rx graph does (in fact this is what I am trying to recreate). 

I have a Timer callback, and am creating a path, but I can't work out how to manipulate the path so that peaks are added on the right and scroll across the screen.

 

Sorry for being vague, i'm at a loss, so any pointers would be greatly appreciated!

Thanks in advance:)


#2

Hi Guys, 

Figured it out on my own after a couple of hours. Any suggestions for refinements would be appreciated:)

 

 //Transmit Line Graph

//Add new value to array 

    if(TxValue != TlineYCoordinates[TlineYCoordinates.size()-1]){
        TlineYCoordinates.add(TxValue);
        TlineXCoordinates.add(getWidth());
    }

    txPath.clear();
    txPath.startNewSubPath(getWidth(), TmidY-TxValue);

//Draw line to next value change
    for(int i = TlineYCoordinates.size()-1; i >= 0; i--)
        txPath.lineTo(TlineXCoordinates[i] ,TmidY - TlineYCoordinates[i]);

    txPath.lineTo (lineEndX, TmidY); 
    txPath.lineTo (0, TmidY); 

// Increment X values by 10 pixels

    for (int i2 = 0; i2 < TlineXCoordinates.size(); i2++) 
    {
        TlineXCoordinates.set(i2, TlineXCoordinates[i2]-10);

        if(TlineXCoordinates[i2]-10 < -10)
        {
            TlineXCoordinates.remove(i2);
            TlineYCoordinates.remove(i2);
        }
    }