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("Color Range creating"); 

​

    // set the ranges for the scale and corresponding colors

    colorScale = anychart.scales.ordinalColor();

    colorScale.ranges([

{from: 0, to: 3.5, color: "#FCEF86"},

{from: 4, to: 5.5, color: "#EC8A00"},

{from: 6, to: 7.5, color: "#1368C4"},

{from: 8, to: 12, color: "#9F0856"}

    ]);

​

​

    // create and enable the colorRange

    chart.colorRange(true);    

​

    // create a series with the data that comes from the function defined below

    series = chart.choropleth(getData());

    // set color scale to a series

    series.colorScale(colorScale);

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();  

};

​

// function to load the data

function getData(){

    // put the data into the data set

    var dataSet = 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"},

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ]);

    return dataSet;

}