ChartJS - Configure dxVectorMap
The data used in this demo is obtained using http://en.wikipedia.org
HTML
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.5/js/dx.chartjs.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.5/js/vectormap-data/usa.js"></script>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
JavaScript
var markers = [{
coordinates: [-121.2808, 38.3320],
attributes: {
name: 'Sacramento'
}
}, {
coordinates: [-97.75, 30.25],
attributes: {
name: 'Austin'
}
}, {
coordinates: [-73.7572, 42.6525],
attributes: {
name: 'Albany'
}
}, {
coordinates: [-84.2533, 30.455],
attributes: {
name: 'Tallahassee'
}
}, {
coordinates: [-89.65, 39.783],
attributes: {
name: 'Springfield'
}
}, {
coordinates: [-76.8756, 40.2697],
attributes: {
name: 'Harrisburg'
}
}, {
coordinates: [-82.9833, 39.9833],
attributes: {
name: 'Columbus'
}
}, {
coordinates: [-84.39, 33.755],
attributes: {
name: 'Atlanta'
}
}, {
coordinates: [-84.5467, 42.7336],
attributes: {
name: 'Lansing'
}
}, {
coordinates: [-78.6447, 35.8189],
attributes: {
name: 'Raleigh'
}
}];
var mostPopulatedStates = ['California', 'Texas', 'New York', 'Florida', 'Illinois', 'Pennsylvania', 'Ohio', 'Georgia', 'Michigan', 'North Carolina'];
$(document).ready(function () {
$('#mapContainer').dxVectorMap({
mapData: DevExpress.viz.map.sources.usa,
markers: markers,
bounds: {
minLon: -135,
maxLon: -65,
minLat: 20,
maxLat: 60
},
zoomFactor: 1.25,
background: {
color: 'paleturquoise'
},
areaSettings: {
customize: function (area) {
if (jQuery.inArray(area.attributes.name, mostPopulatedStates) != -1) {
return {
color: 'forestgreen'
}
}
},
color: 'yellowgreen',
selectedColor: 'mediumaquamarine',
selectedBorderColor: 'darkgreen',
selectionMode: 'multiple',
click: function (area) {
area.selected(!area.selected());
...