html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/maps-connectors/top-chinese-exports-to-the-world/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/maps-connectors/top-chinese-exports-to-the-world/data.json',

    function (data) {

      // Creates map chart

      var map = anychart.connector();

​

      // Sets settings for map chart

      map.padding([10, 10, 10, 10]);

      map.geoData('anychart.maps.world');

      map.interactivity().selectionMode('none');

​

      map

        .unboundRegions()

        .enabled(true)

        .fill('#E1E1E1')

        .stroke('#D2D2D2');

​

      // Sets title for map chart and customizes it

      map

        .title()

        .enabled(true)

        .useHtml(true)

        .padding([0, 0, 20, 0])

        .text(

          'Top Chinese Export Directions to the World<br/>' +

          '<span style="color:#212121; font-size: 13px;">According to www.worldsrichestcountries.com</span>'

        );

​

      // Sets credits data

      map

        .credits()

        .enabled(true)

        .url(

          'http://www.worldsrichestcountries.com/top_china_exports.html'

        )

        .text(

          'Data source: http://www.worldsrichestcountries.com/top_china_exports.html'

        );

​

      // Helper function to create several series

      var createSeries = function (name, data, color) {

        // Creates connector series for destinations and customizes them

        var connectorSeries = map

          .connector(data)

          .name(name)

          .fill(color)

          .stroke('1.5 ' + color)

          .curvature(0);

​

        connectorSeries.hovered().stroke('1.5 #212121').fill('#212121');

​

        connectorSeries

          .markers()

          .position('100%')

          .size(20)

          .fill(color)

          .stroke('2 #E1E1E1');

​

        connectorSeries

          .hovered()

          .markers()

          .position('100%')

          .size(20)

          .fill('#212121')

          .stroke('2 #455a64');

​

        if (name === 'More then 10%') {

          connectorSeries.startSize(7).endSize(2);

        } else if (name === '5 - 10%') {

          connectorSeries.startSize(5).endSize(1.5);

        } else if (name === '3 - 5%') {

          connectorSeries.startSize(3).endSize(1);

        } else {

          connectorSeries.startSize(0).endSize(0);

        }

​

        // Sets settings for labels for the destination series

        connectorSeries

          .labels()

          .enabled(true)

          .offsetY(0)

          .offsetX(0)

          .fontSize(10)

          .position('100%')

          .format(function () {

            return this.getData('to');

          });

​

        connectorSeries

          .hovered()

          .labels()

          .enabled(true)

          .fontColor('#212121');

​

        // Sets settings for legend items

        connectorSeries

          .legendItem()

          .iconType('square')

          .iconFill(color)

          .iconStroke(false);

​

        // Sets tooltip setting for the destination series

        connectorSeries

          .tooltip()

          .useHtml(true)

          .padding([8, 13, 10, 13])

          .titleFormat('{%to}')

          .fontSize(13)

          .format(function () {

            return (

              '<span style="font-size: 12px; color: #cbcbcb">Total:</span> $' +

              this.getData('total') +

              ' billion <br/>' +

              '<span style="font-size: 12px; color: #cbcbcb">Overall Exports Percent:</span> ' +

              this.getData('percent') +

              '%'

            );

          });

      };

​

      // Creates Dataset from Sample data

      var exportDataSet = anychart.data.set(data).mapAs();

​

      // Creates 5 series, filtering the data by the amount of Fatalities

      createSeries(

        'Les then 0.5%',

        exportDataSet.filter('percent', filterFunction(0, 0.5)),

        '#64b5f6'

      );

      createSeries(

        '0.5 - 1.5%',

        exportDataSet.filter('percent', filterFunction(0.5, 1.5)),

        '#1976d2'

      );

      createSeries(

        '1.5 - 3%',

        exportDataSet.filter('percent', filterFunction(1.5, 3)),

        '#1976d2'

      );

      createSeries(

        '3 - 5%',

        exportDataSet.filter('percent', filterFunction(3, 5)),

        '#355CB1'

      );

      createSeries(

        '5 - 10%',

        exportDataSet.filter('percent', filterFunction(5, 10)),

        '#5C3883'

      );

      createSeries(

        'More then 10%',

        exportDataSet.filter('percent', filterFunction(10)),

        '#880e4f'

      );

​

      // Turns on the legend for the sample

      map

        .legend()

        .enabled(true)

        .position('center-bottom')

        .padding([20, 0, 0, 0])

        .fontSize(10);

​

      map

        .legend()

        .title()

        .enabled(true)

        .fontSize(13)

        .padding([0, 0, 5, 0])

        .text('Percent of Chinese Overall Exports');

​

      // create zoom controls

      var zoomController = anychart.ui.zoom();

      zoomController.render(map);

​

      // Sets container id for the chart

      map.container('container');

​

      // Initiates chart drawing

      map.draw();

    }

  );

});

​

// Helper function to bind data field to the local var.

function filterFunction(val1, val2) {

  if (val2) {

    return function (fieldVal) {

      return val1 <= fieldVal && fieldVal < val2;

    };

  }

  return function (fieldVal) {

    return val1 <= fieldVal;

  };

}