Webportal scatter plot user chooses colours

I am working on the brilliant 2D/3D scatter plot for the web portal by swebb (Javascript view creation: 3D scatter plot) to view test results.

Our KNIME workflow uses the color manager so users can set the colours for the markers/plot points on the original Erlwood 2D/3D scatter plot (based on a test pass/fail).
Is there a way for users to select colours in a Webportal Quickform or JavaScript view (e.g. by adding colour pickers to the DOM) that can then be passed on to either the table of data used in the generic JavaScript view for the 2D/3D scatter plot, or directly to that node itself?

Sorry if I’m not explaining this well, I’m only a KNIME beginner.



1 Like

Hi Hannah,
yes it is possible.

If I understood the problem correctly the solution should be:

You would need to ask the user in the page of the WebPortal before the 3D scatter plot.
Unless you don’t add something within that JavaScript code of the plot
the selection of the colors cannot happen in the same page of the WebPortal.

Just create a dummy table with the Table Creator node
with a column listing some strings that makes sense (e.g. Color 1, Color 2, …)
then feed the created table to the Color Manager node.
Set the Color Manager node to define some default colors from those palettes
on the manually created string column.

You can then feed the colored data to the Table View to show the color to the user
with the possibility of selecting the rows of the desired colors.

Then I would use the output of the Table View
with the boolean column that shows the user selection
to select the colors from the output of the Extract Color node.

That is a table with RGB values which you can then combine together
with String Manipulation node so that it becomes a string for each color “rgb(255,255,255)”.
Respectively the 3 values in the string are the R, the G and the B column, you ignore the A and RGBA columns.

Now you finally have a table with colors to feed them to the Generic JavaScript node
which should be in the next WebPortal page/Wrapped Metanode where you have that 3D scatterplot.

Just convert them first to flow variable via the Table Column to Variable node
and then you can create variable in JavaScript to use them.

If the number of colors changes you can use the JSON nodes
so that it is easier to deal with the list of colors as an array in JavaScript.

I hope this answers your questions,
Let me know

Sorry for the late reply, I’ve not had a great deal of time to look at this.
This isn’t quite what I’m after. I have a table of results that are to be plotted on the 2D/3D scatter plot. I want users on the web portal to choose the colours to associate with the results, pass those onto the table so they can then be used as the marker colours in the scatter plot.
I can’t figure out how to get a colour picker onto the generic javascript view, as it’s not easy to pass this onto the DOM.

It looks like your problem is not connected to a KNIME functionality, but more to a JavaScript one.
I explained how to export from the Color Manager node the RGB strings and to attached them to the KNIME table. Once the the colors information are available in the Generic JavaScript node is up to the user to figure out, given the type visualization and the used library, how to handle the colors. Maybe if you post the workflow I can have a look :slight_smile:

Did I understand your question or is it instead a KNIME functionality?