Plot show up empty

plotly.js
1

I’m trying to integrate Plotly.js into my GWT (formerly Google Web Toolkit) application.
I can generate the charts I need in a standalone HTML file and everything works just fine.
If I then try and include them in the GWT application, the chart shows up empty.

I then went back and used one of the example charts (https://plot.ly/javascript/splom/) and just pasted that into my code and it still shows up empty.

2019-05-23 09_25_42-Germinate 3 Demo Database
58237386-e2514f00-7d3c-11e9-8d07-08a804c49e8b.png773×774 4.22 KB

There are no errors in the console.
Unfortunately, I cannot provide a reproducible example, because I’m using GWT. The code I’m using though is here:

private native void jsni(String id) /*-{
	$wnd.Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv', function(err, rows){

		function unpack(rows, key) {
			return rows.map(function(row) { return row[key.replace('.',' ')]; });
		}

		colors = [];
		for (i=0; i < unpack(rows, 'class').length; i++) {
			if (unpack(rows, 'class')[i] === "Iris-setosa") {
				colors.push(0)
			} else if (unpack(rows, 'class')[i] === "Iris-versicolor") {
				colors.push(0.5)
			} else if (unpack(rows, 'class')[i] === "Iris-virginica") {
				colors.push(1)
			}
		}

		var pl_colorscale=[
			[0.0, '#19d3f3'],
			[0.333, '#19d3f3'],
			[0.333, '#e763fa'],
			[0.666, '#e763fa'],
			[0.666, '#636efa'],
			[1, '#636efa']
		];

		function axis() {
			return {
				showline: false,
				zeroline: false,
				gridcolor: '#ffff',
				ticklen: 4
			}
		}

		var data = [{
			type: 'splom',
			dimensions: [
				{label:'sepal length', values:unpack(rows,'sepal length')},
				{label:'sepal width', values:unpack(rows,'sepal width')},
				{label:'petal length', values:unpack(rows,'petal length')},
				{label:'petal width', values:unpack(rows,'petal width')}
			],
			text: unpack(rows, 'class'),
			marker: {
				color: colors,
				colorscale:pl_colorscale,
				size: 7,
				line: {
					color: 'white',
					width: 0.5
				}
			}
		}];

		var layout = {
			title:'Iris Data set',
			height: 800,
			width: 800,
			autosize: false,
			hovermode:'closest',
			dragmode:'select',
			plot_bgcolor:'rgba(240,240,240, 0.95)',
			xaxis:axis(),
			yaxis:axis(),
			xaxis2:axis(),
			xaxis3:axis(),
			xaxis4:axis(),
			yaxis2:axis(),
			yaxis3:axis(),
			yaxis4:axis()
		};

		$wnd.Plotly.react(id, data, layout)

	});
}-*/;

Note that the $wnd. is a GWT requirement for accessing globally defined variables.

The chart is fully functional (zoom, pan, etc), but there just isn’t any data. Interestingly, since this is the SPLOM example, there’s also only a single set of axis and not the whole grid. It’s almost like the layout and data are ignored, which also seemed to be the case in the custom charts that I tried to integrate originally.

I originally posted this on GitHub, but it was suggested to post it here to get some feedback from other potential GWT developers or anyone who may be able to help.

Any help is appreciated!