Display Numerical Data In Your Maps

Depending on what you want to achieve there are different ways to populate data on a map like arrays and other data sources. However, JSON is the most popular way of passing data to Chart FX Maps, as follows:

var items =
[{"Country":"Argentina","Rate":5.7}{"Country":"Bolivia","Rate":8.0}{"Country":"Brazil","Rate":22.40},{"Country":"Chile","Rate":3.1},{"Country":"Colombia","Rate":33.40},{"Country":"Ecuador","Rate":18.2},{"Country":"Guyana","Rate":17.2},{"Country":"Paraguay","Rate":11.41},{"Country":"Peru","Rate":10.3},{"Country":"Suriname","Rate":4.6{"Country":"Uruguay","Rate":5.9}{"Country":"Venezuela","Rate":69.80}];
chart1.setDataSource(items);

Please note you must make sure your data source coincides with names of shapes contained in a map. These names are provided in a separate txt file that accompanies each map and they can also be read using the Chart FX Maps Shell Extension Handler, both fully documented here.

In addition, you will want to color the different shapes in a map with a specific color depending on a specific data value. This is done by creating conditional attributes by code. The following is a code snippet written in javascript using jChartFX Plus:

//This code assumes you would have already created a target container in your html page for the map called div1.
chart1 = new cfx.Chart();
map = new cfx.Maps.Map();
map.on("loaded", onMapLoaded);
map.setPath("SouthAmerica.cmf");
chart1.setGalleryAttributes(map);
addCondition(chart1, 0, 5000, "#A1DBB2", "#DDDDDD", null);
addCondition(chart1, 5001, 10000, "#FEE5AD", "#DDDDDD", null);
addCondition(chart1, 10001, 50000, "#FACA66", "#DDDDDD", null);

chart1.create(div1);
function addCondition(chart1, from, to, color, borderColor, title) {
  var condAttr = new cfx.ConditionalAttributes();
  condAttr.getCondition().setFrom(from);
  condAttr.getCondition().setTo(to);
  condAttr.setColor(color);
  condAttr.getBorder().setColor(borderColor);
  if (title == null)
    title = from + " - " + to;
  condAttr.setText(title);
  chart1.getConditionalAttributes().add(condAttr);
}

Please note there are different techniques and scenarios for displaying data in a map, we strongly suggest you refer to the different samples provided online so you can see the wealth of data sources and techniques available to populate maps with data.