html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

$.ajax({

    type: "GET",

    url: "https://static.anychart.com/images/docs/seat_map/house1.svg",

    success: function (svgData) {

    createSeatMap(svgData);

}

    });

});

​

function createSeatMap(svg){

    // create a new seat map

    var chart = anychart.seatMap();

    // load SVG data

    chart.geoData(svg);

    // set the title

    chart.title("Coloring the attributes using classes"); 

    // create new series

    seatMapSeries = chart.choropleth();

    // load data

    seatMapSeries.data([

{id: "Hall", value: "720"},

{id: "Room2", value: "165"},

{id: "WC", value: "49"},

{id: "Room1", value: "143"},

{id: "Kitchen", value: "208"}

    ]);

​

    // load svg-file how it looked(colors stroke/fill except for elements of series)

    chart.unboundRegions("as-is");

​

    // set the fill in the normal state

    seatMapSeries.normal().fill(function () {

var attrs = this.attributes;

if (attrs) return attrs.fill;

if (attrs) {

    // get the class

    var clas = attrs.class;

    switch (clas) {

        case "inner_elements" :

            return "red";

        default:

            return "red";

    }

} else {

    return this.sourceColor;

}

    });

​

    // set the fill in the hover state

    seatMapSeries.hovered().fill(function() {

var attrs = this.attributes;

if (attrs) {

    // get the class

    var clas = attrs.class;

    switch (clas) {

        case "inner_elements" :

            return "red";

        default:

            return anychart.color.lighten(attrs.fill, 0.5);

    }

} else {

    return this.sourceColor;

}

    });

​

    // set the fill in the selected state

    seatMapSeries.selected().fill(function() {

var attrs = this.attributes;

return attrs ? anychart.color.darken(attrs.fill, 0.2) : this.sourceColor;

    });

​

    // set the stroke in the normal state

    seatMapSeries.normal().stroke(function () {

var attrs = this.attributes;

// if the stroke attribute exists in the SVG file then color it with a color set in the document

return attrs ? attrs.stroke : this.sourceColor;

    });

​

    // set the stroke in the hover state

    seatMapSeries.hovered().stroke(function () {

var attrs = this.attributes;

return attrs ? attrs.stroke : this.sourceColor;

    });

​

    // set the stroke in the selected state

    seatMapSeries.selected().stroke(function () {

var attrs = this.attributes;

return attrs ? attrs.stroke : this.sourceColor;

    });

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();  

};