This is an example which covers the basics of any sales dashboard. We
did our best to make it visually appealing and easy to grasp.
Example contains four tabs: The first tab - is a general view - it allows to
assess the situation as a whole, the other three tabs intend to reveal the situation for particular
categories of
products, sales team advances and evaluation of sales by region.
The solution is dedicated to the wines of France - a pleasant topic to think about.
But don't forget that according to the Surgeon General, women should not drink alcoholic
beverages during pregnancy because of the risk of birth defects and that consumption of
alcoholic beverages impairs your ability to drive a car or operate machinery, and may cause
health problems.
Replacing Data
All data used in this sample can be found in src/data/data.js file.
The structure of the data is (all 4 data sets have same first level: "YTD", "QTD", "MTD", "WTD" and
"all"):
- revenue_chart - table with rows like ["2001", 354165, 457]
- key_metrics - has several objects and the data for each of them.
- five_best
- sales_men - table with ["Katherine Dean", 505625] rows
- regions - table with ["Languedoc-Roussillon", 524336]
rows
- products - table with ["Comtes de Tastes", 350012]
rows
- categories_data - products by categories data. The biggest data
set in the
sample.
- x - category name
- value - value for the whole category
- data - data for the table and the map in this tab
- regions_data - list of all regions with data for each of
them:
- id - region id
- x - region name
- value - value
- market_share - products market share in the region
- total_share - the share of sales in this region from the
total
sales
- revenue - table data for revenue chart [["2001", 480973,
490]
- team_data - list of all persons with data for each of them
Technology stack
Charting in this sample is done exclisively by the
latest version of AnyChart JavaScript Web
Charting
Framework.
AnyChart Users' Guide
AnyChart JavaScript API Reference
To create tabs, handle data and interactions the following tools are used:
Special thanks to Google Material
Design
for the inspiration and design ideas.
License
AnyChart Sales Dashboard solution includes two parts:
-
Code of the solution that allows to use Javascript library (in this case, AnyChart) to
create a dashboard. You can use, edit, modify it, use it with other Javascript libraries
without any restrictions. It is released under Apache 2.0
License.
-
AnyChart JavaScript library. It is released under Commercial license. You can test this
plugin with the trial
version of AnyChart. Our trial version is not limited by time and doesn't contain any
feature limitations. Check
details here.
If you have any questions regarding licensing - please contact us. sales@anychart.com