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-data/surface-chart/gdp-per-capita.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples-data/surface-chart/gdp-per-capita.json',

    function (data) {

      // pre-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 chart title

      chart.title('GDP per capita, PPP, constant 2005 international $');

​

      // set chart paddings

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

​

      chart.rotationY(15);

      chart.rotationZ(45);

​

      // enable X/Y minor ticks and labels

      chart.xAxis().minorTicks().enabled(true);

      chart.xAxis().minorLabels().enabled(true);

      chart.yAxis().minorTicks().enabled(true);

      chart.yAxis().minorLabels().enabled(true);

​

      // set X axis scale maximum

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

​

      // set Y scale minimum/maximum

      chart.yScale().minimum(1995);

      chart.yScale().maximum(2013);

​

      // hide the last label in Y axis

      chart.yAxis().drawLastLabel(false);

​

      // set scales ticks intervals

      chart.xScale().ticks().interval(50);

      chart.yScale().ticks().interval(8);

      chart.zScale().ticks().interval(40000);

​

      // set X/Y/Z axis labels font size

      chart.xAxis().labels().fontSize(10);

      chart.xAxis().minorLabels().fontSize(10);

      chart.yAxis().labels().fontSize(10);

      chart.yAxis().minorLabels().fontSize(10);

      chart.zAxis().labels().fontSize(10);

​

      // set X axis labels rotation

      chart.xAxis().labels().rotation(90);

      chart.xAxis().minorLabels().rotation(90);

​

      // set X axis labels format

      chart

        .xAxis()

        .labels()

        .format(function () {

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

        });

      chart

        .xAxis()

        .minorLabels()

        .format(function () {

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

        });

​

      // set chart stroke(mesh) settings

      chart.stroke('#666 .5');

​

      // Create color scale

      var customColorScale = anychart.scales.linearColor();

      customColorScale.colors([

        '#B5DDB6',

        '#f9ac93',

        '#96C8E9',

        '#FF5555'

      ]);

​

      // Set color scale

      chart.colorScale(customColorScale);

​

      // enable and configure color range

      chart.colorRange().enabled(true).orientation('right');

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    }

  );

});