Sales Dashboard






- Revenue
- Avg. order size
- Revenue per Sales rep.
- Sales distribution
- Revenue per Category
- Revenue per Country
Revenue
Calculates and displays the total revenue from all orders.
Data Source
-
SharePoint List
List: Orders
Fields: Total -
Aggregation:
Group by: empty
As you can see the empty field doesn’t exists in the data source. We use it here to calculate aggregate values over all rows in the data set because for each row it equals to “undefined”, thus we get a single group containing all items.
Aggregations:
Total = sum of Total
Dashboard
-
Chart
Type: Linear Gauge
Value: Total
Avg. order size
Calculates and displays the average order size.
Data Source
-
SharePoint List
List: Orders
Fields: Total -
Aggregation:
Group by: empty
As you can see the empty field doesn’t exists in the data source. We use it here to calculate aggregate values over all rows in the data set because for each row it equals to “undefined”, thus we get a single group containing all items.
Aggregations:
AvgTotal = average of Total
Dashboard
-
Chart
Type: Linear Gauge
Value: AvgTotal
Revenue per Sales rep.
Displays the total revenue generated by each sales representative.
Data Source
-
SharePoint List
List: Orders
Fields: SalesRep, Total -
Aggregation:
Group by: SalesRep
Aggregations:
Total = sum of Total
Dashboard
-
Chart
Type: Bar
Display each group as a separate series: False
Category: value
Value: Total
Aggregate over category: False
Sales distribution
Displays sales revenue by sales representatives, encoded as columns, as well as the cumulative revenue, encoded as a line. This chart is also known as Pareto chart or Pareto diagram.
Data Source
-
SharePoint List
List: Orders
Fields: SalesRep, Total -
Aggregation:
Group by: SalesRep
Aggregations:
Total = sum of Total -
Advanced:
var handlers = {}; handlers.aggregationSuccess = function (data, logger) { data.groups.sort(function (a, b) { return a.Total <= b.Total ? 1 : -1 }); var total = 0; $.each(data.groups, function () { total += this.Total; }); $.each(data.groups, function () { this.Percantage = this.Total / total * 100; }); return true; }
The code above calculates individual rank of each sales representative in total revenue in percent.
Dashboard
-
Chart
Type: Column
Display each group as a separate series: False
Category: value
Value: Percantage
Aggregate over category: False -
Style
Value axis: Label format: {0}%
-
Advanced:
var handlers = {}; handlers.preRender = function (config, logger) { var data = []; $.each(config.series[0].data, function (i) { if (data.length == 0) { data.push(this.Percantage); } else { data.push(this.Percantage + data[i - 1]); } }); config.series.push({ type: 'line', data: data }); logger.debug('Configuration: ', config); return true; }
Here we populate a new data series with cumulative values, that increase from one salesperson to the next, representing meaningful change. Next, we build a line chart based on the new data set.
Revenue per Category
Displays revenue by product category.
Data Source
-
SharePoint List
List: OrderItems
Fields: Amount, Product:Category -
Aggregation:
Group by: Product:Category
Aggregations:
Total = sum of Amount -
Advanced:
var handlers = {}; handlers.aggregationSuccess = function (data, logger) { data.groups.sort(function (a, b) { return a.Total <= b.Total ? 1 : -1 }); return true; }
Sorting groups by total revenue.
Dashboard
-
Chart
Type: Bar
Display each group as a separate series: False
Category: value
Value: Total
Aggregate over category: False
Revenue per Country
Displays revenue by customer's country.
Data Source
-
SharePoint List
List: Orders
Fields: Customer:Country, Total -
Aggregation:
Group by: Customer:Country
Aggregations:
Total = sum of Total -
Advanced:
var handlers = {}; handlers.aggregationSuccess = function (data, logger) { data.groups.sort(function (a, b) { return a.Total <= b.Total ? 1 : -1 }); return true; }
Sorting groups by total revenue.
Dashboard
-
Chart
Type: Bar
Display each group as a separate series: False
Category: value
Value: Total
Aggregate over category: False