Edit in JSFiddle

var canvas_height = 500;
var canvas_width = 500;
var surfacePlot;
var surfacePlot2;
var data, options, basicPlotOptions, glOptions, animated, plot1, values;
var numRows = 45;
var numCols = 45;
var tooltipStrings = new Array();

function setUp() {

    values = new Array();

    data = {
        nRows: numRows,
        nCols: numCols,
        formattedValues: values
    };

    surfacePlot = new SurfacePlot(document.getElementById("surfacePlotDiv"));

    // Don't fill polygons in IE < v9. It's too slow.
    var fillPly = true;

    // Define a colour gradient.
    var colour1 = {
        red: 0,
        green: 0,
        blue: 255
    };
    var colour2 = {
        red: 0,
        green: 255,
        blue: 255
    };
    var colour3 = {
        red: 0,
        green: 255,
        blue: 0
    };
    var colour4 = {
        red: 255,
        green: 255,
        blue: 0
    };
    var colour5 = {
        red: 255,
        green: 0,
        blue: 0
    };

    var colours = [colour1, colour2, colour3, colour4, colour5];

    // Axis labels.
    var xAxisHeader = "X-axis";
    var yAxisHeader = "Y-axis";
    var zAxisHeader = "Z-axis";
    var renderDataPoints = false;
    var background = '#ffffff';
    var axisForeColour = '#000000';
    var hideFloorPolygons = true;

    var chartOrigin = {
        x: 200,
        y: 265
    };

    // Options for the basic canvas plot.
    basicPlotOptions = {
        fillPolygons: fillPly,
        tooltips: tooltipStrings,
        renderPoints: renderDataPoints
    }

    // Options for the webGL plot.
    var xLabels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var yLabels = [0, 1, 2, 3, 4, 5];
    var zLabels = [0, 1, 2, 3, 4, 5, 6];

    // These labels are used when autoCalcZScale is false;
    glOptions = {
        xLabels: xLabels,
        yLabels: yLabels,
        zLabels: zLabels,
        autoCalcZScale: true
    };

    // Options common to both types of plot.
    options = {
        xPos: 0,
        yPos: 0,
        width: canvas_width,
        height: canvas_height,
        colourGradient: colours,
        xTitle: xAxisHeader,
        yTitle: yAxisHeader,
        zTitle: zAxisHeader,
        backColour: background,
        axisTextColour: axisForeColour,
        hideFlatMinPolygons: hideFloorPolygons,
        origin: chartOrigin
    };

    // Create some data.
    var d = 360 / numRows;
    var idx = 0;

    for (var i = 0; i < numRows; i++) {
        values[i] = new Array();

        for (var j = 0; j < numCols; j++) {
            var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));

            values[i][j] = (value / 4.0 + 0.25) * 0.5;

            tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
            idx++;
        }
    }

    surfacePlot = new SurfacePlot(document.getElementById("surfacePlotDiv"));


    surfacePlot.draw(data, options, basicPlotOptions, glOptions);
}

setUp();

<script id="shader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec4 vColor;
    varying vec3 vLightWeighting;
    void main(void)
    {
    gl_FragColor = vec4(vColor.rgb * vLightWeighting, vColor.a);
    }
</script>
<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec3 aVertexNormal;
    attribute vec4 aVertexColor;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    uniform mat3 uNMatrix;
    varying vec4 vColor;
    uniform vec3 uAmbientColor;
    uniform vec3 uLightingDirection;
    uniform vec3 uDirectionalColor;
    varying vec3 vLightWeighting;
    void main(void)
    {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vec3 transformedNormal = uNMatrix * aVertexNormal;
    float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
    vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
    vColor = aVertexColor;
    }
</script>
<script id="axes-shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 vColor;
    void main(void)
    {
    gl_FragColor = vColor;
    }
</script>
<script id="axes-shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    varying vec4 vColor;
    uniform vec3 uAxesColour;
    void main(void)
    {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor =  vec4(uAxesColour, 1.0);
    }
</script>
<script id="texture-shader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    void main(void)
    {
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    }
</script>
<script id="texture-shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;
    varying vec2 vTextureCoord;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    void main(void)
    {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
    }
</script>


<div id="surfacePlotDiv"></div>

div#surfacePlotDiv {
    margin-left: 100px;
    margin-top: 100px;
    border-style: solid;
    border-width: 2px;
    border-color: red;
    width: 510px;
    height: 510px;
}