We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-map.min.js"></script><scriptsrc="https://code.jquery.com/jquery-latest.min.js"></script><linkhref="https://cdn.anychart.com/playground-css/seat-map/seat-map-title.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){var stage = acgraph.create('container');$('#container').append('<div class="seat-map-title">'+'<h1>Reservation of seats in Chamber theatre.</h1>'+'<p>Source <a href="https://cdn.anychart.com/svg-data/'+'seat-map/theater.svg"'+'target="_blank">SVG Image</a></p></div>');// get svg file
$.ajax({
type:'GET',
url:'https://cdn.anychart.com/svg-data/seat-map/theater.svg',// The data that have been used for this sample can be taken from the CDN// load SVG image using jQuery ajaxsuccess:function(svgData){// Data for creating a SeatMapvar chart = anychart.seatMap([{ id:'1', value:'Row - 1'},{ id:'2', value:'Row - 1'},{ id:'3', value:'Row - 1'},{ id:'4', value:'Row - 2'},{ id:'5', value:'Row - 2'},{ id:'6', value:'Row - 2'},{ id:'7', value:'Row - 3'},{ id:'8', value:'Row - 3'},{ id:'9', value:'Row - 3'},{ id:'10', value:'Row - 4'},{ id:'11', value:'Row - 4'},{ id:'12', value:'Row - 4'}]);// set svg data
chart.geoData(svgData);
chart.padding([70,20,50,20]);// create chart legend
chart
.legend().enabled(true)// items source mode categories.itemsSourceMode('categories').position('right').itemsLayout('vertical');var series = chart.getSeries(0);// Set color scale.
series.colorScale(
anychart.scales.ordinalColor([{ equal:'Row - 4', color:'#109BC7'},{ equal:'Row - 3', color:'#109BC7'},{ equal:'Row - 2', color:'#109BC7'},{ equal:'Row - 1', color:'#d38d5f'}]));// sets fill series
series.fill(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'rect':return attrs.fill;default:return'#fff';}}else{returnthis.sourceColor;}});// sets stroke series
series.stroke(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'rect':return attrs.stroke;default:return'#467fac';}}else{returnthis.sourceColor;}});
series.tooltip().title().useHtml(true);// set tooltip settings
series
.tooltip().useHtml(true).titleFormat(function(){var col =this.id;varVIP=3;if(col <=VIP){return'<strong style="color: gold;">VIP Place:</strong>';}return'<strong>Place:</strong>';}).format(function(){var row =this.value;// col data from svg-file attributevar col =this.regionProperties.col;return row +'<br>Col - '+ col;});// sets fill on hover series
series.hovered().fill(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'chair-color-1':return anychart.color.darken('#109BC7',0.25);case'chair-color-2':return'#109BC7';case'chair-color-3':return anychart.color.darken('#109BC7',0.75);case'chair-color-4':return'#09546C';case'chair-vip-color-1':return anychart.color.darken('#d38d5f',0.25);case'chair-vip-color-2':return'#d38d5f';case'chair-vip-color-3':return anychart.color.darken('#6b3c1e',0.75);case'chair-vip-color-4':return anychart.color.darken('#6b3c1e',0.1);case'rect':return attrs.fill;default:returnthis.sourceColor;// It returns the original color for// those elements that are not fill over}}});// sets stroke on hover series
series.hovered().stroke(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'rect':return attrs.stroke;default:return'#000 0.3';// It returns the original color for// those elements that are not fill over}}});// sets fill on select series
series.selected().fill(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'rect':return attrs.fill;default:return'#455a64';// It returns the original color for// those elements that are not fill over}}});// sets fill on select series
series.selected().stroke(function(){var attrs =this.attributes;if(attrs){// attr in svg.filevar itemClass = attrs.class;switch(itemClass){case'rect':return attrs.stroke;default:return'#000';// It returns the original color for// those elements that are not fill over}}});// label infovar labelInfo = chart.label();
labelInfo
.useHtml(true).padding(10).hAlign('left').position('left-top').anchor('left-top').offsetY(75).offsetX(20).width(265).text('<span style="color: #545f69; font-size: 14px;">'+'<b>Please select a location.</b><br><br>You can do this by '+'clicking on the<br>desired location , so you can select'+'<br>multiple locations with the aid<br>of a combination '+'of keys:<br><b><i>shift/ctrl'+' + target place</i></b>.</span>');
labelInfo.background({
fill:'#FCFCFC',
stroke:'#E1E1E1',
corners:3,
cornerType:'ROUND'});// set container id for the chart
chart.container(stage);// initiate chart drawing
chart.draw();}});});</script></body></html>