html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

#container {

    position: absolute;

    width: 100%;

    top: 60px;

    bottom: 0;

}

fieldset {

    font-family: Verdana;

    font-size: 13px;

    border: none;

}

anychart.onDocumentReady(function() {

    // create chart

    chart = anychart.surface()

    // set data

    chart.data(generateData(hyperbolicParaboloid));               

​

    // display chart

    chart.container('container').draw();

});

​

// auto Z rotation

function startRotateZ(){

    autoRotateZ = setInterval(function(){ 

        chart.rotationZ(chart.rotationZ()+1);

      }, 30);

};

​

// rotation control z

var rotateZ = function() {

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

  chart.rotationZ(value);

};

​

// rotation control y

var rotateY = function() {

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

  chart.rotationY(value);

};

​

// generate a data set from function

var generateData = function(z_function) {

  var max_val = 5;

  var step = 0.5;

  var output = [];

  for (var x = -max_val; x <= max_val; x += step) {

    for (var y = -max_val; y <= max_val; y += step) {

      output.push([x, y, z_function(x, y)]);

    }

  }

  return output;

};

// hyperbolic paraboloid function

var hyperbolicParaboloid = function(x, y) {

  return Math.pow(y,2)-Math.pow(x,2);

};