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;

      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)

      : '')

  );

}