<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//ACME Corp. sales data 2000 - 2007
var data = {
'2000': [
['Jan', 31128, 25165],
['Feb', 39675, 23211],
['Mar', 41168, 23480],
['Apr', 39487, 16245],
['May', 28261, 21765],
['Jun', 32458, 28342],
['Jul', 39987, 31876],
['Aug', 45291, 33745],
['Sep', 51376, 31765],
['Oct', 48754, 29876],
['Nov', 51178, 26195],
['Dec', 78543, 37876]
], '2001': [
['Jan', 37328, 40765],
['Feb', 52875, 30911],
['Mar', 51268, 42080],
['Apr', 46487, 28645],
['May', 34461, 27965],
['Jun', 41758, 42342],
['Jul', 59987, 51276],
['Aug', 70191, 28345],
['Sep', 40476, 36465],
['Oct', 68154, 41876],
['Nov', 83778, 33995],
['Dec', 68643, 27976]
], '2002': [
['Jan', 48228, 9165],
['Feb', 39775, 13511],
['Mar', 30568, 8980],
['Apr', 32787, 18245],
['May', 35561, 11965],
['Jun', 45258, 13642],
['Jul', 23687, 14676],
['Aug', 26391, 15645],
['Sep', 28176, 10165],
['Oct', 25454, 17276],
['Nov', 29278, 17395],
['Dec', 60343, 10676]
], '2003': [
['Jan', 23528, 19465],
['Feb', 30175, 18111],
['Mar', 36668, 17780],
['Apr', 35487, 16245],
['May', 21861, 21765],
['Jun', 40458, 19442],
['Jul', 55987, 16576],
['Aug', 40191, 19745],
['Sep', 37376, 14565],
['Oct', 39254, 23476],
['Nov', 45478, 18195],
['Dec', 61843, 17576]
], '2004': [
['Jan', 42628, 20265],
['Feb', 53075, 12811],
['Mar', 53168, 13080],
['Apr', 47187, 11345],
['May', 56261, 27765],
['Jun', 49058, 44742],
['Jul', 61587, 16576],
['Aug', 75291, 19545],
['Sep', 80176, 20765],
['Oct', 78754, 22176],
['Nov', 59178, 30595],
['Dec', 49743, 49876]
], '2005': [
['Jan', 69928, 20365],
['Feb', 54875, 18011],
['Mar', 43568, 16580],
['Apr', 33987, 9745],
['May', 14961, 12265],
['Jun', 22758, 16342],
['Jul', 23587, 21476],
['Aug', 31391, 23345],
['Sep', 22276, 22265],
['Oct', 33554, 14676],
['Nov', 40878, 15395],
['Dec', 47043, 26176]
], '2006': [
['Jan', 41628, 12365],
['Feb', 63675, 10411],
['Mar', 59668, 7480],
['Apr', 53487, 9245],
['May', 38761, 8365],
['Jun', 26458, 2642],
['Jul', 32487, 10276],
['Aug', 22291, 16845],
['Sep', 32876, 14265],
['Oct', 54254, 22876],
['Nov', 65178, 20095],
['Dec', 55043, 16876]
], '2007': [
['Jan', 48128, 7165],
['Feb', 17975, 7211],
['Mar', 10468, 6680],
['Apr', 10087, 4445],
['May', 17361, 6065],
['Jun', 24758, 12642],
['Jul', 14987, 12376],
['Aug', 16491, 9445],
['Sep', 16176, 9065],
['Oct', 18054, 10076],
['Nov', 14078, 14995],
['Dec', 8843, 14576]
]
};
// Sum up ACME Corp. sales data 2000 - 2007 grouped by year
var totalDataMap = {
'2000': {x: '2000', value: sum(data['2000'])},
'2001': {x: '2001', value: sum(data['2001'])},
'2002': {x: '2002', value: sum(data['2002'])},
'2003': {x: '2003', value: sum(data['2003'])},
'2004': {x: '2004', value: sum(data['2004'])},
'2005': {x: '2005', value: sum(data['2005'])},
'2006': {x: '2006', value: sum(data['2006'])},
'2007': {x: '2007', value: sum(data['2007'])}
};
// Sum up ACME Corp. sales data 2000 - 2007 as list
var totalDataArray = getValues(totalDataMap);
// Current drill down year
var selectedX = null;
// Charting objects
var totalChart = null;
var detailChart = null;
var totalSeries = null;
var detailSeries_1 = null;
var detailSeries_2 = null;
anychart.onDocumentReady(function() {
// Create stage for all charts
stage = acgraph.create('container');
// Create column chart
totalChart = anychart.column();
// Set chart to render on stage
totalChart.container(stage);
// Set chart size and position settings
totalChart.bounds(0, 0, '100%', '50%');
// Set chart title settings
totalChart.title().text('ACME Corp. Sales Dashboard');
// Set scale minimum
totalChart.yScale().minimum(0);
// Set chart settings common for all bar charts in the dashboard
setupChartSettings(totalChart);
totalSeries = totalChart.column(totalDataArray);
totalSeries.listen('pointClick', function(e) {
drillDown(e.iterator.get('x'));
});
// Create column chart
detailChart = anychart.column();
// Set chart to render on stage
detailChart.container(stage);
// Set chart size and position settings
detailChart.bounds(0, '50%', '100%', '50%');
// Set title position settings
detailChart.title().align('left');
// Set chart to stack values by Y scale.
detailChart.yScale().stackMode('value');
// Set scale minimum
detailChart.yScale().minimum(0);
// Set chart settings common for all bar charts in the dashboard
setupChartSettings(detailChart);
drillDown('2007');
totalChart.draw();
detailChart.draw();
});
/**
* Drill down to year.
* @param {string} year Drill down year value.
*/
function drillDown(year) {
var selectedData;
// Deselect previous bar in totalChart if selected
if (selectedX) {
selectedData = totalDataMap[selectedX];
selectedData['marker'] = null;
selectedData['hatchFill'] = null;
}
selectedX = year;
// Select bar by current year value
selectedData = totalDataMap[selectedX];
selectedData['marker'] = {enabled: true, type: 'star5', fill: 'gold', size: 9};
// Select data for detail chart from map by current year value
var detailData = data[selectedX];
// Create data set with detail data
var dataSet = anychart.data.set(detailData);
// Map data for the first series, take x from the zero column and value from the first column of the data set
var data_1 = dataSet.mapAs({x: [0], value: [1]});
// Map data for the second series, take x from the zero column and value from the second column of the data set
var data_2 = dataSet.mapAs({x: [0], value: [2]});
// Set data to the first series (create if does not exist)
if (!detailSeries_1) detailSeries_1 = detailChart.column(data_1);
else detailSeries_1.data(data_1);
// Set data to the second series (create if does not exist)
if (!detailSeries_2) detailSeries_2 = detailChart.column(data_2);
else detailSeries_2.data(data_2);
// Update detail chart title text value
detailChart.title().text('Revenue for the ' + selectedX + ' year');
// Set data to the total chart (force to update selected bar)
totalSeries.data(totalDataArray);
}
/**
* Gets an array in the following format:
* var array = [
* ['category name', 100, 50],
* ['category name', 200, 100],
* ['category name', 300, 50]
* ];
* @param {Array.<Array>} array Array to sum up values.
* @return {number} Total sum.
*/
function sum(array) {
var result = 0;
for (var i = 0, count = array.length; i < count; i++) {
var item = array[i];
result += item[1] + item[2];
}
return result;
}
/**
* Set same settings for all passed charts.
* @param {anychart.cartesian.Chart} chart Chart to set settings.
*/
function setupChartSettings(chart) {
//disable axes titles
chart.xAxis().title().enabled(false);
chart.yAxis().title().enabled(false);
//disable chart background
chart.background().enabled(false);
}
/**
* Return Object values as array.
* @param {Object} obj
* @return {Array}
*/
function getValues(obj) {
var res = [];
var i = 0;
for (var key in obj) {
res[i++] = obj[key];
}
return res;
}
</script>
</body>
</html>