I am trying to achieve this behaviour:
->Color depend on one array value and Size of the circle on another array value.
I referred this site which suits my requirement a half-
I wanted to assign colors for each circle not the ranges of colors. Meaning on runtime the colors of each circle needs to decided.
I am trying the following code but i get only the ranges of colors not the individual colors. Please help me resolve the issue!
$.each(result, function (key, filter) {
circleSize.push(parseInt(filter.Count));
Shades.push(filter.ChangeVal);
coords.push([filter.Latitude, filter.Longitude]);
if (filter.ChangeVal > 10) {
scaleVal.push('#3f347e');
}
else if (filter.ChangeVal >= -10 && filter.ChangeVal <= 10) {
scaleVal.push('#7e6434');
}
else if (filter.ChangeVal < -10) {
scaleVal.push('#7e344e');
}
});
var CircleSizes = Array.prototype.concat.apply([], circleSize);
var mShades = Array.prototype.concat.apply([], Shades);
$('#state-rmap').vectorMap({
map: 'state_map',
backgroundColor: '#FFFFFF',
markers: coords,
regionStyle: {
initial: {
stroke: '#ca9731',
"stroke-width": 2,
"stroke-opacity": 1
}
},
series: {
markers: [{
attribute: 'fill',
scale: scaleVal,
values: mShades,
min: jvm.min(mShades),
max: jvm.max(mShades)
},
{
attribute: 'r',
scale: [8, 20],
values: CircleSizes,
min: jvm.min(CircleSizes),
max: jvm.max(CircleSizes)
}]
},
onMarkerLabelShow: function (event, label, index) {
label.html("<div />");
},
onRegionLabelShow: function (event, label) { label.html("<div />"); }
});