The Dashboard application uses the Plotly Dash library to create interactive graphs. The project is built on the flask framework and takes data from the MySQL database, which hosts two separate tables. The data is written into the respective CSV files, which are then used by Dash to create the graphs. Currently there are three graphs on display, with placeholder data to provide a functional demo.
Before you begin, ensure you have met the following requirements:
- Python 3 is installed
- Flask is imported
- MySQL server running
- Content in requirements.txt installed (run setup.py)
- Configurations within config.yaml set
python3 -m venv ./venv
CREATE DATABASE IF NOT EXISTS dashboard;
USE dashboard;
DROP TABLE IF EXISTS chart_table;
CREATE TABLE IF NOT EXISTS chart_table (
`PersonID` int AUTO_INCREMENT PRIMARY KEY,
`LastName` varchar(255) NULL,
`Section` float NULL,
`AttentionSpan` varchar(255) NULL,
`GradeAverage` float NULL
);
ALTER USER 'root'@'localhost' IDENTIFIED BY 'password';
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Zou", 1, "good", 95);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Kabdou", 1, "great", 100);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("To", 2, "great", 95);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Mao", 2, "excellent", 98);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Chadha", 3, "excellent", 90);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Chen", 3, "decent", 80);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Guo", 4, "good", 64);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Porwal", 4, "great", 65);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Lu", 5, "decent", 96);
INSERT INTO `chart_table` (`LastName`, `Section`, `AttentionSpan`, `GradeAverage`) VALUES ("Wei", 5, "good", 95);
DROP TABLE IF EXISTS scatter_table;
CREATE TABLE IF NOT EXISTS scatter_table (
`PersonID` int AUTO_INCREMENT PRIMARY KEY,
`LastName` varchar(255) NULL,
`Section` float NULL,
`TimeLogged` float NULL,
`GradeAverage` float NULL
);
ALTER USER 'root'@'localhost' IDENTIFIED BY 'password';
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Zou", 1, 80, 95);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Kabdou", 1, 98, 100);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("To", 2, 85, 95);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Mao", 2, 90, 98);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Chadha", 3, 75, 98);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Chen", 3, 60, 80);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Guo", 4, 50, 64);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Porwal", 4, 78, 65);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Lu", 5, 89, 96);
INSERT INTO `scatter_table` (`LastName`, `Section`, `TimeLogged`, `GradeAverage`) VALUES ("Wei", 5, 90, 95);
select * from chart_table;
select * from scatter_table;
use dashboard;
select * from chart_table;
select * from scatter_table;
In MySQL Workbench under Users and Privileges create a new user, provide a username, set Limit to Hosts Matching to localhost, and provide a password. Check all the administrative roles on, and add the account.
On your PyCharm IDE, go to the command line, under the dashboard folder.
cd flask_app
export FLASK_APP=main
export FLASK_ENV=development
flask run
cd flask_app
set FLASK_APP=main
set FLASK_ENV=development
python -m flask run
On a local browser, enter the URL: http://127.0.0.1:5000/
The fully functional dashboard can be implemented within the larger scale portals. With a few modifications, the dashboard should function for the student, teacher, and administrator portals.
- Python 3
- Flask
- MySQL
- Plotly Dash
If you have any questions regarding this project, please locate me at:
- Email: [email protected]
- Github: https://github.com/brianzou03
- Linkedin: https://www.linkedin.com/in/brian-zou-8bbab4203/