Loop Through Columns In Generic Javascript View

KNIME Extensions
1

Hi,

How do I loop through a variable number of columns in a Generic Javascript Node?

I am using Plotly to create a variety of charts for the WebPortal, but I’d like to add a user interface allowing for users to select the data points to include, leading to a variable number of traces.

Thanks
Looping Through Columns - Generic JS View With Plotly.knwf (14.9 KB)

1 Like
2

Should I re-post this in the main “KNIME Analytics Platform” sub-forum?

@paolotamag

3

Paolo took the day off, but he will sure come back to you tomorrow :slight_smile:

cc’ing @AlexanderFillbrunn who is also one of our JavaScript-Magicians.

4

Thank you :slight_smile:

5

Hey @RedJungleBear,

Not entirely sure which data you want to manipulate, but I made a little mini app based on your Workflow which shows some different ways to interact with Plotly and also the KNIME Table in the Generic JS View.

Feel free to use this as a starting point for what you want to build. Let me know if you have any questions. :slight_smile:

plotly_mini_app.knwf (31.3 KB)

Best,
Ben

3 Likes
6

Ben,

This was perfect, thank you!

I really appreciate the clear comments in the code - it made it really easy to modify the code and build multiple templates from the initial node.

I’m not sure the buttons are working correctly though - clicking “Sequence” produces the initial chart, but clicking any of the state buttons produces the chart below:

Multi-Line View
Multi-Line View1060×548 75.9 KB

Thanks,
RJB

7

Hey RBJ,

Glad you were able to use and understand the example :smile:

The issue you’re experiencing with the buttons is something we expect due to the nature of the data we are working with. We are creating line charts which require the x-axis data to be ordered and sequential and the only chronological data we have is the “Sequence” column. When we click a button we are no longer seeing “New Cases vs Time”, but rather “New Cases for all States !== State X vs State X”. I hope this makes sense.

The example is a good place to start interacting with the Plotly and KnimeTable APIs, but it will require a bit of tweaking to create a truly interactive and useful chart. I’m still not entirely sure which feature you want to modify, but here are some possible next-steps you could do:

  • To toggle individual lines, click the name of the line in the Legend of the chart and Plotly will remove it from your chart automatically!
  • You could change the chart type in the “layout” object to something like a scatter plot and then directly compare features with modifies controls.
  • You can combine two tables based on different date ranges and re-map the controls to display different date ranges.
  • many more!

I hope this example gives you some ideas for what to do next!

Btw, have you installed the Plotly extension for KNIME? There may be some other nodes there which you can use in composite views to complement your project! Definitely check it out :+1:

Cheers,
Ben

3 Likes
8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.