html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/awanshrestha/9d0f4c864817d5ee043126f63f1f4d02/raw/91cb71ac4159ce86bbe2eb204c190f1e9ce43ba6/surface-test.json',

    function (data) {

      // pre-process 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[y], data.z[x][y]]);

        }

      }

​

      // create a surface chart

      var chart = anychart.surface(result);

​

      // set the x-axis label format

      chart

        .xAxis()

        .labels()

        .format(function () {

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

        });

​

      // set the x-scale maximum

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

      // set the chart paddings

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

      // set the default chart rotation by the y-axis

      chart.rotationY(40);

      // set the default chart rotation by the z-axis

      chart.rotationZ(130);

      // set the chart title

      chart.title('Population Growth of Top 50 Most Populous Countries Over Past 50 Years');

​

      // set the container id for the chart

      chart.container('container');

​

      // initiate the visualization

      chart.draw();

    }

  );

});