IPL(Indian Premier League) Dashboard using Flask, AmCharts, and MongoDB
Introduction
- IPL as we all know is one of the most decorated cricket premier leagues in the world.
- In this blog, we are going to take the IPL dataset from 2008 to 2020.
- We are going to download that dataset from Kaggle – https://www.kaggle.com/patrickb1912/ipl-complete-dataset-20082020
- We are going to store this dataset in our database, we will be using MongoDB as our database.
- We will be using the Flask framework for our application.
- For creating the visualization charts we will be using AmCharts4.
- For MongoDB references, you can check out – https://statusneo.com/mongodb-introduction/
- Let’s begin creating our IPL visualization application.
Data Cleaning
- In this task, we are going to clean our dataset.
- Once you have downloaded your dataset, you will be able to see 2 files there- IPL Ball-by-Ball 2008-2020.csv, IPL Matches 2008-2020.csv
- For this project, we will work only on the matches dataset.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-11.08.03-AM-1024x570.png)
- This is how our dataset look likes.
- So for cleaning purposes let’s first remove the null values from the dataset.
- We will be removing rows having null values in team1 or team2 column.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-11.22.28-AM-1024x624.png)
- This is how our dataset looks after cleaning, although no rows are removed because there were no null values present there.
- But I will prefer to do this step as it helps in cleaning the data if there is some Null value present.
- Let’s create this CSV file to matches.csv and store it in the same directory.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-11.34.19-AM-1024x199.png)
Data Upload to MongoDB Cluster
- MongoDB is going to be our primary database for this project.
- We are going to use MongoDB cloud and the free cluster that they provide.
- For uploading the data we will do it using our python code, with the help of pymongo library.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-11.40.21-AM-1024x465.png)
- After creating your account on MongoDB cloud you will be redirected to a window that looks like this.
- For finding the connection string to the cluster you can click on the connect button and select the application to get your link.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-11.48.34-AM-1024x781.png)
- Code to upload code to the MongoDB cluster is –
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-4.52.18-PM-1024x603.png)
- Let’s see the MongoDB cloud console and see how the data is looking there.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-03-at-4.57.54-PM-1024x463.png)
- So now our data has been cleaned and uploaded to the database, let’s begin with the application.
Application Using Flask
- Let’s start creating our flask application.
- We are going to follow the generic structure of creating a flask application.
- We will be having a requirement.txt file where all the packages and their versions will be provided.
- Then we will be having an src folder that will be having all the APIs and the backend-related stuff.
- In the templates, we will be having our UI templates.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-06-at-11.11.50-AM-1024x522.png)
- This is how the structure of our project looks like.
- We need to run pip install -r requirements.txt, it will install all our required packages.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-06-at-11.15.45-AM-1024x522.png)
- Lets run our app, by running the app.py file, in this file we created the connection with MongoDB.
- app.route is the URL that will initiate the function, by default the home page will be opened.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-06-at-11.24.03-AM-1024x303.png)
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-06-at-11.31.11-AM-1024x685.png)
- https://www.amcharts.com/docs/v4/ , this is the link to the amcharts4 official documentation that we are going to use in our project.
- Let’s create our homepage, so on our homepage, we want to have 3 charts.
- In the first half of our page, we want to show the team’s bar chart with their wins.
- In the second half, we want to show two charts.
- One Pie chart of teams with their toss wins.
- Other charts of players with their man-of-the-match awards.
- Let’s create our home_page file in the src directory.
- And also create an index.html in templates. It’s a dummy template we have taken from the bootstrap official website.
- Let’s have the bar charts and pie chart code from amcharts4 and add it to our js directory under static.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-11.24.02-AM-1024x561.png)
- In our src folder let’s add the code for fetching the data from MongoDB.
- we will be bringing the data for the team wins, toss wins, and player of the match awards.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-6.26.48-PM-1024x276.png)
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-6.28.45-PM-1024x242.png)
- In the templates, file let’s add the response of our dataset.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-6.40.42-PM-1024x569.png)
- I am not covering all the code, because it will become very long then.
- So I will be sharing my GitHub link to this code.
- Now let’s start our application and see what our work looks like..
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-6.49.23-PM-1024x253.png)
- Now our app is up, so let’s try our home page.
![](https://statusneo.com/wp-content/uploads/2021/12/Screenshot-2021-12-07-at-7.04.37-PM-1024x639.png)
Conclusion
- And here it is, our home dashboard is ready, if you want to have more charts or more data analysis go ahead the stage is set now.
- So we collected the data, cleaned it, uploaded it to our database, created our flask application, used amcharts there, and visualized the dataset.
- The whole application code is available at GitHub at – https://github.com/Utkarsh731/IPL
- For any queries feel free to contact me- at [email protected], https://www.linkedin.com/in/utkarsh-shukla-1520a8255/
- Still Curious? Visit my website to know more!
- For more interesting Blogs Visit- Utkarsh Shukla Author
0 Comments
Add Comment
You must be logged in to post a comment.