Create My Own Graphs for My IOT Data on a Raspberry PI

Please read on if you want to be able to create your own IOT graphs using 7 lines of code.

I wanted to create charts to display data in a graphical format from my IOT sensors on a web page. Previously, for this, I had used 3rd party services (some paid) and 3rd party graph functions for my database system - Mysql, using a programming language known as Php. I found these 3rd party services too difficult or too expensive to deploy. Therefore, I have written my own simple Php function which takes data as arrays from a text file or database table (from Mysql perhaps) and displays them as a line graph on a web page. I have made all of the php code available on github - https://github.com/scanos/php-simple-chart . I have also included some of the code here - the first php file - PhpSimpleChart2.php -contains the line graph function file the other , PhpSimpleChart_ex1.php, is an example file showing how to use to it. I suggest that you also visit the github page to get code updates.

I am deploying this on my Raspberry Pi. Here's what you need:

1) Some knowledge on deploying a web server such as Apache, a database such as Mysql, and PHP. Collectively, these are known as LAMP - Linux, Apache, Mysql and PHP. and there is a huge amount of information on the web with regard to deploying these on a Raspberry Pi. Therefore, I won't cover this here.

2) A LAMP linux environment - again, such as Raspberry Pi.

3) A means to upload and create files to your web environment, i.e. the folders on your Raspberry Pi where you deploy your program php files.

Next, I will show you how to create your own Php files using the two php files to which I alluded earlier.

Step 1: The PHP Function Code - PhpSimpleChart2.php

This file is called PhpSimpleChart2.php - you will have to download it from the git repository by clicking the download / clone button - see the image above. Once you have done that, transfer the two php files to your web server using your standard FTP client or perhaps you have set up a samba share on your Raspberry Pi which makes your Pi folders look like windows folders..

You don't really need to change the code in this the main Php file - PhpSimpleChart2.php. This is a simple line chart creation function for Php. Basically, 2 arrays are passed to the function as well as other arguments such as the chart dimensions. The 1st array contains the first raw values such as temperature etc . The second array contains the associated date values. The program tries to autosize the graph depending on the range,min,max and array elements. The resultant chart may be cut and paste into MS office documents as a gif, png etc. An example gif is shown here.

Once you have uploaded PhpSimpleChart2.php to your web server, you can then write your own script to use this. This is shown in the next page.

Step 2: Writing Your Own Program Based on the Example Program.

I have shown an example program , PhpSimpleChart_ex1.php which again is in the git repository. The first line of the code is to call the php script which contains the charting function -

require("PhpSimpleChart2.php");

In this case, the file PhpSimpleChart2.php is placed in the same folder as the script you are writing to call it. Hopefully, you will know that the php files have to have the correct read / write properties 755.

Next, you need to create your data sources and populates the array . Here are the example arrays, one for data and one for associated dates and times. Obviously, there has to be the same number of values in both arrays.

$data_array = array("12", "15", "18", "12", "11", "23","11", "24", "15", "18", "12", "11", "23","11", "24");
$date_array = array("12th 14h", "12th 15h", "12th 16h", "12th 17h", "12th 18h", "12th 19h", "12th 20h", "12th 21h", "12th 15h", "12th 16h", "12th 17h", "12th 18h", "12th 19h", "12th 20h", "12th 21h");

Typically, you would read these values from a database query or load them from a text file.

Next, you have to set the parameters for your chart . It's pretty straight forward. You set the titles first and then fix the height and width of the graph.

$chart_text="My test chart July 2018";
$y_title="Temp Deg C";
$x_scale=1000;
$y_scale=400;

You then make a function call as follows.

draw_line_chart($data_array,$date_array,$chart_text,$x_scale,$y_scale,$y_title);

I have shown the output of this example program in the attached image. The charting function tries to autoscale and avoid clutter of y-axis and chart descriptor points. Hopefully, it works for you. That's all you need.