Home forums Report Bugs Crosshair Render Entering Infinite Loop in generateValueFormatString Function

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #27328

    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

    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.




    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.