Scroller with heatmap series and inverted y-axis stuttering

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
dynamicrisk
Newbie
Newbie
Posts: 27
Joined: Thu Apr 06, 2023 12:00 am

Scroller with heatmap series and inverted y-axis stuttering

Post by dynamicrisk » Mon Jan 13, 2025 2:51 pm

Hello,

I have a chart with a ColorGrid series that is using a Tee.Scroller as well. If I invert the left axis, the scroller will not render correctly.

Here is some sample code to show the issue.

HTML

Code: Select all

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-3d.js"></script>

<body onload="draw()">
<div class="x_content">
  <br><canvas id="canvas" width="600" height="400">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>
  <canvas id="canvas2" width="550" height="80" style="margin-left : 55px;">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>

  <input type="checkbox" id="range" onclick="scroller.useRange(this.checked);" checked>Range
  <input type="checkbox" id="invert" onclick="scroller.invertThumb(this.checked);">Inverted
  <br/>
  <span id="data" />
</div>
</body>
JS

Code: Select all

var Chart1, scroller, grid;

function draw() {
  Chart1 = new Tee.Chart("canvas");
  
	Chart1.axes.left.inverted=true;
  
  grid = Chart1.addSeries(new Tee.ColorGrid());
  grid.horizAxis="both";
  grid.vertAxis="both";

  addSampleData(0);

  Chart1.title.text = "Chart Scroller";

  Chart1.panel.transparent = true;

  Chart1.legend.visible = false;
  Chart1.axes.bottom.setMinMax(200, 499);

  Chart1.zoom.enabled = false;
  Chart1.scroll.mouseButton = 0;
  Chart1.cursor = "pointer";
  Chart1.scroll.direction = "horizontal";

  scroller = new Tee.Scroller("canvas2", Chart1);
  scroller.onChanging = function(s, min, max) {
    document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);
  }

  //   changeTheme(Chart1, "minimal");
  Chart1.draw();
}

function addSampleData(index) {
  if (index==="0") {
    grid.data.values=[ [23,15,12, 8,39,50,34],
                       [19, 7,31,23,12,40,27],
                       [ 1,26,18,39,20, 6,11]
                     ];
                     
    grid.dataChanged=true;
	grid.decimals = 2;
  }
  else
  if (index==="1")
     grid.addRandom(200);  // 200x200
  else
  if (index==="2")
     grid.addRandom(400);  // 400x400
  else
     grid.addRandom(100,50);  // 100x50

  grid.chart.zoom.reset();
}
Thanks

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

Re: Scroller with heatmap series and inverted y-axis stuttering

Post by Yeray » Thu Jan 16, 2025 9:12 am

Hello,

I've been able to reproduce the problem.
I've added it to the public tracker to be further investigated: #2755.
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