html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

// 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;

        }

​

        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);

//            console.log(territoryData);// uncomment to log data format

​

    var platformData = getValues(platformMap);

//            console.log(platformData);// uncomment to log data format

​

    var categoryData = getValues(categoryMap);

//            console.log(categoryData);// uncomment to log data format

​

    var unitData = getValues(unitMap);

//            console.log(unitData);// uncomment to log data format

​

    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) {

        res[i++] = obj[key];

    }

    return res;

}

​

function formatMoney(value, c, d, t) {

    var n = value,

        c = isNaN(c = Math.abs(c)) ? 2 : c,

        d = d == undefined ? "." : d,

        t = t == undefined ? "," : t,

        s = n < 0 ? "-" : "",

        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",

        j = (j = i.length) > 3 ? j % 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) : "");

}