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

    dataSet_row_1 = anychart.data.set([            

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

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

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

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

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

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

    ]);

​

    dataSet_row_2 = anychart.data.set([        

{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"}

    ]);

​

    dataSet_row_3 = anychart.data.set([  

{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"}

    ]);

​

    dataSet_row_4 = anychart.data.set([

{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"}

    ]);

​

    dataSet_row_5 = anychart.data.set([

{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"}

    ]);

​

    dataSet_row_6 = anychart.data.set([

{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"}

    ]);

​

    dataSet_row_7 = anychart.data.set([

{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"}

    ]);

​

    dataSet_row_8 = anychart.data.set([

{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"}

    ]);

​

    series_row_1 = chart.choropleth(dataSet_row_1);

    series_row_2 = chart.choropleth(dataSet_row_2);

    series_row_3 = chart.choropleth(dataSet_row_3);

    series_row_4 = chart.choropleth(dataSet_row_4);

    series_row_5 = chart.choropleth(dataSet_row_5);

    series_row_6 = chart.choropleth(dataSet_row_6);

    series_row_7 = chart.choropleth(dataSet_row_7);

    series_row_8 = chart.choropleth(dataSet_row_8);

​

    // set the tooltips

    series_row_1.tooltip().titleFormat("Row 1");

    series_row_1.tooltip().format("?{%Value}");

​

    series_row_2.tooltip().titleFormat("Row 2");

    series_row_2.tooltip().format("?{%Value}");

​

    series_row_3.tooltip().titleFormat("Row 3");

    series_row_3.tooltip().format("?{%Value}");

​

    series_row_4.tooltip().titleFormat("Row 4");

    series_row_4.tooltip().format("?{%Value}");

​

    series_row_5.tooltip().titleFormat("Row 5");

    series_row_5.tooltip().format("?{%Value}");

​

    series_row_6.tooltip().titleFormat("Row 6");

    series_row_6.tooltip().format("?{%Value}");

​

    series_row_7.tooltip().titleFormat("Row 7");

    series_row_7.tooltip().format("?{%Value}");

​

    series_row_8.tooltip().titleFormat("Row 8");

    series_row_8.tooltip().format("?{%Value}");

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();  

};