Project tutorial # TFT Graphing: Live History Graphs © GPL3+

Create a history graph that maps temperature values live on a TFT LCD in seconds. Just edit 2 variables and choose your graph's colour.

• 34,861 views
• 78 respects

## Apps and online services

### Overview

Have you ever wanted to graph your data professionally on a TFT LCD? But there is a problem, it is particularly difficult to create a graph because of all the calculations involved.

This project aims to lift all of that stress off your shoulders and allow you to create your own personalised history graph, graphing anything you want in just seconds. All you have to do is edit 5 variables.

Video

Image

### Functionality

This project aims to make graphing easy and fun for everyone, all the hard calculations are completed, all the user has to do is edit 2 variables, and choose the colour for their graph. Here are some examples showing the diversity of the graph.

The graph will plot the temperature live, at intervals of 6 seconds, the value will be displayed by a dot, the dot will be connected to other dots by a line. The seconds that passed since the start of the code will be displayed on the x axis with the range of the values on the y axis.

The project works simply, the Arduino Mega reads the value of the DHT 11 sensor and stores the temperature to a variable, it then graphs the value on the customised graph. Here is a diagram illustrating the functionality overview.

Here is an image showing the project's code overview.

• `Read Temperature` will read the temperature from the sensor
• `Process Data` will process the sensor reading and map it to the graph.
• `Graph Data` will display the mapped values on the graph.

All you have to know to be able to proceed with this project is a broad understanding onto how things are positioned on the TFT LCD, this is explained below.

I refer to the whole LCD as the canvas, this is where everything is drawn, all TFT LCD libraries work quite similarly, so the functions in this code should also work with other libraries. Below is a sketch of a quadrilateral (a rectangle) being drawn on a TFT LCD.

In this sketch, a rectangle is drawn, each point is labelled, the line of code that is used to draw a rectangle is this,

``````tft.fillRect(originX, originY,  sizeX, sizeY, Colour);
``````
• `originX` is represented by 'z' on the diagram above, this is the distance from the right of the screen to the shape.
• `originY` is represented by 'x' on the sketch, this is the distance form the top of the screen to the shape.
• `sizeX` is the size of the shape on the x axis, this is the length of the shape.
• `sizeY` is the size of the shape on the y axis, this is the height of the shape.

### Benefits

The user operating this project will benefit In:

• Graph sensor data on a TFT LCD
• Do so in seconds

### Constructing the Project

Step 1: Required Apparatus

This project is using a DHT 11 temperature and humidity sensor to receive the temperature data, but any sensor can be used, changing the sensor will be explained further down.

• Jumper Wires

Step 2: Connecting the Circuit

Here are the schematics for the project, just attach the DHT 11 sensor to the Arduino Mega and you are good to go.

Step 3: Acknowledging the Code

There are 3 main parts to the code:

• Set Up Graph
• Draw Graph

These sections are explained below.

• Set Up Graph
``````// draw title
tft.setCursor(10, 10); // set the cursor
tft.setTextColor(BLUE); // set the colour of the text
tft.setTextSize(4); // set the size of the text
tft.println(graphName);
// draw outline
tft.drawLine(originX, originY, (originX + sizeX), originY, graphColor);
tft.drawLine(originX, originY, originX, (originY - sizeY), graphColor);
// draw lables
for(int i = 0; i < numberOfMarks; i++)
{
tft.drawLine(mark[i], originY, mark[i], minorSizeY, graphColor);
}
// draw numbers
for(int i = 0; i < 6; i++)
{
tft.drawLine(originX, (originY - number[i]), minorSizeX, (originY - number[i]), graphColor);
}
// draw number values
for(int i = 0; i < 6; i++)
{
tft.setCursor((minorSizeX - 30), (number[i] + numberSize));
tft.setTextColor(graphColor);
tft.setTextSize(1);
tft.println(val[i]);
}
``````

This part of the code will draw the outline of the graph, it will draw the x and y axis lines, it will also draw the marks and will label the y axis with values.

``````chk = DHT.read11(22);
temp = (DHT.temperature);
``````

This short line of code will read the temperature form the DHT 11 sensor and will then store it in a variable.

• Draw Graph
``````if(blockPos < 8)
{
// print the time
tft.setCursor((mark[valuePos] - 5), (originY + 16));
tft.setTextColor(graphColor, WHITE);
tft.setTextSize(1);
tft.println(timeBlock[valuePos]);
// map the value
locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
// draw point
tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// try connecting to previous point
if(valuePos != 0)
{
tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor);
}
blockPos++;
}
else
{
// clear the graph's canvas
tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE);
// map the value - current point
locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
// draw point - current point
tft.fillRect((mark), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
// draw all points
for(int i = 0; i < 8; i++)
{
tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor);
}
// draw all the lines
for(int i = 0; i < 7; i++)
{
tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor);
}
// change time lables
for(int i = 0; i <= 8; i++)
{
tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16));
tft.setTextColor(graphColor, WHITE);
tft.setTextSize(1);
tft.println(timeBlock[valuePos - i]);
}
}
valuePos++;
``````

This long part of code will draw the points of the graph at their values and then will join them through lines, the code checks if the canvas of the graph is filled up, if it is, it will start ejecting the first value of the graph and moving the others up to allow space for the new value to be inserted, if there is still space left, the device will keep adding values at intervals.

Personalising the Graph

The fun thing about this graph is that it is 100% editable, so the user can edit the size of the graph, its location and its colour, the user can also display any data on the graph thanks to its flexibility. Are are all the variables you should care about.

``````bool proDebug = 0;
uint16_t graphColor = BLUE;
uint16_t pointColor = BLACK;
uint16_t lineColor = GREEN;
String graphName = "Time Graph";
int graphRange = 50;
int markSize = 3;
``````
• `proDebug` is the debugging utility built into the project, it is set to 0 as default, when set to 1/true, it will print the current temperature to the Serial Monitor, this is a debugging utility, note that if enabled, the Serial Monitor is required to be open for the code to run.
• `graphColor` sets the colour of the graph, the x and y lines and their labels are set to this colour.
• `pointColour` represents the colour of the point illustrating the value on the graph.
• `lineColour` sets the colour of the line joining the dots on the graph to the colour selected.
• `graphRange` is the backbone of the graph, note that it is really important that it is set correctly, it represents the max value that can be graphed, I am using a temperature sensor, I would not expect the value to exceed 50ºC, so I set the value to 50, if you want to graph a Raw analog input, you can set the graphRange to 1024, the max value that an analog pin can display.
• `markSize` represents the size of the point labelling the value of the sensor on the graph, the value represents the length of the square.

And that is it, it is all that you have to worry about, the remainder of the variables will be figured out automatically by the Arduino.

Changing the Value

It is nice to graph the temperature in your room, but it is even better if you could display any sensor data on the graph, and you can, by just editing a few lines of code, you could graph any data from soil moisture to light intensity. Here is a guide to doing so.

Going Further

You can go further experimenting with the project, try editing the originX, originY, sizeX and sizeY constants to give your graph a different size and position on the screen. There is a header file attached to the main sketch, it contains the colour codes of some colours, try changing the colour of the chart and the bars. And that is it, your personalised graph is ready.

Libraries

• DHT - Author Rob Tillaart this library is in the public domain

### Background

I recently published a project that graphs 1, 2, 3 or 4 values on a bar chart. I have decided to publish another template for graphing. There are no templates for bar charts that don't have lines all over the place threatening to confuse, so I decided to do the math again and publish a simple project that allows everyone to graph their data on a history graph, live.

The whole Code

## Schematics schematics_g5pey3GWqv.fzz

#### TFT Graphing: Bar Charts

Project tutorial by Andrei Florian

• 8,608 views
• 32 respects

#### How to Create a Data Displaying System with a TFT Screen

Project tutorial by MisterBotBreak

• 6,090 views
• 14 respects

#### TFT Graphing: 3D Bar Charts

Project tutorial by Andrei Florian

• 6,646 views
• 26 respects

#### Portable Arduino Temp/Humidity Sensor with LCD

Project tutorial by ThothLoki

• 285,567 views
• 399 respects

#### Easy Motion and Gesture Detection by PIR Sensor & Arduino

Project tutorial by ElectroPeak

• 93,072 views