new to steema need help with 3dcharts

[sct]

Hello, I have made a few application with the trial api and have decided to purchase. I copy over the new download with the latest version. Lots of area confuse me a bit so I will list them all sequentially.

1)how to despose of a chart? I can not figure out how to properly dispose of a chart and not sure its needed. What I do for now is just remove the canvas ( ....removeChild( canvas01 ); )

2)how to use an array without eval'ing it?
The following works.
surface.data.labels = eval( "[" + this.Xdata.toString() + "]" );
surface.data.labels = new Array(...)
this does not
surface.data.labels = this.Xdata
Xdata is defined as an array, why does that not work( map is empty)?

3) Can not make a 3rd dimension label? Looking at the 3dchart as it is without moving it. I can label X and Y but not Z?

4) Can the 3d charts support movable points? If not can this be added somehow?

5)where is the complete api? I dont see "Tee.Three" in the Class Index for example. There is so much that is not document ?

6) browsers
-- does not work on opera error: Error thrown at line 30, column 50 in <anonymous function: clearRect>() in http://localhost:62578/SCT/steema/src/teechart-3d.js:
-- does not work in IE 10: Unable to get property 'add' of undefined or null reference teechart-3d.js, line 30 character 51
-- does not work in safari: no idea why, cant find debug messages.

I'm very impressed with the charting so far, hope you can assist with the above!

[Yeray]

Hello Sean,

This is just to let you know we haven't forgotten you. We are investigating some of the doubts you've asked for and we'll come back with a reply as soon as possible.

[Yeray]

Hi,

1)how to despose of a chart? I can not figure out how to properly dispose of a chart and not sure its needed. What I do for now is just remove the canvas ( ....removeChild( canvas01 ); )

As far as we know, there's no function to manually dispose memory in JavaScript. There's a garbage collector that should release the memory a variable uses when it finds it won't be used any more.
If you want, you can take a look at the details of the memory that is being used with the developer tools or similar
https://developers.google.com/chrome-de ... -profiling

2)how to use an array without eval'ing it?
The following works.
surface.data.labels = eval( "[" + this.Xdata.toString() + "]" );
surface.data.labels = new Array(...)
this does not
surface.data.labels = this.Xdata
Xdata is defined as an array, why does that not work( map is empty)?

If Xdata is an array of numbers, you could do as follows:

Code: Select all

var result=[];
for (var i=0,l=this.XData.length;i<l;i++) result.push(this.XData[i].toString());

surface.data.labels = result;

)3) Can not make a 3rd dimension label? Looking at the 3dchart as it is without moving it. I can label X and Y but not Z?

I'm afraid there's no depth axis in TeeChart JavaScript yet. This is a feature to be added in a future release with the possibility to have 3D non-orthogonal charts without WebGL.

4) Can the 3d charts support movable points? If not can this be added somehow?

I'm afraid not at the moment. I'll add this to the wish list to be implemented in future releases (TF77016688).

5)where is the complete api? I dont see "Tee.Three" in the Class Index for example. There is so much that is not document ?

I've updated the link to the API in the Specifications tab in the TeeChart HTML5 page to point to the latest version of the API. The Three section isn't finished but at least you'll be able to see the structure.

6) browsers
-- does not work on opera error: Error thrown at line 30, column 50 in <anonymous function: clearRect>() in http://localhost:62578/SCT/steema/src/teechart-3d.js:
-- does not work in IE 10: Unable to get property 'add' of undefined or null reference teechart-3d.js, line 30 character 51
-- does not work in safari: no idea why, cant find debug messages.

You have to add the following to go back to HTML5 canvas when WebGL isn't supported in the browser. This code can be found in the webgl demos and an explanation can be found here.

Code: Select all

  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 );
  }

Don't hesitate to let us know if you still find problems with any of the above.

[sct]

Yeray, I'm aware of the GB collection and agree there should never be a need for that. I was more concerned about the code on your end and if there was a need for it. That clears up the question for me.

If Xdata is an array of numbers, you could do as follows:

My work around with eval works I'm just so baffled as to why this works:
surface.data.labels = new Array(...)
and this does not
surface.data.labels = this.Xdata
?

This is a feature to be added in a future release

As long as its on the todo that works for us

TF77016688 -- looking forward to that.

You have to add the following to go back to HTML5 canvas when WebGL isn't supported in the browser. This code can be found in the webgl demos and an explanation can be found here.

I saw this reference and I used it like so.

Code: Select all

    if ( three.isEnabled() )// Valid webGL ?
             {
                 this.Chart1.draw();
                 animate();
             }
             else
                 alert("error: NO WEBGL SUIPPORT")

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

I put this code in my 3d draw but I get the errors I mentioned before during my 2d draw before I ever attempt the 3d. Interestingly I never see this alert. It's bit hard to follow "go back" to since in my cause I can not get to the 2d map to start with, without errors . Maybe I dont quite follow yet. Do I need this check for my 2d map before I ever attempt a 3d map?

[sct]

I fixed the array issue by doing this. ( I hope is ok to share source on this board ? )

Code: Select all

Tee.Series.prototype.valueText=function(index) {
      var vv=this.data._old || this.data.values, d=vv[index];
	  if ( typeof d == "string") d = Number(d);
      if (d) {
...

[Yeray]

Hi,

Thanks for the comments and for sharing the solution to the array problem.

[sct]

I'm not having luck with the setEnabled. I tried to put it in various places and either I get a ghost 3d map or d.parentElement is null. This is how I currently do my 2d 3d switching. How would you recommend I do the setEnabled?

Code: Select all

chart.prototype.draw3d = function()
     {//makes a 3d chart
         if ( this.Zdata == "" ) return;//no data to make a chart.
         this.UIDiv.removeChild( this.canvas );
         this.canvas = document.createElement( 'canvas' );
         this.canvas.id = "canvas" + this.id;
         this.canvas.width = this.canvasData_width;
         this.canvas.height = this.canvasData_height;
         this.canvas.style.zIndex = this.canvasData_zIndex;
         this.canvas.style.background = "#666677"
         this.UIDiv.appendChild( this.canvas );

         var Chart3d = new Tee.Three( "canvas" + this.id );// Create 3D WebGL context:
         this.Chart1 = new Tee.Chart( Chart3d );// Create Chart:
         this.Chart1.walls.visible = false;
         this.Chart1.title.text = "Rotate with left click, scrole to zoom.";
         surface = new Tee.Surface();// Create Surface:
         this.Chart1.addSeries( surface );// Add Surface series to Chart:

         var makeData="[[";//make data
         for ( var d = 0; d < this.Zdata.length ; d++) makeData += this.Zdata[d] + "],[";//formate string
         surface.data.values = eval( makeData.substring( 0, makeData.length - 3 ) + "]]" )
         surface.data.labels = this.Xdata;//eval( "[" + this.Xdata.toString() + "]" );
         surface.grid.visible = true;
         Chart3d.toogle( this.Chart1.walls, false );
         Chart3d.floor.visible = false;
         if ( Chart3d.isEnabled() )// Valid webGL ?
         {
             this.Chart1.draw();
             animate( );
         }
         else
             alert( "NO WEBGL" )

         function animate( )// Loop
         {
             Chart3d.update();
             requestAnimationFrame( animate );
         }
         this.Chart3d = Chart3d;//save to class
     }

     chart.prototype.draw = function ()
     {//makes a 2d chart              
         this.UIDiv.removeChild( this.canvas );
         this.canvas = document.createElement( 'canvas' );
         this.canvas.id = "canvas" + this.id;
         this.canvas.width = this.canvasData_width;
         this.canvas.height = this.canvasData_height;
         this.canvas.style.zIndex = this.canvasData_zIndex;

        // this.canvas.style.background = "#ffffff"
         this.UIDiv.appendChild( this.canvas );
         this.Chart1 = new Tee.Chart( "canvas" + this.id );

         this.annot = new Tee.Annotation( this.Chart1 );
         this.annot.position.x = 15;
         this.annot.position.y = 20;
         var anno = this.annot
         this.annot.mousemove = function () { this.text = ""; }

         if ( this.type == "Function" )  this.addData( this.Xdata, this.Ydata, .05, "ellipse" );
         else if ( this.type == "Table" )
         {
             for ( z = 0; z < this.Zdata.length;z++ )
             {
                 this.addData( this.Ydata, this.Zdata[z], .05, "ellipse" );
             }
         }

         //this.Chart1.legend.textStyle = "values"
         //this.Chart1.legend.legend_textstyle = "label"

         this.Chart1.tools.add( this.annot );

         this.Chart1.title.text = "";
         this.Chart1.axes.left.title.text = this.labelY;
         this.Chart1.axes.bottom.title.text = this.labelX;
         this.Chart1.tools.add( new Tee.DragTool( this.Chart1 ) );
         this.Chart1.draw();
     };

[sct]

more info on the IE issue. Here is the error no that I have the source code.

[Yeray]

I'm not having luck with the setEnabled. I tried to put it in various places and either I get a ghost 3d map or d.parentElement is null. This is how I currently do my 2d 3d switching. How would you recommend I do the setEnabled?

Note you have to add the helvetiker_regular.typeface.js and three.min.js scripts besides to the teechart-3d.js to make it run.

[sct]

I have the 5 included.

steema/demos/canvas/webgl/threejs/three.min
steema/demos/canvas/webgl/fonts/helvetiker_font/helvetiker_regular.typeface.js
steema/source/teechart.js
steema/source/teechart-extras.js
steema/source/teechart-3d.js

[Yeray]

Hi,

And are the correctly loaded?
Please, check the demos included with the installation. If the WebGL examples work fine for you locally, you just have to do the same in your page.

[sct]

Everything is the same for includes. When I use the demo in IE,opera, safarI just get a grey blank map. Unfortunately dont get errors. FF is the only browser that for for me.

[Yeray]

This depends on the browser:
http://caniuse.com/webgl