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: 50%;

            display: inline-block; 

            float: left;

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

​

        #container3 {

            /* border: 1px solid blue; */

            width: 30%;

            height: 50%;

            float: left;

            /*width: 600px;*/

            /*height: 400px;*/

            /*margin-left: 50px;*/

            /*margin-top: 30px;*/

        }

​

var area;

var pie;

var circlePacking;

​

var dataSet = anychart.data.set([

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

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

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

    ['Apr 2022', 1100, 450, 900, 750],

    ['May 2022', 1300, 650, 550, 0],

    ['Jun 2022', 720, 350, 150, 650],

    ['Jul 2022', 950, 0, 0, 850],

    ['Aug 2022', 1050, 800, 0, 1400],

    ['Sep 2022', 1250, 640, 0, 900],

    ['Oct 2022', 1100, 370, 450, 150],

    ['Nov 2022', 1050, 350, 0, 0],

    ['Dec 2022', 900, 170, 0, 100],

]);

​

function createArea() {

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

​

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

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

​

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

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

​

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

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

​

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

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

​

    // create bar chart

    area = anychart.area();

​

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

​

    // helper function to setup label settings for all series

    function setupSeriesLabels(series, name) {

        series.name(name)

            .stroke('3 #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);

    };

​

    var series1 = area.splineArea(seriesData_1);

    setupSeriesLabels(series1, 'QLIK Prortal');

​

    // create second series with mapped data

    var series2 = area.splineArea(seriesData_2);

    setupSeriesLabels(series2, 'Circular gauge');

​

    // create third series with mapped data

    var series3 = area.splineArea(seriesData_3);

    setupSeriesLabels(series3, 'Decomosition tree');

​

    // create fourth series with mapped data

    var series4 = area.splineArea(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('Monthly bablo 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');

    })

}

​

function createPie() {

    pie = anychart.pie([

        { x: 'QLIK Prortal', 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();

};

​

anychart.onDocumentReady(function () {

    createArea();

    createPie();

    createCirclePacking();

});