Attachment 96 Details for Bug 592 – html5 canvas example

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.

html5 canvas example

basic_3d.htm (text/html), 2.37 KB, created by marc meumann on 2014-02-20 12:20:09 EST

(hide)

Description:

Filename:

MIME Type:

Creator: marc meumann

Created: 2014-02-20 12:20:09 EST

Size: 2.37 KB

patch

obsolete

><!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>

<!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>

Actions: View

Attachments on bug 592: 96