Interactive graphs with plotly #6031

vandenman · 2025-09-24T20:15:56Z

Requires jasp-stats/jaspBase#178 and jasp-stats/jaspGraphs#125

Probably best to discuss some of the implementation details in person or via video call or so, but in a nutshell:

if possible, show plots as interactive plots by default (for now).
switching between the static and interactive version of a plot is possible through the dropdown of a plot.
resizing sort of works.

There are quite some rough edges though:

For some plots the static version looks fine but the interactive version could use some tweaks (For example, more space between axis title and axis tick labels).
The updating of the axes needs to be polished. Right now it can cause flickering when there are many plots.
Passing the data now happens through the json directly (as it is json). However, the objects can be very large and make the logs hard if not impossible to read. Perhaps this should be saved as a separate object on disk and loaded in by js to keep the json messages from the desktop/ engine readable.
I did not look at html/pdf export. The pdf should just use the static plots. But the html could, in theory, use the standalone feature from plotly. That way most interactivity is retained, although the file size can become quite large.

Nevertheless, I think this draft PR is far enough for:

An initial review.
A starting point for changes to the R analyses related to interactive figures. For example, the analyses in R need to decide what to show in the tooltip that is shown on hover (right now this is just whatever plotly does by default) and also need to check how the variables are named (right now this uses the internal aestethic names, which is what plotly does by default).

Known issues:

ggplot2 objects with polar coordinates do not work, see Support for arbitrary coordinate systems plotly/plotly.R#878. This is a problem, because any pie chart (e.g., those in descriptives, but also the BF pizza) is currently implemented in polar coordinates. It's unclear what the best way is to fix this. plotly does support both polar coordinates, and has a separate 'pie' trace type. Both can do exactly what we need, but there is no automatic conversion from ggplot. It's not easy to see from the ggplot object that when we are creating a pie chart, because the ggplot object just contains a bar graph shown in polar coordinates. Possible solutions:
- Fix the polar coordinate conversion.
- Inside jaspGraphs, add special plotly code to everything that returns a pie chart, so that instead of calling ggplotly we use the custom plotly code (hacky).

shun2wang · 2025-09-25T09:10:26Z

Great, this is what I have always wanted to do!👍
A suggestion: It seems that we can streamline some js dependencies. For example, for the jquery library, we can only keep *.min.js instead of .js and .map in the production environment, and only keep those redundant things in the development environment.

JorisGoosen · 2025-09-25T12:33:25Z

Yes and maybe we can also depend on their respective source repositories as submodules or something, so we can stay up to date easier and with more easily traceable origins

shun2wang · 2025-09-25T12:40:51Z

Yes and maybe we can also depend on their respective source repositories as submodules or something, so we can stay up to date easier and with more easily traceable origins

Or simply copy them form somewhere while building.

vandenman · 2025-09-25T12:59:19Z

It seems that we can streamline some js dependencies.

Sounds like a good idea! For what it's worth, I currently just copied these from a plotly not-standalone export. Basically, in R, export a figure as a not-standalone html which produces an html file and separate includes. The includes I copied over in this PR. Doing this generically is probably possible, although I'm not entirely sure how this will work when in the future people an install a newer or older version of a module, which uses a newer or older version of plotly.

vandenman · 2026-01-06T12:19:40Z

Desktop/html/js/image.js

+			// Then create new plot
+			Plotly.newPlot(targetEl, payload.data, payload.layout)
+				.then(() => {
+					console.log("Plotly chart rendered successfully");
+					// Mark the element as having a valid Plotly chart
+					targetEl._plotlyInitialized = true;
+				})
+				.catch((err) => {
+					console.error("Plotly rendering failed:", err);
+					targetEl._plotlyInitialized = false;
+				});


@JorisGoosen you need to adjust this part if you want to pass the plot differently.

JorisGoosen · 2026-01-06T19:42:16Z

Ok, ive changed the code to use files as the basis of the plots so the results-json is nice and clean.
I couldnt find out how to switch back to normal plots though?

vandenman · 2026-01-06T19:51:56Z

I'll take a look tomorrow, should be some boolean somewhere that's default should be flipped.

JorisGoosen · 2026-01-06T20:37:55Z

I found the way to switch and everything seems to work.

JorisGoosen · 2026-01-06T21:50:01Z

If I export to pdf it seems the interactive plot is exported, is that what we want?
In at least jaspTTests things look a little bit different.

Ill add a basic preference to show/hide interactive plots by default

JorisGoosen · 2026-01-06T21:50:21Z

I love how smooth resizing the interactive plots feel btw ❤️
dit: resizing the normal plots behind them seems a bit broken though

Also if there is no dataset yet it should still be attempted to load it... insert json slyly into json going to js decode columnnames in json rename menu entry

shun2wang

I recommend we could just pack https://github.com/plotly/plotly.R/tree/master/inst/htmlwidgets to a htmlwidgets.zip file. and unzip it to cmake build dir and pack it into .qrc while building JASP. To make build clean and simple. Jquery is not necessary cause we already have it as library.

vandenman · 2026-01-31T19:41:37Z

That sounds reasonable, but the plotly version used by R and the js need to be kept in sync somehow, so perhaps not just plotly@master but rather a specific tag or commit. I do remember running into issues with jquery somehow, either they or we (probably we) used an older version which caused some issue. Keeping this working while allowing for different versions of plotly (say when installing an older version of a module) is also something I haven't figured out yet.

shun2wang · 2026-02-01T01:05:16Z

That sounds reasonable, but the plotly version used by R and the js need to be kept in sync somehow, so perhaps not just plotly@master but rather a specific tag or commit. I do remember running into issues with jquery somehow, either they or we (probably we) used an older version which caused some issue. Keeping this working while allowing for different versions of plotly (say when installing an older version of a module) is also something I haven't figured out yet.

yes, I had tried that but cannot push to this pr then i made that comment above,it was because we already have jquery even that htmlwidgets doesn't include jquery, so plotly.r should never need it.

vandenman requested a review from JorisGoosen September 24, 2025 20:15

shun2wang self-requested a review September 25, 2025 12:46

vandenman commented Jan 6, 2026

View reviewed changes

JorisGoosen force-pushed the plotly branch from aa54ff5 to 6f7d96b Compare January 6, 2026 20:37

JorisGoosen force-pushed the plotly branch from 6f7d96b to 37770bf Compare January 6, 2026 20:41

JorisGoosen force-pushed the plotly branch from 96357ed to 7698abb Compare January 6, 2026 22:08

vandenman and others added 11 commits January 14, 2026 13:23

does not work

52aad57

tempcommit

fa4d250

mwe works, now adding it to jaspBase

949488b

one step closer

bb42591

basic idea working

7f6274e

cleanup

0aaa641

tweaks to addPlotlyRangeRameHooks

be97bb5

Make sure preloadData is set to true by default everywhere

774572f

Also if there is no dataset yet it should still be attempted to load it... insert json slyly into json going to js decode columnnames in json rename menu entry

Add a preference for showing interactive plots by default or not

5d902f1

check what it is before trying to load it

a54ac75

fix the check

1f7a8eb

JorisGoosen force-pushed the plotly branch from 2f398b3 to 1f7a8eb Compare January 14, 2026 12:26

shun2wang reviewed Jan 31, 2026

View reviewed changes

Uh oh!

Interactive graphs with plotly #6031

Are you sure you want to change the base?

Interactive graphs with plotly #6031

Uh oh!

Conversation

vandenman commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shun2wang commented Sep 25, 2025

Uh oh!

JorisGoosen commented Sep 25, 2025

Uh oh!

shun2wang commented Sep 25, 2025

Uh oh!

vandenman commented Sep 25, 2025

Uh oh!

vandenman Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

JorisGoosen commented Jan 6, 2026

Uh oh!

vandenman commented Jan 6, 2026

Uh oh!

JorisGoosen commented Jan 6, 2026

Uh oh!

JorisGoosen commented Jan 6, 2026

Uh oh!

JorisGoosen commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shun2wang left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vandenman commented Jan 31, 2026

Uh oh!

shun2wang commented Feb 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vandenman commented Sep 24, 2025 •

edited

Loading

JorisGoosen commented Jan 6, 2026 •

edited

Loading

shun2wang left a comment •

edited

Loading