1

I have a problem with Teechart for javascript. I want to use Teechart in our homepage to show a line graph with ~500.000 values.

My code works up to 100.000 values and after this a get an error "Maximum call stack size exceeded"

teechart.js:72 Uncaught RangeError: Maximum call stack size exceeded
at C (teechart.js:72)
at Tee.Line.Tee.Series.minYValue (teechart.js:130)
at teechart.js:76
at I.eachAxis (teechart.js:134)
at I.minYValue (teechart.js:76)
at x.checkMinMax (teechart.js:39)
at x.adjustRect (teechart.js:113)
at Q.each (teechart.js:79)
at Tee.Chart.draw (teechart.js:150)
at k (teechart-extras.js:24)

I'm a beginner in Javascript this is my first test but i can't find the problem. I'm using Teechart VCL and have no problem to show so many values.

Can TeeChart for Javascript handle so many values ?

function draw() {
  Chart1=new Tee.Chart("canvas");
  Series=new Tee.Line(Chart1);
  Chart1.addSeries(Series);

  Series.addRandom(200000);

  Chart1.axes.left.title.text="[hPa]";
  Chart1.axes.bottom.title.text="Date/Time";
  Chart1.axes.bottom.labels.dateFormat = "dd.mm.yy hh:mm";

  Chart1.series.items[0].marks.drawEvery=120;
  Chart1.title.visible = false;
  Chart1.legend.visible = false;
  changeTheme(Chart1, "minimal");
  Chart1.draw();
}
9
  • in the us this number is 100, in other countries it's 100 thousand. should avoid thousands separators to be clear. Commented Jan 19, 2018 at 15:51
  • also, the code can handle whatever the machine can handle... there is no definite answer for this.. Commented Jan 19, 2018 at 15:52
  • I was also going to ask for clarification - is that meant to be 100 thousand or a hundred? if the former then remove the decimal point but also rethink your code as doing something 100 thousand times isn't the best for performance and will most likely exceed most machines stack size
    – Pete
    Commented Jan 19, 2018 at 15:53
  • i assume its meant to be 100k, otherwise why add three unnecessary decimal places. Commented Jan 19, 2018 at 15:53
  • 2
    This sounds like teechart is using a recursive function, exhausting the stack. It might require updating the teechart lib or opening an issue with the developer.
    – user820304
    Commented Jan 19, 2018 at 15:54

2 Answers 2

0

I don't know anything about teechart, but the error message is actually fairly clear.

Every language uses a "call stack" to manage calling into functions. Each time a function is called, the current execution environment has to be saved (all the local variables, what line should be executed next, etc.) and a new execution environment must be set up for the called function to execute with (its parameters, local variables, etc.). If that called function then calls another function, then its current execution environment needs to be saved as well.

To manage saving all this information, we use a stack. When you make a call, your information gets saved to the stack. When that function calls another, it gets pushed onto the stack. When it resolves its execution, it gets pulled off before you, when your function finishes execution you get pulled off the stack.

Now for your problem. Each time we push a new function call onto the stack, that takes some amount of memory. Small, but still there. But there is a finite amount of memory for the call stack to use. So, if a function calls a function calls a function.... and we get nested into function calls too deeply, then the call stack runs out of memory. Once that happens, if you try to call again, the computer is physically unable to properly execute that command, so this error happens.


So what should we do about this?

  1. Either somewhere in your code you have a recursive function call that recurses too deeply.

  2. or somewhere in teechart there is a function that uses recursion and some value you pass to it causes it to recurse too deeply.

The 'problem' function might look something like this:

function recurse_x_times(x) {
  if (x < 1) {
    return;
  }
  // do some other stuff
  return recurse_x_times(x-1);
}
2
  • Sorry this solution don't work. The addRandom deletes all old values. The result of the code is a chart with 1000 values. Okay the addRandom is only a test funktion to show something and my code use real values. I changed the code to: for(var i=0;i<1000000;i++) { Series.data.x[i] = i; Series.data.values[i] = i; } with this i get the same error ( max call stack .. ) Commented Jan 22, 2018 at 8:59
  • Have you tried using console.log() statements to see where in the code this is happening? (i.e. does this error happen when you call Chart1.draw? or somewhere else?). The answer might be that teechart's javascript implementation just can't handle this much data. Or you might have to do some weird teechart specific work arounds to overcome this problem. Also, if you can find the exact number of data points where this error begins happening, that might prove to be useful information. Commented Jan 22, 2018 at 14:43
0

I've reproduced the problem so I've added it to the public tracker (#1976).
And I've already fixed it for the next maintenance release.

1
  • Thank you this help me alot. Commented Jan 26, 2018 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.