Dashboard – interactive heatmap visualization using dash-plotly

Dash-plotly is used in creating an interactive heatmap visualization that identifies hour of the week sales pattern of a fictitious restaurant.

Install all the dependencies,

Create a python file using a text editor (eg: sublime) and import the following packages, and stylesheets.

Read in the data file containing restaurant(POS), item(MenuItem), weekday, hour and Quantity(Qty) of sale. Create a dataframe checkrepresenting a week with all days and hours(24 hour format) included, we need this check at a later part.

Lets set the restaurant and item for default visualization.

Create the app layout containing dropdown for restaurant and menuitem using dash_core_components.Dropdown , also include default visualization to the dashboard using dash_core_components.Graph component.

After selecting a restaurant in the POS_dropdown, menuitems of that restaurant are filtered in to the Menu_dropdown by app.callback decorator using update_Menu_dropdown() function.

After selecting a menu item, its hour of the week sale is updated in the dashboard using update_graph function.

update_graph function creates heatmap_data, the subset of input_data that corresponds to the POS and menuitem selection. Outer join of heatmap_dataand check dataframe on weekday and hour fields is done, so that every day and hour of the week is there in the resultant dataframe. Updated heat map for that menu item is returned to the dashboard by this function.

Run the app from the main function.

The screen shot shows the insight from the application for chicken biryani at restaurant_2. X-axis represents day of the week and Y-axis represents hour of the day(24 hours format). Colours represent the quantity of sale of the item(chicken biryani) dark being lowest and light being highest sales. Data shows that peak hour of chicken biryani sales for Restaurant_2 is on Sunday afternoon 3 PM.

Code of the article is available in github.

Author: Balaji Muthukrishnan
Source: https://medium.com/@balajiciet/dashboard-interactive-heatmap-visualization-using-dash-plotly-6e69cf732e34 


No Comments

  1. Stanleyduene on October 12, 2020 at 2:00 am

    Your comment is awaiting moderation.

    Наш сайт


Leave a Comment