HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
$.ajax({
3
type: "GET",
4
url: "https://static.anychart.com/images/docs/seat_map/house.svg",
5
success: function (svgData) {
6
createSeatMap(svgData);
7
}
8
});
9
});
10
11
function createSeatMap(svg){
12
// create a new seat map
13
var chart = anychart.seatMap();
14
// load SVG data
15
chart.geoData(svg);
16
// set the title
17
chart.title("Load SVG map through the AJAX request");
18
// create new series
19
seatMapSeries = chart.choropleth();
20
// load data
21
seatMapSeries.data([
22
{id: "Hall", value: "720"},
23
{id: "Room2", value: "165"},
24
{id: "WC", value: "49"},
25
{id: "Room1", value: "143"},
26
{id: "Kitchen", value: "208"}
27
]);
28
29
// set container id for the chart
30
chart.container("container");
31
// initiate chart drawing
32
chart.draw();
33
};