View All Attachments for Bug 592

Steema Issues Database

Note: This database is for bugs and wishes only. For technical support help, if you are a customer please visit our online forums;
otherwise you can use StackOverflow.
Before using this bug-tracker we recommend a look at this document, Steema Bug Fixing Policy.

Attachment #96
html5 canvas example	text/html	2014-02-20 12:20:09 EST	2.37 KB	no flags	Details

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<title>TeeChart 3D Charting for JavaScript Three.js WebGL&trade; Basic Example</title>

<script src="threejs/three.min.js" type="text/javascript"></script>

<script src="threejs/Detector.js" type="text/javascript"></script>
<script src="threejs/TrackballControls.js" type="text/javascript"></script>

<script src="fonts/helvetiker_font/helvetiker_regular.typeface.js"></script>

<script src="../../../src/teechart.js" type="text/javascript"></script>
<script src="../../../src/teechart-3d.js" type="text/javascript"></script>

<script type="text/javascript">
"use strict";

var three, Chart1;

function draw() {

  // Create 3D WebGL context:
  three  = new Tee.Three("canvas1");

  //Example, shadows:
  //three.setShowShadows(true);

  // Create Chart:
  Chart1 = new Tee.Chart(three);

  // Add Bar series to Chart:
  Chart1.addSeries(new Tee.Bar([5,3,2,7,1,4,6,3,7,9,3,4,5,2,5,6] , ["One", "Two", "Three", "Four", "Five", "Sixey", "Seven", "Eight", "Nine", "Ten", "(Eleven)", "Twelvy", "Thirteen", "Fourtijn", "Fifteen", "Sixteen"]));

  // Example:
  Chart1.series.items[0].data.styles=[ "cylinder", "bar", "ellipsoid", "cone", "ellipse" ];

  Chart1.title.text="TeeChart for WebGL (tm)";
  Chart1.footer.text="Made with Three.js";

  Chart1.walls.back.size=0.2;
  Chart1.walls.left.size=10;
  Chart1.walls.bottom.size=10;
  Chart1.walls.back.format.transparency=0.2;

  // Valid webGL ?

  if (three.isEnabled()) {
    Chart1.draw();
    animate();
  }
  else
  {
    // Show message (WebGL not available) :
    Detector.addGetWebGLMessage();

    // Disable WebGL and use HTML5 2D Canvas:
    three.setEnabled(false, Chart1);
  }

  // Loop
  function animate() {
    three.update();
    requestAnimationFrame( animate );
  }
}

</script>
</head>

<body onload="draw()">

<input type="checkbox" id="webgl" onclick="three.setEnabled(this.checked, Chart1)" checked><label for="webgl">Use WebGL &trade;</label>
&nbsp;&nbsp; Drag mouse and wheel to rotate, pan and zoom.
<br/>

 <center>
  <canvas id="canvas1" style="background:#666677" width="800" height="500"></canvas>
 </center>

</body>
</html>