jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Graph 3D Internet Explorer 9 support</title>
    <style>        body {font: 10pt arial; width: 600px; }    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>    <script type="text/javascript" src="../graph3d.js"></script>
    <script type="text/javascript">        var data = null;        var graph = null;
        google.load("visualization", "1");
        // Set callback to run when API is loaded        google.setOnLoadCallback(drawVisualization);
        function custom(x, y) {            return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);        }
        // Called when the Visualization API is loaded.        function drawVisualization() {            // Create and populate a data table.            data = new google.visualization.DataTable();            data.addColumn('number', 'x');            data.addColumn('number', 'y');            data.addColumn('number', 'value');
            // create some nice looking data with sin/cos            var steps = 50;  // number of datapoints will be steps*steps            var axisMax = 314;            var axisStep = axisMax / steps;            for (var x = 0; x < axisMax; x+=axisStep) {                for (var y = 0; y < axisMax; y+=axisStep) {                    var value = custom(x,y);                    data.addRow([x, y, value]);                }            }
            // specify options            var options = {                width:  "100%",                height: "600px",                style: "surface",                showPerspective: true,                showGrid: true,                showShadow: false,                keepAspectRatio: true,                verticalRatio: 0.5            };
            // Instantiate our graph object.            graph = new links.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options            graph.draw(data, options);        }    </script></head>
<body><p>    Graph3D uses the HTML Canvas element. This element is supported by all    major browsers. The Canvas element is also supported in Internet Explorer    9 and newer. However, for Internet Explorer it is necessary to specify    the doctype of the html page:</p>
    <pre style= "margin-left:40px;" ><code >        <b style= "color:red;" >&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</b>        &lt;html&gt;        &lt;head&gt;        &lt;!-- ... --&gt;        &lt;/head&gt;        &lt;body&gt;        &lt;!-- ... --&gt;        &lt;/body&gt;        &lt;/html&gt;    </code></pre>
<div id="mygraph"></div>
<div id="info"></div></body></html>