# Graphs and framerate?
**URL:** https://discourse.processing.org/t/graphs-and-framerate/36141
**Category:** Coding Questions
**Created:** [April 5, 2022, 5:18pm UTC](https://discourse.processing.org/t/graphs-and-framerate/36141 "2022-04-05T17:18:42Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@king\_B99](https://discourse.processing.org/u/king_B99)
#### Post date: [April 5, 2022, 5:18pm UTC](https://discourse.processing.org/t/graphs-and-framerate/36141/1 "2022-04-05T17:18:42Z")
How can I make a graph that plots my frame rate?
I have the code to make it print on screen but I want to make it into a graph.
---
### Author:  [@Flolo](https://discourse.processing.org/u/Flolo)
#### Post date: [April 5, 2022, 8:00pm UTC](https://discourse.processing.org/t/graphs-and-framerate/36141/2 "2022-04-05T20:00:08Z")
Hey does this help?
```auto
FrameRateGraph graph;
void setup() {
size(600, 600);
graph = new FrameRateGraph(600, 600, 200);
}
void draw() {
println(frameRate);
graph.update();
image(graph.canvas, 0, 0);
}
```
```auto
class FrameRateGraph {
ArrayList values;
float maxFrameRate = 60;
PGraphics canvas;
FrameRateGraph(int w, int h) {
canvas = createGraphics(w, h);
frameRate(maxFrameRate);
values = new ArrayList();
}
FrameRateGraph(int w, int h, int f) {
canvas = createGraphics(w, h);
maxFrameRate = f;
frameRate(maxFrameRate);
values = new ArrayList();
}
void update() {
updateFrameRate();
updateCanvas();
}
void updateFrameRate() {
values.add(frameRate);
if (values.size() > 100) {
values.remove(0);
}
}
void updateCanvas() {
canvas.beginDraw();
canvas.stroke(255);
canvas.background(0);
if (values.size() == 0) return;
float size = float(width) / values.size();
canvas.strokeWeight(size);
canvas.beginShape();
canvas.vertex(0, height);
for (int i = 0; i < values.size(); i++) {
float x = (i+1) * size;
float y = map(values.get(i), 0, maxFrameRate, 0, height);
canvas.vertex(x, height-y);
}
canvas.vertex(width, height);
canvas.endShape();
canvas.endDraw();
}
}
```