html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set data for the destination countries

  var data = [

    { points: [28.610198, 77.207584, -30.592659, 145.943667], to: "Australia", total: 100009 },

    { points: [28.610198, 77.207584, 45.411673, -75.69629], to: "Canada", total: 183310 },

    { points: [28.610198, 77.207584, 52.511693, 13.403121], to: "Germany", total: 34864 },

    { points: [28.610198, 77.207584, 23.5880, 58.3829], to: "Oman", total: 39550 },

    { points: [28.610198, 77.207584, 25.2854, 51.5310], to: "Qatar", total: 46000 },

    { points: [28.610198, 77.207584, 55.747362, 37.621273], to: "Russian Federation", total: 18039 },

    { points: [28.610198, 77.207584, 24.710437, 46.675164], to: "Saudi Arabia", total: 65800 },

    { points: [28.610198, 77.207584, 24.4539, 54.3773], to: "United Arab Emirates", total: 164000 },

    { points: [28.610198, 77.207584, 52.667078, -0.955920], to: "United Kingdom", total: 55465 },

    { points: [28.610198, 77.207584, 38.884053, -77.033513], to: "United States", total: 465791 },

  ]

  // create a connector map chart

  var map = anychart.connector();

​

  // include the world map geodata

  map.geoData(anychart.maps.world);

​

  // create onnector lines

  var connectorSeries = map.connector(data);

  // set labels for the connector lines

  connectorSeries

    .labels()

    .enabled(true)

    .position('100%')

    .format(function () {

      return this.getData('to')

    });

  // set arrow markers at the line end

  connectorSeries

    .markers()

    .position('100%')

    .size(12);

  // set zoom controls

  var zoomController = anychart.ui.zoom();

  zoomController.target(map);

  zoomController.render();

​

  // set the map title

  map.title('Top 10 Destination Countries for Indian Students Studying Abroad');

​

  // set the container

  map.container('container');

​

  // draw the map

  map.draw();

​

});