To create a line graph in PHP, It is important to have either XAMPP or WAMPP installed in your computer. First the data must be taken from an external source. For instance we will take the data of Nepal share market. We will take the index value of a certain period of time. Once we take the data we convert it into a CSV format of MS-Excel. Here we create a database called “practice”, and then within the database we create a table called ‘nepse’. There are four columns included in the table i.e. are ‘id’, ‘value’, ‘date’, ‘Index Value’. The ‘id’ will be the primary key of the table, whereas date will contain the dates of the required time limit and ‘IndexValue’ will contain the value of the respected dates. And then within the table then we then, import the CSV file into the MySQL Database into the required MySQL database. (Note: The data in the CSV file must be in the format of the ‘nepse’ database table.
A glimpse of the data from The Nepal share market in CSVformat.
For referencing visit the website (https://www.dyclassroom.com/chartjs/chartjs-how-to-create-line-graph-using-data-from-mysql-mariadb-table-and-php)
In the htdocs folder create a folder called responsivegraph, then within the folder create file called data.php. This file when called will return the data of the nepse value Index. The output of the result will display the data of the database in a raw format.
Figure 1: Code of the data.php file
Inside the responsivegraph folder, create separate CSS and JS folders. Within the CSS folder create the default.css file. It is given in above link.
Figure 2: Code of the CSS file
Inside the responsivegraph folder, create a file as line-db-php.html. And inside the js folder create a line-db-php.js file. The structure of folder will look like this:
Figure 3: Folder structure of the responsive graph
Open the line-db-php.html file and write the following code:
Figure 4: Code of the line-db-php.html file
Now open the line-db-php.js file and write the following code.
Figure 5: Code of line-db-php.js
Figure 6: Code of line-db-php.js file
The output should look something similar to this
Figure 7: graph is responsive
Figure 8: Graph in full screen