Forum How do I...?

What prevents me from using Chart.js?

joelmeador
I know there is some support for canvas elements, but it's not clear what all the moving parts are. Attached a simple sample cobbled together from stuff at http://www.chartjs.org.
  1. chartsjs-sample.html1.8 kB
mikeday
It's because Prince does not support the offsetWidth DOM property, so it is falling back to getComputedStyle() to determine the width of the canvas, however the browsers cheat and return the used width of "300", not the computed width of "300pt" (or whatever) and setting the canvas width to 300pt will fail with a NotSupported exception.
jasongladish
Is this still true? I searched through https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js looking for offsetWidth so I could understand more, but didn't find it anywhere in there.
mikeday
It is probably calling the jQuery width() function, if I recall correctly?
jasongladish
Searching through the source it doesn't look like it, but there's a ton of it so it's hard to say for certain. I've attached the file I'm testing.

Is there any way I can get Prince to print out this sort of JS error info? --debug doesn't seem to do it, but I'm happy to debug further if there's a way to get the info.
  1. chartjs2.html2.9 kB
    chartjs test
mikeday
JavaScript is tricky to debug because missing references evaluate to undefined, which can then cause exceptions to be thrown from code that tries to access the value much later on.

In this case Chart.js is using the Array.reduce method. We can easily add support for this, however after doing so the script then fails on Canvas.measureText, which may take longer.
jasongladish
Ah, that makes sense. Thanks a ton for the explanation.

In this case I don't see any JS errors in the Prince output or logs, even with --debug. Are there perhaps some error handling JS functions I could define, or another option, that would give me more insight into when this kind of error was happening?
mikeday
Make sure that you are also specifying the --javascript option on the command-line so that the scripts run in the first place.
hertling
Is there any update on support for Chart.js? We're trying to get it working, but not having any luck.
hallvord
Hi, I have investigated running Chart.js in Prince a bit, and I see that core parts of the functionality depend on reading layout / dimension information through the DOM. This is the same issue described earlier. It's hard or impossible to work around since Prince's implementation runs JavaScript before doing layout, and the information the script tries to look up through the DOM is simply not available yet.

It also uses the measureText() method on the CANVAS 2d rendering context - I wonder if Prince could support that method without implementing a lot of the hard layout stuff.. For Chart.js, it would unfortunately not get us very far to have just that method.

Announcement: repos for tests/utils