Search code examples
javascriptjsonamchartsammap

How to use dataloader on ammap


I am trying to use dataloader functionality on ammap but I couldt gain.

Here is how to I try:

var dogum_map = AmCharts.makeChart( "il_bazinda_dogum_say_dagilim", {
                  "type": "map",
                  "data": {
                        "map": "turkeyLow"
                    },
                  "theme": "light",
                  "colorSteps": 10,
                  "dataLoader": {
                        "url": "/dogum/dogum_frekans_verilerini_il_bazinda_hesapla",
                        "format": "json",
                        "showErrors": true
                  },
                  "areasSettings": {
                    "autoZoom": false,
                    "balloonText": "[[value]]",
                    "selectable":true
                  },

                  "valueLegend": {
                    "right": 10,
                    "minValue": "En Az",
                    "maxValue": "En Çok"
                  },

                  "export": {
                    "enabled": true,
                    "fileName":"İl Bazında Doğum Sayıları"
                  }

                } );

There is no problem with json url.This url returns json datas like this:

[{"id":"TR-01","ndogum":1111,"mdogum":22,"sdogum":693,"pdogum":336,"total":2162},{"id":"TR-02","ndogum":423,"mdogum":0,"sdogum":325,"pdogum":147,"total":895},{"id":"TR-03","ndogum":199,"mdogum":1,"sdogum":113,"pdogum":42,"total":355},{"id":"TR-04","ndogum":681,"mdogum":17,"sdogum":180,"pdogum":117,"total":995}]

I want to use as a value on map total.

How can I use with dataloader on ammap?

Thanks


Solution

  • To use the dataLoader with the maps library, your data needs to be the same format as the map's dataProvider object, which includes the map property and areas array. If your data is not formatted that way, then you can use the dataLoader's postProcess callback to create a dataProvider object and return that along with your data. You also need to remap your total property to value in your data so that your balloon and legend will work.

    Here's the dataLoader code:

      "dataLoader": {
        "url": "/dogum/dogum_frekans_verilerini_il_bazinda_hesapla",
        "postProcess": function(data) {
          var dataProvider = {
            "map": "turkeyLow"
          };
          //create new areas array, while adding a value property 
          //to each area containing the value stored in total
          dataProvider.areas = data.map(function(area) {
            area.value = area.total;
            return area;
          });
          return dataProvider;
        }
      },
    

    Codepen demo