Dashboard

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.

Prerequisites

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

VirtualEnv creation

python3 -m venv ./venv

Sql Database Scripts

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;

To view the 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.

How It Works

Running the Server

On your PyCharm IDE, go to the command line, under the dashboard folder.

On Mac Command Line

cd flask_app
export FLASK_APP=main
export FLASK_ENV=development
flask run

On Windows Terminal (Do not use Windows Powershell)

cd flask_app
set FLASK_APP=main
set FLASK_ENV=development
python -m flask run

Running the Client

On a local browser, enter the URL: http://127.0.0.1:5000/

Development Expansion

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.

Technology Stack

• Python 3
• Flask
• MySQL
• Plotly Dash

Contacts

If you have any questions regarding this project, please locate me at:

• Email: brianzou03@gmail.com
• Github: https://github.com/brianzou03
• Linkedin: https://www.linkedin.com/in/brian-zou-8bbab4203/