The point of this project is sharing learning on building the DC web application with Flask (python web Service), used DC.js for rich look for interactive diagrams Dashboard and we used SQLite in-memory Database storage for storing example data.
- python 3.6.2
- required modules are flask,render_template,request,session,flash,redirect,url_for, sqlite3
on the off chance that you don't have above modules in your machine, you can install using pip introduce.
in this Project we have two pages, one is Sign up/Sign in page and other one is Dashboard page
- Sign Up /Sign in page: we create a login_users table in SQLite DB while loading python content alongside admin as the default user.
Note: it's in Memory DB, so in the event that you restart the application, you will lose made users so you can use any DB which you are interested. Point of this task is, run the project without having various installations.
- Dashboard Page : we load the sample Cars dataset into CARS_CLASSFICATION table while loading Python Script and made interactive graphs/diagrams with DC.js.
- clone the project on your machine
Note: in the event that you don't have above modules in your machine, you can use pip install and also you can install python using Anaconda tool.
follow the below steps to run the code
- go the directory at the command level
cd C:\Git\MyFirstProject\Flask Project
- run the RunFaskDCProject.py
python RunFaskDCProject.py
Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
- Use this URL http://127.0.0.1:5000/on a web browser to get login page and you can pass [email protected] / admin or you can set up your User
-
Sign In/Sign up Page:
- Python Code:
you can see python code in RunFaskDCProject.py
- [ /Signup,/signin,/signout ]: code for user enrollment and approval
- [login_validate]: function to validate the user login status before going launch the page.
- Html code:
Html Code for Signup and Signin Page.
- login_index.html
- Python Code:
you can see python code in RunFaskDCProject.py
-
Dashboard page. Cars Data represnation in DC.js Charts.
- Python Code:
you can see python code in RunFaskDCProject.py
- /getCarsData: get Data for cars from SQLite DB.
- DC.js Code.
- car_dashboard.js: you can see the code for how to draw DC charts and DC chart names are below. - ORIGIN_DIMPIE - HORSEPOWER_DimDonut - CYLINDERS_Bar
- Python Code:
you can see python code in RunFaskDCProject.py
Note: we need to add above ids for div tag in html page where you want to attach DC charts. for this example, we added charts in dashboard.html
Eswara Rao Budha
MIT
Free Software!