- Chart Gallery
- Dashboards
- Software Sales Dashboard
Software Sales Dashboard
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Filters
var regionFilter = null;
var deviceFilter = null;
var categoryFilter = null;
// Charting objects
var unitsChart = null;
var regionChart = null;
var deviceChart = null;
var categoryChart = null;
var unitSeries = null;
var regionSeries = null;
var deviceSeries = null;
var categorySeries = null;
var unitsTitle = null;
var titleFilter = 'to filter click on bar charts below';
// Raw dashboard data, see data format in the end of the file
var rawData = generateData();
anychart.onDocumentReady(function () {
function unitsSoldChart() {
var chart = anychart.area();
chart.padding(15, 0, 0, 0);
// Set chart title text
unitsTitle = chart
.title()
.useHtml(true)
.hAlign('center')
.enabled(true);
unitsTitle.text(
'Income per Month<br><span style="color:#929292; font-size: 12px;">(' +
titleFilter +
')</span>'
);
// Create xAxis
var xAxis = chart.xAxis();
xAxis.title(false);
xAxis.staggerMode(false);
chart
.yAxis()
.labels()
.format(function () {
return formatMoney(parseInt(this.value), 0, '.', ',');
});
// Create area series
unitSeries = chart.area();
unitSeries.tooltip().titleFormat(function () {
return this.x;
});
unitSeries.tooltip().format(function () {
return '$' + formatMoney(this.value, 0, '.', ',');
});
return chart;
}
// Create Units sold chart, Area
unitsChart = unitsSoldChart();
function filterBarChart() {
var chart = anychart.bar();
chart.title().enabled(true).fontSize(14);
chart.padding(35, 5, 0, 5);
chart.yAxis().enabled(false);
return chart;
}
// Create filter bar chart by regions
regionChart = filterBarChart();
regionChart.title().text('Sales by Region');
regionSeries = regionChart.bar();
regionSeries.name('regions');
setupBarSeriesSettings(regionSeries);
// Create filter bar chart by device type
deviceChart = filterBarChart();
deviceChart.title().text('Sales by Device Type');
deviceSeries = deviceChart.bar();
deviceSeries.name('devices');
setupBarSeriesSettings(deviceSeries);
// Create filter bar chart by device type
categoryChart = filterBarChart();
categoryChart.title().text('Sales by Category');
categorySeries = categoryChart.bar();
categorySeries.name('categories');
setupBarSeriesSettings(categorySeries);
updateData();
var layoutTable = anychart.standalones.table(4, 5);
layoutTable.cellBorder(null);
layoutTable.getCol(0).width('2.5%');
layoutTable.getCol(4).width('2.5%');
layoutTable.getRow(0).height(40);
layoutTable.getRow(2).height('35%');
layoutTable.getRow(3).height(20);
layoutTable
.getCell(0, 1)
.colSpan(3)
.content('Software Sales Dashboard')
.hAlign('center')
.vAlign('bottom')
.fontSize(18)
.fontColor('#212121');
layoutTable.getCell(1, 1).colSpan(3).content(unitsChart);
layoutTable.getCell(2, 1).content(regionChart);
layoutTable.getCell(2, 2).content(deviceChart);
layoutTable.getCell(2, 3).content(categoryChart);
layoutTable.container('container');
layoutTable.draw();
});
// Setup same settings for all charts
function setupBarSeriesSettings(series) {
series.tooltip().titleFormat(function () {
return this.x;
});
series.tooltip().format(function () {
return '$' + formatMoney(this.value, 0, '.', ',');
});
series.listen('pointClick', function (e) {
var series = e.target;
var seriesName = series.name();
var categoryName = e.iterator.get('x');
switch (seriesName) {
case 'regions':
regionFilter =
regionFilter && regionFilter === categoryName
? null
: categoryName;
break;
case 'devices':
deviceFilter =
deviceFilter && deviceFilter === categoryName
? null
: categoryName;
break;
case 'categories':
categoryFilter =
categoryFilter && categoryFilter === categoryName
? null
: categoryName;
break;
default:
}
updateData();
});
}
/**
* Apply filters to raw data.
* Set data to charts in the following format:
*
* var unitData = [
* // timestamp value
* [1409529600000, 100],
* [1409616000000, 200],
* [1409702400000, 300]
* ];
* var barData = [
* {x: 'Category Name 1', value: 100, fill: 'rgb(233, 234, 237)', stroke: 'anychart.color.darken(rgb(233, 234, 237))'},
* {x: 'Category Name 2', value: 200, fill: 'rgb(233, 234, 237)', stroke: 'anychart.color.darken(rgb(233, 234, 237))'},
* {x: 'Category Name 3', value: 300, fill: 'rgb(233, 234, 237)', stroke: 'anychart.color.darken(rgb(233, 234, 237))'}
* ];
*
*/
function updateData() {
var hoverBarsSeriesColor = '#ffd54f';
var unitMap = {};
var territoryMap = {};
var platformMap = {};
var categoryMap = {};
if (!(regionFilter || deviceFilter || categoryFilter)) { titleFilter = 'to filter click on bar charts below'; }
else {
titleFilter = '';
if (regionFilter) titleFilter = 'in ' + regionFilter + ' ';
if (deviceFilter) { titleFilter = titleFilter + 'on ' + deviceFilter + ' '; }
if (categoryFilter) { titleFilter = titleFilter + 'in category "' + categoryFilter + '"'; }
}
unitsTitle.text(
'Income per Month<br><span style="color:#929292; font-size: 12px;">(' +
titleFilter +
')</span>'
);
for (var i = 0, count = rawData.length; i < count; i++) {
var dataItem = rawData[i];
var fitTerritoryFilter =
!regionFilter || (regionFilter && regionFilter === dataItem.region);
var fitPlatformFilter =
!deviceFilter || (deviceFilter && deviceFilter === dataItem.device);
var fitCategoryFilter =
!categoryFilter ||
(categoryFilter && categoryFilter === dataItem.category);
if (fitTerritoryFilter && fitPlatformFilter && fitCategoryFilter) {
var unitsMapItem = unitMap[dataItem.x];
if (unitsMapItem) {
unitMap[dataItem.x] = [
dataItem.x,
unitsMapItem[1] + dataItem.value
];
} else {
unitMap[dataItem.x] = [dataItem.x, dataItem.value];
}
}
if (fitPlatformFilter && fitCategoryFilter) {
var territoryMapItem = territoryMap[dataItem.region];
if (territoryMapItem) {
territoryMapItem.value += dataItem.value;
} else {
territoryMapItem = { x: dataItem.region, value: dataItem.value };
territoryMap[dataItem.region] = territoryMapItem;
}
territoryMapItem.fill =
territoryMapItem.x === regionFilter
? hoverBarsSeriesColor
: undefined;
territoryMapItem.stroke =
territoryMapItem.x === regionFilter
? anychart.color.darken(hoverBarsSeriesColor)
: undefined;
}
if (fitTerritoryFilter && fitCategoryFilter) {
var platformMapItem = platformMap[dataItem.device];
if (platformMapItem) {
platformMapItem.value += dataItem.value;
} else {
platformMapItem = { x: dataItem.device, value: dataItem.value };
platformMap[dataItem.device] = platformMapItem;
}
platformMapItem.fill =
platformMapItem.x === deviceFilter
? hoverBarsSeriesColor
: undefined;
platformMapItem.stroke =
platformMapItem.x === deviceFilter
? anychart.color.darken(hoverBarsSeriesColor)
: undefined;
}
if (fitTerritoryFilter && fitPlatformFilter) {
var categoryMapItem = categoryMap[dataItem.category];
if (categoryMapItem) {
categoryMapItem += dataItem.value;
} else {
categoryMapItem = { x: dataItem.category, value: dataItem.value };
categoryMap[dataItem.category] = categoryMapItem;
}
categoryMapItem.fill =
categoryMapItem.x === categoryFilter
? hoverBarsSeriesColor
: undefined;
categoryMapItem.stroke =
categoryMapItem.x === categoryFilter
? anychart.color.darken(hoverBarsSeriesColor)
: undefined;
}
}
var territoryData = getValues(territoryMap);
var platformData = getValues(platformMap);
var categoryData = getValues(categoryMap);
var unitData = getValues(unitMap);
regionSeries.data(territoryData);
deviceSeries.data(platformData);
categorySeries.data(categoryData);
unitSeries.data(unitData);
}
/**
* Generate data in the following format:
* var data = [
* {x: Date.UTC(2014, 8, 1), value: 700, territory: 'Europe', device: 'iPhone', category: 'Games'},
* {x: Date.UTC(2014, 8, 1), value: 200, territory: 'Europe', device: 'iPad', category: 'Games'},
* {x: Date.UTC(2014, 8, 1), value: 400, territory: 'Europe', device: 'Desktop', category: 'Games'}
* ];
* @return {Array.<Object>}
*/
function generateData() {
var data = [];
var dates = [
Date.UTC(2014, 0, 1),
Date.UTC(2014, 1, 1),
Date.UTC(2014, 2, 1),
Date.UTC(2014, 3, 1),
Date.UTC(2014, 4, 1),
Date.UTC(2014, 5, 1),
Date.UTC(2014, 6, 1),
Date.UTC(2014, 7, 1),
Date.UTC(2014, 8, 1),
Date.UTC(2014, 9, 1),
Date.UTC(2014, 10, 1),
Date.UTC(2014, 11, 1)
];
var territories = ['Europe', 'Asia Pacific', 'USA and Canada'];
var platforms = ['iPhone', 'iPad', 'Desktop'];
var categories = ['Games', 'Social Networking', 'Photo & Video'];
var monthNames = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
];
for (var d = 0, datesCount = dates.length; d < datesCount; d++) {
for (
var t = 0, territoriesCount = territories.length;
t < territoriesCount;
t++
) {
for (
var p = 0, platformsCount = platforms.length;
p < platformsCount;
p++
) {
for (
var c = 0, categoriesCount = categories.length;
c < categoriesCount;
c++
) {
var date = new Date(dates[d]);
data.push({
x: monthNames[date.getMonth()],
value: Math.floor(Math.random() * 100 + 1),
region: territories[t],
device: platforms[p],
category: categories[c]
});
}
}
}
}
return data;
}
/**
* Return Object values as array.
* @param {Object} obj
* @return {Array}
*/
function getValues(obj) {
var res = [];
var i = 0;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
res[i++] = obj[key];
}
}
return res;
}
function formatMoney(value, c, d, t) {
var n = value;
c = isNaN(Math.abs(c)) ? 2 : Math.abs(c);
d = d === undefined ? '.' : d;
t = t === undefined ? ',' : t;
var s = n < 0 ? '-' : '';
var i = parseInt((n = Math.abs(+n || 0).toFixed(c))) + '';
var j = i.length > 3 ? i.length % 3 : 0;
return (
s +
(j ? i.substr(0, j) + t : '') +
i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + t) +
(c
? d +
Math.abs(n - i)
.toFixed(c)
.slice(2)
: '')
);
}
</script>
</body>
</html>
Dashboard is a set of charts created in situations when different data about a single subject is shown. Dashboard can contain as many charts (of the same or different types) as necessary. For example, this dashboard provides detailed breakdown of software sales of an imaginary company in one-year period.
There are four charts in this dashboard: one an Area Chart and the bottom three are Bar charts. Area chart shows sales volume, and Bar charts give us information about software distribution according to type, region or device type. The dashboard is interactive: you can click any bar and the view changes immediately.