Multiple axes - Zoom and scroll

TeeChart for Javascript for the HTML5 Canvas
Post Reply
gkumar
Newbie
Newbie
Posts: 1
Joined: Tue Aug 06, 2019 12:00 am

Multiple axes - Zoom and scroll

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.
Attachments
Chart-2_zoomed.PNG
View when zoomed in. The series at the bottom takes the entire chart space
Chart-2_zoomed.PNG (23.03 KiB) Viewed 1705 times
Chart-1.PNG
Charts default view
Chart-1.PNG (81.74 KiB) Viewed 1705 times

Yeray
Site Admin
Site Admin
Posts: 8833
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Multiple axes - Zoom and scroll

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply