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/theatre_seating_plan.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
// setting the data
15
dataSet = anychart.data.set([
16
{id: "r1s1", value: "12"},
17
{id: "r1s2", value: "12"},
18
{id: "r1s3", value: "12"},
19
{id: "r1s4", value: "12"},
20
{id: "r1s5", value: "12"},
21
{id: "r1s6", value: "12"},
22
{id: "r2s1", value: "12"},
23
{id: "r2s2", value: "12"},
24
{id: "r2s3", value: "12"},
25
{id: "r2s4", value: "12"},
26
{id: "r2s5", value: "12"},
27
{id: "r2s6", value: "12"},
28
{id: "r2s7", value: "12"},
29
{id: "r2s8", value: "12"},
30
{id: "r3s2", value: "10"},
31
{id: "r3s3", value: "10"},
32
{id: "r3s4", value: "10"},
33
{id: "r3s5", value: "10"},
34
{id: "r5s5", value: "10"},
35
{id: "r5s6", value: "10"},
36
{id: "r5s7", value: "10"},
37
{id: "r5s8", value: "10"},
38
{id: "r6s5", value: "10"},
39
{id: "r6s6", value: "10"},
40
{id: "r6s7", value: "10"},
41
{id: "r6s8", value: "10"},
42
{id: "r7s5", value: "10"},
43
{id: "r7s6", value: "10"},
44
{id: "r7s7", value: "10"},
45
{id: "r7s8", value: "10"},
46
{id: "r8s5", value: "10"},
47
{id: "r8s6", value: "10"},
48
{id: "r8s7", value: "10"},
49
{id: "r8s8", value: "10"},
50
{id: "r3s1", value: "5.5"},
51
{id: "r3s6", value: "5.5"},
52
{id: "r4s1", value: "5.5"},
53
{id: "r4s2", value: "5.5"},
54
{id: "r4s3", value: "10"},
55
{id: "r4s4", value: "10"},
56
{id: "r4s5", value: "10"},
57
{id: "r4s6", value: "10"},
58
{id: "r4s7", value: "5.5"},
59
{id: "r4s8", value: "5.5"},
60
{id: "r4s9", value: "5.5"},
61
{id: "r4s10", value: "5.5"},
62
{id: "r5s1", value: "5.5"},
63
{id: "r5s2", value: "3.5", extra: "RESTRICTED VIEW"},
64
{id: "r5s11", value: "3.5", extra: "RESTRICTED VIEW"},
65
{id: "r5s12", value: "5.5"},
66
{id: "r6s1", value: "5.5"},
67
{id: "r6s2", value: "5.5"},
68
{id: "r6s11", value: "5.5"},
69
{id: "r6s12", value: "5.5"},
70
{id: "r7s1", value: "5.5"},
71
{id: "r7s2", value: "5.5"},
72
{id: "r7s11", value: "5.5"},
73
{id: "r7s12", value: "5.5"},
74
{id: "r8s1", value: "5.5"},
75
{id: "r8s2", value: "5.5"},
76
{id: "r8s11", value: "5.5"},
77
{id: "r8s12", value: "5.5"},
78
79
{id: "r5s3", value: "3.5", extra: "RESTRICTED VIEW"},
80
{id: "r5s4", value: "3.5", extra: "RESTRICTED VIEW"},
81
{id: "r5s9", value: "3.5", extra: "RESTRICTED VIEW"},
82
{id: "r5s10", value: "3.5", extra: "RESTRICTED VIEW"},
83
84
{id: "r6s3", value: "7.5"},
85
{id: "r6s4", value: "7.5"},
86
{id: "r6s9", value: "7.5"},
87
{id: "r6s10", value: "7.5"},
88
89
{id: "r7s3", value: "7.5"},
90
{id: "r7s4", value: "7.5"},
91
{id: "r7s9", value: "7.5"},
92
{id: "r7s10", value: "7.5"},
93
94
{id: "r8s3", value: "7.5"},
95
{id: "r8s4", value: "7.5"},
96
{id: "r8s9", value: "7.5"},
97
{id: "r8s10", value: "7.5"},
98
]);
99
// load SVG data
100
chart.geoData(svg);
101
// set the title
102
chart.title("Color Range with Color Scale");
103
series = chart.choropleth(dataSet);
104
105
// set the tooltips
106
series.tooltip().titleFormat(function() {
107
if (this.value == 12) return "Best seats (Rows 1-2)";
108
if (this.value == 10) return "Best seats (Rows 3-8)";
109
if (this.value == 7.5) return "Back seats";
110
if (this.value == 5.5) return "Side seats";
111
if (this.value == 3.5) return "Side seats \nRESTRICTED VIEW";
112
});
113
114
// set the ranges for the scale
115
currentColorScale = anychart.scales.ordinalColor();
116
currentColorScale.ranges([
117
{from: 0, to: 3.5},
118
{from: 4, to: 5.5},
119
{from: 6, to: 7.5},
120
{from: 8, to: 12}
121
]);
122
123
// set the single hue progression
124
var colors = anychart.color.singleHueProgression("#336666");
125
126
// define the colors
127
currentColorScale.colors(colors);
128
series.colorScale(currentColorScale);
129
130
// create and enable the colorRange
131
var colorRange = chart.colorRange();
132
colorRange.enabled(true);
133
134
// set container id for the chart
135
chart.container("container");
136
// initiate chart drawing
137
chart.draw();
138
};