Dashboard Description

Please click dashboard tab for demo dashboard:


This Dashboard represent performance dashboard for wholesale trader (Demo data) having business across multiple countries.

There are three different dashboards combined using tabs.

  • TAB1-Overview dashboard
  • TAB2-Sales dashboard
  • TAB3-Operations dashboard

For seamless movement across site; authentication is disabled. Authentication mechanism can be added as per requirement

Overview tab is Overview/ snapshot of the entire business, while other two tabs are for individual department details; namely Sales and Operations.


In Overview tab there is a high-level filter created using radio button which applies to the entire Dashboard except for the first column. This radio button section filters entire overview dashboard according to a week to date(WTD), month to date(MTD), year to date(YTD) data. Overview tab is divided into three columns. First column displaying today’s static performance; i.e it updates daily, but a filter is not applicable. First column displaying today’s total orders, total sales, total freight, shipping status and material status as on date. Material status pie displaying the status of material as on date, an overview of how much % products are stocked or understocked. On clicking understock portion of the pie, it displays further information like how many understocked products are either processed or pending using a popup window.


Second column is updated based on radio button value. First, there is a total order’s badge; displaying orders processed within the selected date range. Below it there is total Sales Indicators. It is displaying total Sales taken place within the selected date range; also a target.The green colour is total sales and Redline is target assigned for that date range. Then there is freight badge; displaying total freight cost in the selected date range. Last pie chart in the second column displays the status of orders shipped in the selected date range. The third column displaying a horizontal bar graph to which three filters are applicable. A first global filter of selecting date range (WTD/MTD/YTD). The second filter is a dropdown selector for numerical values of the x-axis, i.e total Sales in Dollars, total Discount in dollars and total quantity sold. The third filter is a dropdown selector for categorical values of y-axis i.e Category of Products, supplier of the Product, Employee who handled those orders, Country of customer and country of the supplier. On clicking the bars; list of products belonging to that category of the bar is displayed, for these products total four filters are applicable. Global date range filter, the second numerical filter of the x-axis, third categorical filter and clicked bar works as the fourth filter and also defines products to be displayed on the y-axis.


Sales tab is for analysing the performance of the sales department. all the graphs under this tab are representing annual or monthly performance. There is a filter at top created using radio button. The first graph is the Daily trend for YTD data. By default sales trend is displaying, it can be changed for Discount, with the help of top radio buttons. Similarly, the second line chart shows monthly sales trend in comparison with the previous two years; Discount trend can be selected using a filter.


Third graph is Bar inside Bar. It is used for displaying sales performance of Overall Department / Individual Employees against the assigned target. Outer Bar of purple colour representing monthly target assigned to individual employees. The inner bar represents Sales achieved by an individual employee. If a target is achieved Sales graph is of green colour otherwise it is of red colour representing shortfall in a target. For the Department, it is cumulative of all the employees. There are two filters applicable to this graph; first for selecting between the department and individual employees and second for selecting a year.


Under Operations Department tab, There are three sections; Transport, material and additional analysis.


First table in transport section displaying total freight incurred as on date from week start, month start and year start. The second graph is orders handled Vs Freight charged by various shippers associated with the company. Previous two year’s comparison can be checked using the year’s filter.


Material section is having three parts. First-part is a simple table row displaying the count of products in business and discontinued product. Below this table, there is a button which creates a popup window for displaying the list of the discontinued products. The third part is datatable displaying the status of all products excluding discontinued products. This datatable having multiple pages which can be navigated using page navigation option provided at the bottom. Either sequential navigation or directly jump to a particular page is also possible with navigation option provided at the bottom; Particular page number can be entered in the place of the current page number. Dtatable is also sortable as per requirement. Sort option is available on the left end of each column name of datatable. Datatable columns hide long content using eclipses which can be displayed using tooltip option which displays complete content on hover-over.


Last part in the material section is a freight analysis graph. it is a bubble chart between customer’s country and supplier’s country, A four dimension scatter plot. Size of bubble varies as per freight incurred. Data can be selected for 2020 or the previous two years. The second filter is responsible for categorisation of bubble i.e. it classifies bubbles using different colours.


There are some additional features are also available with each graph; such download as png, zoom in, zoom out, box selection, lasso selection, single hover over a display, compare on hover. All these options are available at the top left corner of each graph, displayed on hovering over the graph. Under the Sales tab monthly trends comparison there are three yearly trends. By default ‘show closest data’ on hover is selected, this option shows single point data for each line on hover. By clicking the second option of comparing data on over can be selected. Along with hover over point it also shows x and y equivalent of other trends.

Note:Larger graphs are best viewable in 'landscape' mode