Graphing Data from MYSQL By Javier Montiel Urbina
Requirements for Local Devices (* required cdn for graphing and acquiring data, needed in the html file*) <script src=" https://code.jquery.com/jquery-2.2.4.js"integrity="sha256-it6q9imjyuqimwnd9ldybustiq/8puow33aoqmvfp qi="crossorigin="anonymous "> </script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js "></script> We will be placing all our created files into one folder. The folder will be moved to (*if you will be using a Raspberry Pi *) /var/www/html/your_folder_name (*If you will be using your computer*) /apache24/htdocs/your_folder_name MYSQL Database Software Apache Http Web Server Software PHP Filezilla Requirements for Linux Box on Sonoma State Campus (*if you will be using a Linux Box*) /var/www/html/your_folder_name Ssh verification Filezilla(basics)
Intro Overall tutorial outcome we will follow our flowchart. We will acquire data and plot the data using some different languages such as MYSQL, PHP,Javascript, and JQuery/Ajax. Acquire Data from MYSQL Using PHP We will focus first on acquiring the data using php from the database. In this tutorial I will be uploading our created folder to the linux box using Filezilla. We will upload our folder to /var/www/html/ceistudent/tutorial/ folder. Please create a folder inside the tutorial folder in this format just like the your SSU username. (*last name+first letter of your first name*) (*montielj*)
In order to acquire our data from the database, we will need to first follow the procedure as follows. Below are the steps to acquire the data. We output the mysql data to JSON formatted because normal javascript does not have a direct connection interface to mysql.
Below is a detailed look at writing the code for acquiring the data and formatting the data into JSON. Create a file called db.php. We will be using the database located on the Sonoma State University campus. The database we will be using is as follows:
If there is data in the database and we want to test our php file, then we can type in the ip address of the linux box followed by the address of the php file. If you are using your local device then make sure to put the folder in the apache24/http and if you use the linux box then put it in the var/www/html/ceistudent1/tutorial/lastname if you test it then you should see something like the image above in the browser. Initialize the Graphing Parameters After creating our php file that requires the mysql data we will then proceed on to creating a javascript file that will call our php file and initialize the graphing parameters. We will use Chart.js, graphing library to complete this task.
In the javascript code we will be doing the following steps
I will name my javascript file graph.js.
Final Steps Finally we will create a file called index.html. You will need to include the cdns(libraries) in order to graph the data and use ajax to call your php file.
Now that we have all our files created we want to upload this folder to our linux box, through ssh. We will want to use Filezilla in order to do this but we will need credentials in order to log into the linux box. After the folder has been uploaded then we can verify that our work is successful. If you uploaded this to the linux box, then you can verify it by opening up your web browser and typing this link in 130.157.3.112//ceistudent1/tutorial/lastname+first letter of your first name/index.html. If everything successful then you should see an image like this. If there's a problem, then check the developer tool on your browser. This helps you debug the code if their is a misplaced semicolon, parenthesis, bracket, or any error. For example, if you use google chrome, then we can open the web developer console by clicking the setting menu and opening the more
tools section we can then see the web developer console. This will be very useful for debugging and future endeavors.