Exporting MapChart data

amCharts 4 exporting functionality can export not only visual representation of the chart, but also its data. However, for MapChart which does not have central or clear-cut data, it's disabled by default. This tutorial will show how you can re-enable selective data export for your maps.

Enabling data export

Determining data source

Before we go further, let's ask ourselves: what is the data that we want to export?

On regular charts it's easy: it's an array of data points that chart is plotted from.

On a map, it's not as straightforward. This means we will need to determine what is exportable data.

It may be a list of marker coordinates on a MapImageSeries. Or heatmap data for MapPolygonSeries.

Let's use the latter as an example. As a base chart, let's take this Coropleth demo.

The data attached to our series, which uses heat rules to color polygons looks like this:

[
  { id: "US-AL", value: 4447100 },
  { id: "US-AK", value: 626932 },
  { id: "US-AZ", value: 5130632 },
  { id: "US-AR", value: 2673400 },
  { id: "US-CA", value: 33871648 },
  // ...
]

Good. Let's export that.

Setting up adapter

Now, we need a way to instruct Export to use our series's data as a exportable data.

For that we can use "data" adapter.

chart.exporting.adapter.add("data", function(data) {
  data.data = polygonSeries.data;
  return data;
});

chart.exporting.adapter.add("data", function(data) {
  data.data = polygonSeries.data;
  return data;
});

{
  // ...
  "exporting": {
    // ..
    "adapter": {
      "data":  function(data, target) {
        var chart = target.baseSprite;
        var polygonSeries = chart.series.getIndex(0);
        data.data = polygonSeries.data;
        return data;
      }
    }
  }
}

Quick reharsh: adapter is a custom function that can be used to modify value of any property before it is used. More info.

In this case we are replacing data which Export is trying to use and which comes out as empty on a MapChart, with data of our MapPolygonSeries.

The catch

There is a catch, though: MapPolygonSeries' data is usually populated with a GeoJSON cooridnates. If we just used the above code, it would work, but exported data would contain the geographical data as well, which we don't want.

We'll need to modify our adapter code to do some pruning:

chart.exporting.adapter.add("data", function(data) {
  data.data = [];
  for(let i = 0; i < polygonSeries.data.length; i++) {
    let row = polygonSeries.data[i];
    data.data.push({
      id: row.id,
      value: row.value
    });
  }
  return data;
});

chart.exporting.adapter.add("data", function(data) {
  data.data = [];
  for(var i = 0; i < polygonSeries.data.length; i++) {
    var row = polygonSeries.data[i];
    data.data.push({
      id: row.id,
      value: row.value
    });
  }
  return data;
});

{
  // ...
  "exporting": {
    // ..
    "adapter": {
      "data":  function(data, target) {
        var chart = target.baseSprite;
        var polygonSeries = chart.series.getIndex(0);
        data.data = [];
        for(var i = 0; i < polygonSeries.data.length; i++) {
          var row = polygonSeries.data[i];
          data.data.push({
            id: row.id,
            value: row.value
          });
        } 
        return data;
      }
    }
  }
}

You might need to modify this to suit your specific requirements, like using data from other series, combining multiple series, or even using completely custom data.

Example

See the Pen amCharts 4: Exporting heatmap data by amCharts team (@amcharts) on CodePen.24419