Multiple graph on same canvas in Tee chart

Question

Using the example from the teecharts evaluation copy we tried to plot multiple charts on the same canvas but it is not working. All it does is that it simply plots the graph that is drawn at the end(inside if (three.isEnabled()) {part), and ignores the graphs drawn before it.

var three, Chart1, Chart2, surface;

function draw() {

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

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

  Chart2 = new Tee.Chart(three);      
  Chart1.walls.visible=false;

  // Create Surface:
  surface = new Tee.Surface();

  // Add Surface series to Chart:
  Chart1.addSeries(surface);
  Chart2.addSeries(new Tee.Line()).addRandom(1000);

  changeSurface("s3");
  // Cosmetics:

  Chart1.title.text="TeeChart Surface 3D";
  Chart1.walls.back.size=0.2;
  Chart1.walls.back.format.transparency=0.2;

  // Valid webGL ?

  if (three.isEnabled()) {

    Chart1.draw();
    Chart2.draw();

    animate();
  }
  else
    Detector.addGetWebGLMessage(); // Show message (WebGL not available)

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

}

My question is: Is it possible to plot multiple graphs inside the same canvas?( By multiple I don't mean they would share axes, I mean two completely separate chart objects inside the canvas)

Answer 1

You can't have two TChart objects in the same Canvas. Some of the other TeeChart versions have the SubChart tool that allows you to do this but this is not implemented in TeeChart Javascript.

In Teechart Javascript you have two alternatives to achieve almost the same:

• Have different TChart objects. See the example here.

• Have a TChart with multiple Custom axes. See the example here. In this one, note you are manually setting the positions of the axes, so if you want you can separate the different vertical axes in the left side. And also note in this example there's just an horizontal axis, but you can also create several in the same way the vertical axes are created.