html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // year | coal | gas | nuclear | hydroelectric

  var rawData = [

    [1990, 2500, 1000, 1500, 1000],

    [1991, 2520, 1150, 1550, 1100],

    [1992, 2530, 1100, 1540, 1100],

    [1993, 2540, 1100, 1530, 1000],

    [1994, 2500, 1150, 1500, 1050],

    [1995, 2300, 1200, 1600, 1060],

    [1996, 2250, 1250, 1650, 1070],

    [1997, 2200, 1200, 1600, 1080],

    [1998, 2150, 1200, 1500, 1050],

    [1999, 2100, 1250, 1500, 1010],

    [2000, 2100, 1250, 1650, 1100],

    [2001, 2100, 1300, 1600, 1090],

    [2002, 2100, 1350, 1650, 1050],

    [2003, 2100, 1300, 1670, 1040],

    [2004, 2150, 1300, 1680, 1070],

    [2005, 2200, 1500, 1700, 1030],

    [2006, 2150, 1500, 1710, 1030],

    [2007, 2100, 1600, 1710, 1020],

    [2008, 1700, 1700, 1850, 1010],

    [2009, 1750, 1700, 1800, 1000],

    [2010, 1700, 1750, 1800, 1000],

    [2011, 1650, 1700, 1850, 1010],

    [2012, 1600, 1750, 1850, 1020],

    [2013, 1600, 2000, 1750, 1040],

    [2014, 1500, 2100, 1700, 1050],

    [2015, 1509, 2050, 1700, 1030],

    [2016, 1520, 2000, 1650, 1020],

    [2017, 1510, 2050, 1650, 1010],

    [2018, 1430, 2100, 1600, 1020]

  ];

​

  var preprocessedData = preprocessData(rawData);

​

  var chart = anychart.area();

​

​

  var series1 = chart.rangeSplineArea(preprocessedData[0]);

  var series2 = chart.rangeSplineArea(preprocessedData[1]);

  var series3 = chart.rangeSplineArea(preprocessedData[2]);

  var series4 = chart.rangeSplineArea(preprocessedData[3]);

​

  chart.container("container").draw();

});

​

function preprocessData(rawData) {

  var preprocessedSeriesArr = [];

  var seriesCount = rawData[0].length - 1;

  var tempArr = [];

  var finalArr = [];

  //create datasets for all series

  for (var i = 0; i < seriesCount; i++) {

    finalArr.push([]);

  }

​

  /*

  finalArr = [

    [{x, h, l}, {x, h, l}],

    [{}, {}]

  ];

  */

​

  // go through years

  for ( i = 0; i < rawData.length; i++) {

    var totalValue = 0;

    //    tempArr.push([rawData[i][0]])

    tempArr.push([])

    // go through series to calculate total value

    for (var k = 1; k <= seriesCount; k++) {

      totalValue += rawData[i][k];

    }

​

    // go throug series to create dataSet with percent ranges

    for (k = 1; k <= seriesCount; k++) {

      var percentValue = rawData[i][k] * 100 / totalValue;

      tempArr[i].push(percentValue);

    }

  }

  // console.log(tempArr);

  //debugger;

  // go through years

  for (i = 0; i < tempArr.length; i++) {

    var previousLow = 100;

    // go through series

    for (k = 0; k < seriesCount; k++) {

      //find max value

      var currentMax = Math.max.apply(null, tempArr[i]);

      //find the series index which value is considered as current max for this year

      var currentIndex = tempArr[i].indexOf(currentMax);

      //      console.log(currentIndex, currentMax);

      // drop this value to 0 to not take it into account later

      tempArr[i][currentIndex] = 0;

​

      // create point for the series with the current max value for the current year

      var point = {

        x: rawData[i][0],

        high: previousLow,

        low: previousLow - currentMax

      };

      previousLow -= currentMax;

      finalArr[currentIndex].push(point);

    }

  }

return finalArr;

}

​

​

​

​

​