Log Data and Plot a Graph Online Using NodeMCU, MySQL, PHP and Chartjs.org

This Instructable describes how we can use the Node MCU board to collect data from multiple sensors, send this data to a hosted PHP file which then adds the data to a MySQL database. The data can then be viewed online as a graph, using chart.js.

A basic knowledge of PHP and MySQL will be required for this project and you will need access to web hosting with these set up to be able to create and view your own graphs. I'm also assuming you have basic knowledge of using the Node MCU board and uploading sketches to it. (I use the Arduino IDE for this)

Step 1: Building the Circuit

As the Node MCU has only one analogue pin we will use multiplexing to be able to read data from multiple sensors. (A number of instructables cover this concept in more detail so I won't go into that here). In this example I have used two sensors (for light and temperature) but you can change these to whatever you want and add more sensors if required. I have use a light sensitive resistor, a thermistor, two rectifying diodes, a 330 ohm resistor and a 10K resistor and a few jumper wires. The attached Fritzing diagram shows how these are all connected on the breadboard.

Step 2: Edit and Upload the Sketch to Node MCU

Use this attached .ino file. You will need to edit this with your own WiFi network name and password so that the Node MCU can connect to your own network.

At the bottom of this sketch the line 'delay(60000);' gives a minute delay between sensor readings but this can be adjusted to suit your own requirements. I would recommend leaving at least 10 seconds to allow for connection to the 'updater.php' file each time though.

You will also have to edit the path to where you will be hosting the two .php files and the two javascript files which are required. You can download these in the next step.

Step 3: Database and Web Files

Create your MySql databse. Create a table called 'temp_light' (you can change this but will need to edit the two php files to reflect any changes you make). Give the table four fields. A primary auto increment field. An integer field called 'temp', an integer field called 'light' and a field called 'date_time' which will be a timestamp and default value 'CURRENT_TIMESTAMP'

Now download the attached .zip file and unpack it. This will give you two php files and a folder called 'scripts' which contains to .js files which I got from chartjs.org . The two .js files do not need to be edited and the 'scripts' folder should be hosted in the same location as your two php files. the two php files will both need to be edited with your own databse name, password and host I.P. address.

In the index.php file you will see line 50: $adjusted_temp=($temp*0.0623);

This calculation is to convert the reading for temperature to as near as I could get degrees centigrade and was arrived at by trial and error and will almost certainly have to be altered to suit your own temperature sensor.

Now host both php files and the 'scripts' folder containing the two .js files all together in the same directory. Browse to that directory and you should see your own graph with the data sent from your Node MCU board.

Step 4: The Finished Result

I originally made this project around two years ago but had never gotten round to writing an instructable for it until now. You can see the graph created by my test here: http://www.smartmultimedia.co.uk/z_nodemcu/

The large spike in the graph is where the sun shone through the window onto the two sensors and the slow decline again was as the sun slowly went out of view.