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/theatre_seating_plan.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("Chart palette"); 

​

    palette = anychart.palettes.rangeColors();

    palette.items(["#F44336", "#FCEF86"]);

    palette.count(8);

​

    // setting custom colors to the chart palette

    chart.palette(palette);

​

    // setting the data

    chart.choropleth([            

    {id: "r1s1", value: 12},

    {id: "r1s2", value: 12},

    {id: "r1s3", value: 12},

    {id: "r1s4", value: 12},

    {id: "r1s5", value: 12},

    {id: "r1s6", value: 12}])

.name("Row 1");

​

    chart.choropleth([        

    {id: "r2s1", value: 12},

    {id: "r2s2", value: 12},

    {id: "r2s3", value: 12},

    {id: "r2s4", value: 12},

    {id: "r2s5", value: 12},

    {id: "r2s6", value: 12},

    {id: "r2s7", value: 12},

    {id: "r2s8", value: 12}])

.name("Row 2");

​

    chart.choropleth([  

    {id: "r3s1", value: 5.5},

    {id: "r3s2", value: 10},

    {id: "r3s3", value: 10},

    {id: "r3s4", value: 10},

    {id: "r3s5", value: 10},

    {id: "r3s6", value: 5.5}])

.name("Row 3");

​

    chart.choropleth([

    {id: "r4s1", value: 5.5},

    {id: "r4s2", value: 5.5},

    {id: "r4s3", value: 10},

    {id: "r4s4", value: 10},

    {id: "r4s5", value: 10},

    {id: "r4s6", value: 10},

    {id: "r4s7", value: 5.5},

    {id: "r4s8", value: 5.5}])

.name("Row 4");

​

    chart.choropleth([

    {id: "r5s1", value: 5.5},

    {id: "r5s2", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s3", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s4", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s3", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s4", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s5", value: 10},

    {id: "r5s6", value: 10},

    {id: "r5s7", value: 10},

    {id: "r5s8", value: 10},

    {id: "r5s9", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s10", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s11", value: 3.5, extra: "RESTRICTED VIEW"},

    {id: "r5s12", value: 5.5}])

.name("Row 5");

​

    chart.choropleth([

    {id: "r6s1", value: 5.5},

    {id: "r6s2", value: 5.5},

    {id: "r6s3", value: 7.5},

    {id: "r6s4", value: 7.5},

    {id: "r6s5", value: 10},

    {id: "r6s6", value: 10},

    {id: "r6s7", value: 10},

    {id: "r6s8", value: 10},

    {id: "r6s9", value: 7.5},

    {id: "r6s10", value: 7.5},

    {id: "r6s11", value: 5.5},

    {id: "r6s12", value: 5.5}])

.name("Row 6");

​

    chart.choropleth([

    {id: "r7s1", value: 5.5},

    {id: "r7s2", value: 5.5},

    {id: "r7s3", value: 7.5},

    {id: "r7s4", value: 7.5},

    {id: "r7s5", value: 10},

    {id: "r7s6", value: 10},

    {id: "r7s7", value: 10},

    {id: "r7s8", value: 10},

    {id: "r7s9", value: 7.5},

    {id: "r7s10", value: 7.5},

    {id: "r7s11", value: 5.5},

    {id: "r7s12", value: 5.5}])

.name("Row 7");

​

    chart.choropleth([

    {id: "r8s1", value: 5.5},

    {id: "r8s2", value: 5.5},

    {id: "r8s3", value: 7.5},

    {id: "r8s4", value: 7.5},

    {id: "r8s5", value: 10},

    {id: "r8s6", value: 10},

    {id: "r8s7", value: 10},

    {id: "r8s8", value: 10},

    {id: "r8s9", value: 7.5},

    {id: "r8s10", value: 7.5},

    {id: "r8s11", value: 5.5},

    {id: "r8s12", value: 5.5}])

.name("Row 8");

​

    // set the tooltips

    chart.tooltip().titleFormat("{%seriesName}");

    chart.tooltip().format("${%value}");

    chart.legend().enabled(true).position("bottom").padding({top: 15});

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();  

};