Dynamically updating heat map values
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/southAfricaLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
colorSteps: 10,
dataProvider: {
map: "southAfricaLow",
areas: { id: "ZA-EC,
title: "Eastern Cape",
value:10
},
{
id: "ZA-FS",
title: "Free State ",
value:10
},
{
id: "ZA-GT",
title: "Gauteng",
value:10,
},
{
id: "ZA-LP",
title: "Limpopo",
value:10
},
{
id: "ZA-MP",
title: "Mpumalanga",
value:10
},
{
id: "ZA-NC",
title: "Northern Cape",
},
{
id: "ZA-NL",
title: "KwaZulu-Natal :",
},
{
id: "ZA-NW",
title: "North West",
value:10
},
{
id: "ZA-WC",
title: "Western Cape ",
value:10
}
]
},
areasSettings: {
autoZoom: true
},
valueLegend: {
right: 10,
minValue: "little",
maxValue: "a lot!"
}
});
setInterval(function () {
for(var x in map.dataProvider.areas) {
map.dataProvider.areas[x].value = Math.round( Math.random() * 500000 + 100000 );
}
map.validateData();
}, 3000);