html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

#container1 {

            /* border: 1px solid blue; */

            width: 65%;

            height: 100%;

            float:left;

            /*float: left;*/

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

​

        #container2 {

            /* border: 1px solid blue; */

            width: 30%;

            height: 33%;

            display: inline-block; 

            float: left;

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

​

        #container3 {

            /* border: 1px solid blue; */

            width: 30%;

            height: 33%;

            float: left;

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

#container4 {

            /* border: 1px solid blue; */

            width: 30%;

            height: 34%;

            float: left;

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

​

​

let treeMap;

let area;

let pie;

let circlePacking;

​

let rawData = [

    ['Jan 2022', 2000,    0, 1200,  500],

    ['Feb 2022', 2000,    0, 1100,  700],

    ['Mar 2022', 2000,  250, 1300, 1100],

    ['Apr 2022', 2000,  450, 2900,  750],

    ['May 2022', 2000,  650, 1550,    0],

    ['Jun 2022', 2000,  350, 1150,    0],

    ['Jul 2022', 2000,    0,    0,    0],

    ['Aug 2022', 2000,    0,    0,    0],

    ['Sep 2022', 2000,    0,    0,    0],

    ['Oct 2022', 2000,    0,    0,    0],

    ['Nov 2022', 2000,    0,    0,    0],

    ['Dec 2022', 2000,    0,    0,    0],

];

​

​

​

let dataSetClear = anychart.data.set(rawData);

let dataSetAcc = accumulate(rawData);

​

function split(data){

createArea(dataSetClear);

}

​

function accumulated(data){

createArea(dataSetAcc);

}

​

function accumulate(data){

  var arrAccumulated = accumulateValues(data);

  return anychart.data.set(arrAccumulated);

}

​

function accumulateValues(inputArray) {

  let accumulatedArray = [];

        accumulatedArray.push(inputArray[0]);

​

    for (let i = 1; i < inputArray.length; i++) {

        let accumulatedRow = [];

        accumulatedRow.push(inputArray[i][0]);

        for (let j = 1; j < inputArray[0].length; j++) {

            accumulatedValue = accumulatedArray[i-1][j] +  inputArray[i][j];

            accumulatedRow.push(accumulatedValue);

        }

​

        accumulatedArray.push(accumulatedRow);

    }

​

    return accumulatedArray;

}

​

function createArea(dataSet) {

    // map data for the first series, take x from the zero area and value from the first area of data set

    var seriesData_1 = dataSet.mapAs({ 'x': 0, 'value': 1 });

    var seriesData_2 = dataSet.mapAs({ 'x': 0, 'value': 2 });

    var seriesData_3 = dataSet.mapAs({ 'x': 0, 'value': 3 });

    var seriesData_4 = dataSet.mapAs({ 'x': 0, 'value': 4 });

    var seriesData_5 = dataSet.mapAs({ 'x': 0, 'value': 5 });

​

    if (area) area.dispose();

    // create area chart

    area = anychart.column();

  area.minPointLength(10);

​

    var crosshair = area.crosshair();

    crosshair.enabled(true).yStroke(null).xStroke('#fff').zIndex(39);

    crosshair.yLabel().enabled(false);

​

    area.yScale().stackMode('value');

​

    // set chart title text settings

    area.title('Financial expenses');

  area.padding().left(100);

area.pointWidth("100%");

    // helper function to setup label settings for all series

    function setupSeriesLabels(series, name) {

        series.name(name)

            .stroke('0 #fff 1')

            .fill(function () {

                return this.sourceColor + ' 0.8'

            });

        series.hovered().stroke('3 #fff 1');

        series.hovered().markers()

            .enabled(true)

            .type('circle')

            .size(4)

            .stroke('1.5 #fff');

        series.markers().zIndex(100);

      series.labels().enabled(true);

      series.labels().position('left-center');

      series.labels().anchor('right-center');

      series.clip(false);

​

      series.labels().format(function(){

        if (this.index==0) return this.seriesName;

      });

    };

​

    var series1 = area.column(seriesData_1);

    setupSeriesLabels(series1, 'QLIK Portal');

​

    // create second series with mapped data

    var series2 = area.column(seriesData_2);

    setupSeriesLabels(series2, 'Circular gauge');

​

    // create third series with mapped data

    var series3 = area.column(seriesData_3);

    setupSeriesLabels(series3, 'Decomposition tree');

​

    // create fourth series with mapped data

    var series4 = area.column(seriesData_4);

    setupSeriesLabels(series4, 'Combo Chart');

​

    // turn on legend

    area.legend().enabled(true);

​

    // set titles for axises

    area.xAxis().title(false);

    area.xAxis().orientation('top');

​

    area.yAxis().title('Spent, $');

​

    // enable grids

    area.yGrid().stroke('#ddd');

    area.xGrid().stroke('#ddd');

​

  /*

    area.tooltip().titleFormat(function () {

        const total = this.points.reduce((acc, curr) => {

            return acc + curr.value;

        }, 0)

        return `${this.x}, sum: ${total}$`;

    });*/

​

    // interactivity and tooltip settings

    area.interactivity().hoverMode('by-x');

​

    // set container id for the chart

    area.container('container1');

​

    // initiate chart drawing

    area.draw();

​

//    area.yAxis().scale().inverted(true);

​

    area.listen('pointmousemove', e => {

        const { pointIndex } = e;

​

        // console.log(e);

​

        var seriesList = [];

        for (var i = 0; i < area.getSeriesCount(); i++) {

            seriesList.push(area.getSeriesAt(i));

        }

​

        var x = '';

        const points = seriesList.map(series => {

            const point = series.getPoint(pointIndex);

            x = point.get('x');

            return point.get('value');

        });

​

        // console.log(points);

​

        var pieData = points.map((val, index) => {

            return {

                x: area.getSeriesAt(index).name(),

                value: val || 0.001

            }

        });

        pie.title(x);

        pie.data(pieData);

​

        var cpData = points.map((val, index) => {

            return {

                name: area.getSeriesAt(index).name(),

                value: val || 0.001

            }

        });

        circlePacking.data(cpData, 'as-tree');

        var tmData = [{name: 'projects', children: cpData}];

        treeMap.data(tmData, 'as-tree');

    })

}

​

function createPie() {

    pie = anychart.pie([

        { x: 'QLIK Portal', value: 1000 },

        { x: 'Circular gauge', value: 0 },

        { x: 'Decomposition tree', value: 1200 },

        { x: 'Combo chart', value: 500 },

    ]);

​

    pie.labels()

        .format('{%X}\n{%PercentValue}{decimalsCount:1,zeroFillDecimals:true}%')

        .fontSize(8);

​

    pie.legend(false);

    pie.title('Jan 2022');

    pie.container('container2');

    pie.draw();

}

​

function createCirclePacking() {

    // create data

    var data = [

        { name: 'QLIK Prortal', value: 1000 },

        { name: 'Circular gauge', value: 0 },

        { name: 'Decomposition tree', value: 1200 },

        { name: 'Combo chart', value: 500 },

    ];

​

    // create a chart and set the data

    circlePacking = anychart.circlePacking(data, 'as-tree');

​

    // set the container id

    circlePacking.container("container3");

​

    circlePacking.labels().enabled(true).fontSize(12).position('center').anchor('center').format(function () {

        const { name, value } = this;

        return value > 0.001 ? `${name}\n${value}$` : '';

    });

​

    // initiate drawing the chart

    circlePacking.draw();

};

​

function createTreemap() {

    // create data

    var data = [

      {name: 'projects', children:[

        { name: 'QLIK Portal', value: 1000 },

        { name: 'Circular gauge', value: 0 },

        { name: 'Decomposition tree', value: 1200 },

        { name: 'Combo chart', value: 500 }

        ]

      }

    ];

​

    // create a chart and set the data

    treeMap = anychart.treeMap(data, 'as-tree');

​

    // set the container id

    treeMap.container("container4");

​

   /* circlePacking.labels().enabled(true).fontSize(12).position('center').anchor('center').format(function () {

        const { name, value } = this;

        return value > 0.001 ? `${name}\n${value}$` : '';

    });

    */

​

    // initiate drawing the chart

    treeMap.draw();

};

​

anychart.onDocumentReady(function () {

    createArea(dataSetClear);

    createPie();

    createCirclePacking();

    createTreemap();

​

});