html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    stage = acgraph.create('container');

    $.ajax({

        type: 'GET',

        url: 'https://cdn.anychart.com/svg-data/seat-map/boeing_737.svg',

        // The data that have been used for this sample can be taken from the CDN

        // load SVG image using jQuery ajax

        success: function (svgData) {

            //data for creating a SeatMap

            //from the CDN https://cdn.anychart.com/csv-data/boeing_737.js to data file

            var data = boeingData();

            var chart = anychart.seatMap(data);

            //set svg data,

            chart.geoData(svgData);

            chart.padding([0, 200, 0, 0]);

            //load svg-file how it looked(colors stroke/fill except

            //for elements of series)

            chart.unboundRegions('as-is');

​

            series = chart.getSeries(0);

            //sets fill series

            series.fill(function () {

                var attrs = this.attributes;

​

                return attrs ? attrs.fill : this.sourceColor;

            });

​

            //sets stroke series

            series.stroke(function () {

                var attrs = this.attributes;

​

                return attrs ? attrs.stroke : this.sourceColor;

            });

​

            function returnColorHoverAndSelect() {

                return '#64b5f6';

            }

​

            //sets fill on hover series and select series

            series.hovered().fill(returnColorHoverAndSelect);

            series.selected().fill(returnColorHoverAndSelect);

​

            //Create chart tooltip own title

            series.tooltip().titleFormat(function () {

                return 'Place'

            });

​

            //Create chart tooltip own text

            series.tooltip().format(function () {

                return this.id;

            });

​

​

            //label hover info

            var labelHoverPlaceInfo = chart.label(2);

            var labelHoverPlaceInfoFormat = "<span style='color: #545f69; font-size: 14px'>" +

                "<b>Class</b>: %s<br/><b>Place</b>: %s<br/><b>Price</b>: %s</span>";

            labelHoverPlaceInfo.padding(10).useHtml(true).hAlign("left");

            labelHoverPlaceInfo.position("right-top");

            labelHoverPlaceInfo.anchor("right-top");

            labelHoverPlaceInfo.offsetY(85);

            labelHoverPlaceInfo.offsetX(20);

            labelHoverPlaceInfo.width(250);

            labelHoverPlaceInfo.background({

                fill: '#FCFCFC',

                stroke: '#E1E1E1',

                corners: 3,

                cornerType: 'ROUND'

            }).enabled(true);

            labelHoverPlaceInfo.text(anychart.format.subs(labelHoverPlaceInfoFormat, '-', '-', '0'));

​

            //label select info

            var labelSelectPlace = chart.label(3);

            var labelSelectPlaceFormat = "<span style='color: #545f69; font-size: 14px'>" +

                "<b>Seat Reservation<br/></b><b>Places</b>: %s<br/><b>Total Price</b>: %s</span>";

            labelSelectPlace.padding(10).useHtml(true).hAlign("left");

            labelSelectPlace.position("right-top");

            labelSelectPlace.anchor("right-top");

            labelSelectPlace.offsetY(160);

            labelSelectPlace.offsetX(20);

            labelSelectPlace.width(250);

            labelSelectPlace.background({

                fill: '#FCFCFC',

                stroke: '#E1E1E1',

                corners: 3,

                cornerType: 'ROUND'

            }).enabled(true);

            labelSelectPlace.text(anychart.format.subs(labelSelectPlaceFormat, '-', '0'));

​

​

            function placeInfoFunc(id) {

                const ECONOM_PLUS_ROW_MIN = 21;

                var regBusinessClass = /[1-3]{1}-(A|B|E|F)/;

                var regeconomClass = /([7-9]{1}|[0-9]{2})-(A|B|C|D|E|F)/;

​

                var businessClass = id.match(regBusinessClass) ? id.match(regBusinessClass)[0] : false;

                var economPlusClass = id.match(regeconomClass) && id.match(regeconomClass)[1] <= ECONOM_PLUS_ROW_MIN ? id.match(regeconomClass)[0] : false;

                var economClass = id.match(regeconomClass) && id.match(regeconomClass)[1] > ECONOM_PLUS_ROW_MIN ? id.match(regeconomClass)[0] : false;

​

                switch (id) {

                    case businessClass :

                        return {

                            place: id,

                            class: 'Business Class',

                            price: '350$'

                        };

                    case economPlusClass :

                        return {

                            place: id,

                            class: 'Econom-Plus Class',

                            price: '250$'

                        };

                    case economClass :

                        return {

                            place: id,

                            class: 'Econom Class',

                            price: '150$'

                        };

                }

            }

​

            //add pointsHover listener to get hovered place info

            chart.listen('pointsHover', function (point) {

                var placeInfo;

                if (point.seriesStatus[0].points[0] !== undefined) {

                    placeInfo = placeInfoFunc(point.seriesStatus[0].points[0].id);

                    labelHoverPlaceInfo.text(anychart.format.subs(labelHoverPlaceInfoFormat, placeInfo.class, placeInfo.place, placeInfo.price));

                }

            });

​

            //add pointsSelect listener to get select place info

            chart.listen('pointsSelect', function (points) {

                var placesInfo = points.seriesStatus[0].points;

                var placesId = [];

                var totalPrice = 0;

​

                if (chart.getSelectedPoints().length) {

​

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

                        placesId.push(points.seriesStatus[0].points[i].id);

                        totalPrice += parseInt(placeInfoFunc(points.seriesStatus[0].points[i].id).price);

                    }

​

                    totalPrice += '$';

​

                    labelSelectPlace.text(anychart.format.subs(labelSelectPlaceFormat, placesId, totalPrice)).background({

                        fill: '#E5EEF5'

                    });

                }

​

            });

​

            //add chartClick listener to reset labelSelectPlace values

            chart.listen('click', function () {

                if (chart.getSelectedPoints().length == 0) {

                    labelSelectPlace.background({

                        fill: '#FCFCFC'

                    });

                    labelHoverPlaceInfo.text(anychart.format.subs(labelHoverPlaceInfoFormat, '-', '-', '0'));

                    labelSelectPlace.text(anychart.format.subs(labelSelectPlaceFormat, '-', '0'));

                }

            });

​

            //create zoom controls

            var zoomController = anychart.ui.zoom();

            zoomController.render(chart);

​

            //set container id for the chart

            chart.container(stage);

​

            //initiate chart drawing

            chart.draw();

​

        }

    });

});