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();
}
Rob
  • 14,746
  • 28
  • 47
  • 65
Michael Fischer
  • 11
  • 1
  • in the us this number is 100, in other countries it's 100 thousand. should avoid thousands separators to be clear. – I wrestled a bear once. Jan 19 '18 at 15:51
  • also, the code can handle whatever the machine can handle... there is no definite answer for this.. – I wrestled a bear once. Jan 19 '18 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 Jan 19 '18 at 15:53
  • i assume its meant to be 100k, otherwise why add three unnecessary decimal places. – I wrestled a bear once. Jan 19 '18 at 15:53
  • Isn't this a question for the TeeChart developer? –  Jan 19 '18 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. –  Jan 19 '18 at 15:54
  • I would consider splitting up your adds into smaller chunks. – Jack Jan 19 '18 at 16:01
  • Series.addRandom(200000); This should show 200000 values ( two hundred thousand ) – Michael Fischer Jan 19 '18 at 16:07
  • @rock star Yes but this is the test version of the teechart and you can only write in the teechart board if you have purchased the version. The readme. txt says in this case i'm should write here. – Michael Fischer Jan 19 '18 at 16:16

2 Answers2

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);
}
Kallmanation
  • 1,132
  • 7
  • 11
  • 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 .. ) – Michael Fischer Jan 22 '18 at 08: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. – Kallmanation Jan 22 '18 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.

Yeray
  • 5,009
  • 1
  • 13
  • 25