/Dashboard

This project report details the creation of an Adidas dashboard featuring pie, bar, pyramid, and partitioned bar charts. The dashboard answers key business questions about product profitability, regional sales performance, and retailer market share. Data is sourced from a SQL database, processed with Pandas, and visualized using amCharts.

Primary LanguageJavaScript

Adidas Dashboard

image

Design Phase

Define:

Client Title: Administrator

Available Information:

  • Retailer
  • Retailer ID
  • Region
  • State
  • City
  • Product
  • Price per Unit
  • Units Sold
  • Total Sales
  • Operating Profit
  • Operating Margin
  • Sales Method

Required Questions Answered by the Dashboard:

  • Which product is the most profitable?
  • Which product is the least profitable?
  • Which region and state have the highest or lowest total sales?
  • How does the market share analysis look?
  • Which states contribute the most to Adidas sales?
  • Which unit is the most or least sold product?
  • Which retailers carry the largest share of Adidas products?
  • What is the distribution of Adidas products across different retailers?

Charts in the Dashboard:

1. Pie Chart:

  • Source Code: Donut Chart
  • Chart Type: Pie Chart
  • Description: Displays the percentage of market share per retailer.
    • Insights: West Gear has the highest market share, Kohl’s has the lowest.
  • Reason for Selection: Suitable for comparing data.
  • Critique: Shows only percentage, not real numbers.

2. Bar Chart (Total Sales):

  • Source Code: Column with Rotated Series
  • Chart Type: Bar Chart
  • Description: Shows total sales per product.
    • Insights: Men’s street footwear has the highest sales, women’s athletic footwear has the lowest.
  • Reason for Selection: Suitable for comparing data.
  • Critique: Product titles on the x-axis are at a 90-degree angle, making them harder to read.

3. Bar Chart (Operating Profit):

  • Source Code: Column with Rotated Series
  • Chart Type: Bar Chart
  • Description: Shows operating profit per product.
    • Insights: Men’s street footwear has the highest profit, women’s athletic footwear has the lowest.
  • Reason for Selection: Suitable for comparing data.
  • Critique: Product titles on the x-axis are at a 90-degree angle, making them harder to read.

4. Pyramid Chart:

  • Source Code: Pyramid Chart
  • Chart Type: Pyramid Chart
  • Description: Displays the percentage of units sold per product.
    • Insights: Men’s Apparel has the highest percentage of units sold, Women’s Street Footwear has the lowest.
  • Reason for Selection: Suitable for comparing data.
  • Critique: Shows only percentage, not real numbers.

5. Partitioned Bar Chart:

  • Source Code: Partitioned Bar Chart
  • Chart Type: Partitioned Bar Chart
  • Description: Shows total sales per region and state.
    • Insights: Maine state has the highest total sales, Florida has the lowest.
  • Reason for Selection: Suitable for comparing data across regions and states.
  • Critique: Showing the region might not be important.

Source Codes and Functions

Pie Chart Source Code:

  • /get-piechart: Retrieves data from SQL database (adidas_data) to generate a pie chart of market share per retailer.
  • Uses Pandas to execute SQL query, processes the data, and returns it in JSON format for front-end visualization.

Bar Chart Source Code (Total Sales):

  • /get-barchart: Retrieves data from SQL database (adidas_data) to generate a bar chart of total sales per product.
  • Uses Pandas to execute SQL query, processes the data, and returns it in JSON format for front-end visualization.

Bar Chart Source Code (Operating Profit):

  • /get-barchart3: Retrieves data from SQL database (adidas_data) to generate a bar chart of operating profit per product.
  • Uses Pandas to execute SQL query, processes the data, and returns it in JSON format for front-end visualization.

Pyramid Chart Source Code:

  • /get-pyramidchart: Retrieves data from SQL database (adidas_data) to generate a pyramid chart of units sold per product.
  • Uses Pandas to execute SQL query, processes the data, and returns it in JSON format for front-end visualization.

Partitioned Bar Chart Source Code:

  • /get_Partitioned_BarChart: Retrieves data from SQL database (adidas_data) to generate a partitioned bar chart of total sales per region and state.
  • Uses Pandas to execute SQL query, processes the data, and returns it in JSON format for front-end visualization.

Frontend Integration

HTML (index.html):

  • Contains meta information, links to AM5 library and themes, external stylesheet (style.css), and a favicon.
  • Includes header with Adidas logo and title, container elements for different charts with corresponding titles.
  • Script references for chart implementations are included at the end.

CSS (style.css):

  • Styles for chart div containers (#chartdiv_pie, #chartdiv_bar, #chartdiv_bar2, #chartdiv_bar3, #chartdiv_line).
  • Header styling with flex display, background color, padding, and border-radius.
  • Adidas logo styling for width and margin.
  • Title (h1) and subtitle (h2) styling for font family, size, color, text transformation, and letter spacing.

Flask Application (server.py):

  • Initializes a SQLite database connection using data.db.
  • Reads data from a CSV file (Adidas.csv), converts it into a Pandas DataFrame, and stores it in the SQLite database table adidas_data using SQLAlchemy.
  • Sets up a route (/) that renders the index.html template.

Suggested Future Work

  • Implementing a line chart to show the total profit or sales per month.
  • Implementing a map chart to show the frequency of profit compared to the region and state.
  • Adding a drop-down menu to navigate between the total sales or profit of each product for the partitioned bar chart.

How to Run

  • Install necessary packages.
  • Run the code using the run button or terminal with the command: python server.py.