Log in / Register

Forum › How do I...?

Print a graph with plotly.js

PliPlaPlots
Hello everybody

First of all let me say that I am aware that the previous issue with plotly (accesors) was fixed on 2023-03-01 according to the roadmap: https://www.princexml.com/roadmap/

After I updated our prince version to the newest release, the previous error indeed disappeared. Unfortunately it was just replaced with another error. This is the HTML I'm sending to prince:

<html>

<body onload="getPlot();">
<div id="tester" style="width:600px;height:250px; background-color: beige;"></div>

<script>
function getPlot()
{
    var TESTER = document.getElementById('tester');

	Plotly.newPlot( TESTER, [{
	x: [1, 2, 3, 4, 5],
	y: [1, 2, 4, 8, 16] }], {
	margin: { t: 0 } } );
}
</script>
</html>


When trying to print it from the CLI, this is the error I get:
"prince: assets/javascript/plotly.js:24926: error: TypeError: undefined value is not an object"

This is the plotly.js file I'm using: https://raw.githubusercontent.com/plotly/plotly.js/master/dist/plotly.js

I tried different versions of plotly, also the minified versions but had no success.


My questions:

1. Did anyone have successfully print a graph with plotly and Prince and can tell me how to do it?
2. If not - is there an alternative library that lets me print similar graphs with Prince?


Any tips or suggestions are welcome. I already tried commenting out the part on line 24926 of plotly.js, but it just leads to another error.

Thank you and best regards

mikeday
There are several issues with plotly that might make it difficult to use with Prince. The first issue you hit was that it uses the CSS Object Model, most of which is not supported in Prince yet. After that there were some other issues, such as a bug affecting JavaScript symbols and the "in" operator that we are still investigating.

It may be worth trying another charting library or alternatively perhaps you could convert the charts to SVG first and pass that to Prince?
PliPlaPlots
Thank you for the reply!

I tried some charting libraries, here is my experience:

D3 (https://d3js.org/)

This one works, we might switch to this one.

Highcharts (https://www.highcharts.com/)

I also included the compatibility file (https://github.com/yeslogic/prince-scripts/tree/master/compatibility/Highcharts), but I got this error:
prince: https://code.highcharts.com/highcharts.js:30: error: SyntaxError: unexpected token keyword("class")


Apexcharts (https://apexcharts.com)

Error:
https://cdn.jsdelivr.net/npm/apexcharts:14: error: ReferenceError: no such property: WeakMap
mikeday
D3 is good! Highcharts used to work in some examples but unfortunately classes are sneaking into more JavaScript libraries and Prince does not support them yet. WeakMap is also not supported. It's possible that earlier versions of these libraries may work, they are moving targets. However if D3 looks promising then that's probably the one to focus on.
PliPlaPlots
Thank you for your replies!

Based on our research we decided to go with D3.js. While implementing I realized that I used an old version (Version 4 https://d3js.org/d3.v4.js) for testing (which works).

When I tried to use the most recent version (Version 7 https://d3js.org/d3.v7.js), I got an error. It looks like they require ECMAScript2015 from Version 6 on and it's currently not working because they are using JS GeneratorFunctions, which seem not supported by Prince.

Are there any plans to support this in future releases of Prince?

TL;DR for anyone reading this because they want to use d3.js, Version 5 seems to be the most recent version that works with Prince.