html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

fieldset {

    font-family: Verdana;

    font-size: 13px;

    border: none;

    margin-top: 20px;

}

let theChart;

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);

​

            theChart = chart;

​

            // set the x-axis label format

            chart

              .xAxis()

              .labels()

              .format(function () {

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

              });

​

            // set the x-axis scale maximum

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

            // set the chart paddings

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

            // set the x/y/z-axis stroke color

            chart.xAxis().stroke('#000');

            chart.yAxis().stroke('#000');

            chart.zAxis().stroke('#000');

            // set the y scale minimum/maximum

            chart.yScale().minimum(1971);

            chart.yScale().maximum(2021);

            // set the scale tick intervals

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

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

            // set the x-axis label rotation

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

​

            // hide the last label on the y-axis

            chart.yAxis().drawLastLabel(false);

            // create a color scale

            let customColorScale = anychart.scales.linearColor();

            customColorScale.colors([

              '#76BA99',

              '#FDFF00',

              '#FD841F',

              '#E14D2A'

            ]);

​

            // set the color scale

            chart.colorScale(customColorScale);

​

            // enable and configure the color range

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

​

            // 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();

        }

    );

});

​

​

// rotation control y

let rotateY = function() {

  let value = +document.getElementById('rotationY').value;

  theChart.rotationY(value);

};

​

// rotation control z

let rotateZ = function() {

  let value = +document.getElementById('rotationZ').value;

  theChart.rotationZ(value);

};

​