Multiple axes - Zoom and scroll

gkumar · Post by **gkumar** » Wed Apr 15, 2020 8:09 am

TeeChart(tm) for JavaScript(tm) version V1.4. I am facing issue with zoom and scroll after adding a custom Y -axis. In all I have 2 axes on left side one axis at the bottom and one on the right.

Code: Select all

// Axis positions as % percent:
axisLeft1.start = 0; axisLeft1.end = 45; // custom axis
axisLeft.start = 50; axisLeft.end = 100;
axisRight.start = 50; axisRight.end = 100;

On zoom (horizontal and vertical enabled) and scroll (up and down) the series are not bound to their respective axis and the lines cross over (chart attached).
Also, when the chart first renders the title text for the custom axis does not show up until there is an activity (mouse click etc.) by the user.

I also had a question regarding cursor tool. Can I add two cursor tools on a chart that act independently? Currently, when I add two cursor tools the onChange event for one results in changing the position of the other cursor tool and they are always superimposed. I want each of the cursor tool respond to its own change event.

Any help /suggestions in form of sample code snippets would he appreciated.

Thanks.

Post by **Yeray** » Tue Apr 28, 2020 8:39 am

Hello,

Sorry for the delay here.

gkumar wrote: ↑
Wed Apr 15, 2020 8:09 am
TeeChart(tm) for JavaScript(tm) version V1.4. I am facing issue with zoom and scroll after adding a custom Y -axis. In all I have 2 axes on left side one axis at the bottom and one on the right.
Code: Select all
// Axis positions as % percent:
axisLeft1.start = 0; axisLeft1.end = 45; // custom axis
axisLeft.start = 50; axisLeft.end = 100;
axisRight.start = 50; axisRight.end = 100;
On zoom (horizontal and vertical enabled) and scroll (up and down) the series are not bound to their respective axis and the lines cross over (chart attached).
Also, when the chart first renders the title text for the custom axis does not show up until there is an activity (mouse click etc.) by the user.

I'd suggest you to take a look at the examples showing how to use custom axes here and here.

gkumar wrote: ↑
Wed Apr 15, 2020 8:09 am
I also had a question regarding cursor tool. Can I add two cursor tools on a chart that act independently? Currently, when I add two cursor tools the onChange event for one results in changing the position of the other cursor tool and they are always superimposed. I want each of the cursor tool respond to its own change event.

This seems to work fine for me here:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TeeChartJS - example</title>

  <script src="../../GitHub/src/teechart.js" type="text/javascript"></script>
  <script src="../../GitHub/src/teechart-extras.js" type="text/javascript"></script>
  <script>
    var Chart1;

    function createChart() {
      Chart1 = new Tee.Chart('canvas1');
      Chart1.legend.visible = false;
      Chart1.zoom.enabled = false;

      for (var i = 0; i < 3; i++) {
        var series = Chart1.addSeries(new Tee.Line().addRandom(20));

        var axis = Chart1.axes.add(false, false);
        series.vertAxis = axis;
        axis.start = (100 / 3) * i;
        axis.end = (100 / 3) * (i + 1);

        var cursor = Chart1.tools.add(new Tee.CursorTool(Chart1));
        cursor.direction = "vertical";
        cursor.vertAxis = axis;
        cursor.followMouse = false;
        cursor.name = "cursor " + i;

        cursor.onchange = function (p) {
          var log = document.getElementById("log");
          log.innerHTML += this.name + " changed<br>";
          Chart1.draw();
        }
      }

      Chart1.panel.margins.left = 10;

      Chart1.draw();
    }
  </script>
</head>
<body onload="createChart();">
  <div style="position: relative; margin-left: 50px">
    <canvas id="canvas1" width="800" height="500">
      This browser does not seem to support HTML5 Canvas.
    </canvas>
  </div>

  <span id="log"></span>

</body>
</html>

Don't hesitate to let us know if you still find problems with these issues.

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy

Multiple axes - Zoom and scroll

Multiple axes - Zoom and scroll

Re: Multiple axes - Zoom and scroll