Crosshair Render Entering Infinite Loop in generateValueFormatString Function

[Mr_Rosey]

I’m having trouble re-creating this issue outside of my development environment, so unfortunately I can’t create a JSFiddle, but I seem to be encountering an infinite loop while using CanvasJs.

The project I have has a large set of data spread across 5 y axis. We bring a range of data into memory which is slightly larger than the axisX viewport window, and allow for panning to dates back in time. Every time a new window is specified, the data within the window is recalculated and displayed on the graph. A crosshair is used on the x and y axis to improve readability.

The problem seems to be if I pan to a time far back in time, then reset my viewport back to current time, and before any new data can be re-rendered move the mouse over the graph. The entire browser tab will freeze until ultimately running out of memory.

I have looked at the call stack, and it appears that when the axisY.crosshair is being rendered (in y.renderCrosshair) and the there is no crosshair.valueFormatString specified (which causes the following else condition to be entered), a value that acts as the loop control (m) is inadvertently set to Infinity when this.parent.range is equal to 0. The minified version of the code appears as follows:

ga.prototype.render = function(a, d) {
  var b, c, e, g, h = null, k = h = null, l = "";
    if (!this.valueFormatString)
      if ("dateTime" === this.parent.valueType)
        this.valueFormatString = this.parent.valueFormatString;
      else {
        var m = 0, 
        m = "xySwapped" === this.chart.plotInfo.axisPlacement ? 50 < this.parent.range ? 0 : 500 < this.chart.width && 25 > this.parent.range ? 2 : Math.floor(Math.abs(Math.log(this.parent.range) / Math.LN10)) + (5 > this.parent.range ? 2 : 10 > this.parent.range ? 1 : 0) : 50 < this.parent.range ? 0 : Math.floor(Math.abs(Math.log(this.parent.range) / Math.LN10)) + (5 > this.parent.range ? 2 : 10 > this.parent.range ? 1 : 0);
        this.valueFormatString = y.generateValueFormatString(this.parent.range, m)
      }

Inside y.generateValueFormatString(this.parent.range, m), the value of m is then used as a for loop control (c), which ultimately makes the for loop run until the web browser runs out of memory. The minified code of this function is as follows:

y.generateValueFormatString = function(a, d) {
  var b = "#,##0.", c = d;
  1 > a && (c += Math.floor(Math.abs(Math.log(a) / Math.LN10)),
  isNaN(c) || !isFinite(c)) && (c = d);
  for (var e = 0; e < c; e++)
    b += "#";
  return b
}

The Call Stack from the minified code is as follows:

-> y.generateValueFormatString
ga.render
y.renderCrosshair
p._plotAreaMouseMove
p._mouseEventHandler
(anonymous)

Again, I apologize about not being able to recreate this issue in a JSFiddle. I was hoping that if I at least point out the area and conditions that are causing this problem that I might be able to get something sorted out.

Thanks!

[Manoj Mohan]

@mr_rosey,

Sorry, we are unable to reproduce the issue at our end. Can you kindly create a sample project reproducing the issue along with sample data and share it over Google-Drive or One Drive so that we can look into your code, understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[the-nick-wilson]

We’re experiencing this issue as well – was there any resolution to this? Thanks!

[Manoj Mohan]

@the-nick-wilson,

It seems to be working fine. Can you kindly create a sample project reproducing the issue and share it over Google-Drive or OneDrive along with sample data so that we can look into your code, understand the scenario better and help you out?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.

—-
Manoj Mohan
Team CanvasJS

[the-nick-wilson]

Thanks Manoj. Oddly enough, I’m unable to reproduce the issue this morning, even though I was able to reproduce it for the prior two weeks. If it comes up again I’ll try to see if I can consistently reproduce and send something to you.