html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile( 'https://gist.githubusercontent.com/shacheeswadia/b0d6b34a1910359e0e1a8fc0c84019a6/raw/4ab92ca6361f1bc9875d2854e2e1271bc991f86b/surfaceAreaData.json',

    function (data) {

      // processing of the data

      var result = [];

      for (var x = 0; x < data.x.length; x++) {

        for (var y = 0; y < data.y.length; y++) {

          result.push([x, data.y.sort()[y], data.z[x][y]]);

        }

      }

​

      // create surface chart

      var chart = anychart.surface();

​

      // enable markers and set data for them

      chart.markers().enabled(true).data(result);

      // set x axis labels format

      chart

        .xAxis()

        .labels()

        .format(function () {

          return data.x[Math.round(this.value)];

        });

      // set x axis scale maximum

      chart.xScale().maximum(data.x.length - 1);

      // set chart paddings

      chart.padding(25, 50, 75, 50);

      // set chart title

      chart.title('GDP per capita (PPP) in 2006-2020, in USD');

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    }

  );

});