Line Plot (JavaScript)

A line plot using a JavaScript based charting library. The view can be accessed either via the Interactive View action on the executed node or in the KNIME Web Portal.

The configuration of the node lets you choose the size of a sample to display and to enable certain controls, which are then available in the view. This includes the ability to choose different columns for x and y or the possibility to set a title. Enabling or disabling these controls via the configuration dialog might not seem useful at first glance but has benefits when used in a web portal/wizard execution where the end user has no access to the workflow itself.

The second input port provides the possibility to specify colors for the different lines/columns in the plot. Therefore append a Extract Column Header and Transpose node to the data table which should be plotted in this node. Afterwards use the Color Manager to append the colors based on the individual column names. The node automatically selects the column from the Color Manager and assigns the color values to the plotted columns.

Additionally a static SVG image can be rendered, which is then made available at the first output port.

Note, this node is currently under development. Future versions of the node might have more or changed functionality.

Options

Line Plot Options

Create image at outport
If an image is supposed to be rendered during execute for the upper outport. Disable this option if image is not needed or creation is too time consuming.
Maximum number of rows
Use this numerical value to restrict the number of rows used for this visualization.
Choose column for x-axis
Defines the column that contains the values for X coordinates.
Choose columns for y-axis
Defines the columns that contains the values for Y coordinates. Every included column is represented by one line in the view.
Report on missing values
Check to get the warning messages about missing values and being able to choose missing values handling strategy. If not checked, missing values will be ignored without raising a warning. For y-axis Connect handling method will be used.
Missing value handling (y-axis)
Defines how to handle missing values on the y-axis. Three methods are available:
  • Connect - The plot will be displayed with continuous lines where missing values are ignored.
  • Gap - Columns with missing values might produce gaps in the plotted line.
  • Skip column - The whole column will not be plotted if it contains missing values.

Axis Configuration

Label for x-axis (*)
The label for the x-axis. If left blank, the selected column name is displayed.
Label for y-axis (*)
The label for the y-axis. If left blank, the selected column name is displayed.
Date and Time types
Date and Time values are converted into string using the selected or entered conversion pattern as defined by moment.js. Examples:
  • "dddd, MMMM Do YYYY, h:mm:ss a" formats dates like "Sunday, February 14th 2010, 3:25:50 pm"
  • "ddd, hA" formats dates like "Sun, 3PM"
  • "YYYY-MM-DDTHH:mm:ssZ" formats dates as defined by ISO 8601.
Some valid pattern elements are:
  • Y: year
  • Q: quarter
  • M: month of year
  • W: week of year
  • DDD: day of year
  • D: day of month
  • d: day of week
  • dd: day of week (Su Mo ... Fr Sa)
  • a: am/pm marker
  • H: hour in day (0-23)
  • k: hour in day (1-24)
  • h: hour in am/pm (1-12)
  • m: minute in hour
  • s: second in minute
  • S: millisecond
  • z: Time zone (EST CST ... MST PST)
  • Z: Time zone (offset)
  • X: unix timestamp
Localized formats:
  • LT: Time (e.g. 8:30 PM)
  • LTS: Time with seconds (e.g. 8:30:25 PM)
  • L: Month numeral (0 padded), day of month (0 padded), year (e.g. 09/04/1986)
  • l: Month numeral, day of month, year (e.g. 9/4/1986)
  • LL: Month name, day of month, year (e.g. September 4 1986)
  • ll: Month name (short), day of month, year (e.g. Sep 4 1986)
  • LLL: Month name, day of month, year, time (e.g. September 4 1986 8:30 PM)
  • lll: Month name (short), day of month, year, time (e.g. Sep 4 1986 8:30 PM)
  • LLLL: Month name, day of month, day of week, year, time (e.g. Thursday, September 4 1986 8:30 PM)
  • llll: Month name (short), day of month, day of week (short), year, time (e.g. Thu, Sep 4 1986 8:30 PM)
For printing an arbitrary string, wrap the string in square brackets, e.g. '[today] dddd'.
Locale
The locale which is used to render all date/time cells.
Local Date format
A global format, which is applied to all locale date cells. To format the string the framework Moment.js is used.
Local Date and Time format
A global format, which is applied to all local date/time cells. To format the string the framework Moment.js is used.
Local Time format
A global format, which is applied to all local time cells. To format the string the framework Moment.js is used.
Zoned Date and Time format
A global format, which is applied to all zoned date/time cells. To format the string the framework Moment.js is used.
Time zone (for zoned format)
Time zone to use when rendering Zoned Date and Time format. Zoned Date and Time format must contain a zone mask symbol ('z' or 'Z') to enable the time zone selector.
Date and Time (legacy) format
A global format, which is applied to all date/time (legacy) cells. To format the string the framework Moment.js is used.
Show color legend
Switches the legend on/off. The legend shows the mapping between colors used in the view and the respective column names.
Auto range axes
Select if axes ranges are supposed to be automatically calculated. This also applies if the columns are changed in the view.
Use domain information
Using this option, the axis ranges are determined by bounds from the domain on initial layout.
Always show origin
Using this option, the origin will always be displayed inside the view.

General Plot Options

Chart title (*)
The title of the graph shown above the generated image. If left blank, no title will be shown.
Chart subtitle (*)
The subtitle of the graph shown above the generated image. If left blank, no subtitle will be shown.
Width of image (in px)
The width of the generated SVG image.
Height of image (in px)
The height of the generated SVG image.
Resize view to fill window
Setting this option resizes the view to the available area of the window. If disabled the view size is static according to the set width and height.
Display full screen button
Displays a button enabling full screen mode.
Background color
The color of the background of the image.
Data area color
The background color of the data area, within the axes.
Show grid
If an additional grid is being rendered at the axes tick positions.
Grid color
The color of the grid.
Line Size
The thickness of the lines of the plot
Show warnings in view
If checked, warning messages will be displayed in the view when they occur.

View Controls

Enable view edit controls
If checked all edit controls selected below will be rendered in the view. Unchecking this option disables all edit controls.
Enable title edit controls
Renders a text box to change the chart title in the view.
Enable subtitle edit controls
Renders a text box to change the chart subtitle in the view.
Enable column chooser for x-axis
Renders a selection box to change column used for X coordinates in the view.
Enable column chooser for y-axis
Renders a selection box to change column used for X coordinates in the view.
Enable label edit for x-axis
Renders a text box to change x-axis label in the view.
Enable label edit for y-axis
Renders a text box to change y-axis label in the view.
Enable mouse crosshair
Enables the display of additional crosshairs with labels of the current mouse position.
Snap to data points
If enabled the crosshairs will snap to the closest data point according to mouse position.
Enable panning
Enable panning on the plot. To start panning click and drag the mouse. Note if panning and drag zooming is enabled, panning can be achieved by holding the Ctrl key and dragging the mouse.
Enable mouse wheel zooming
Enable zooming on the plot using the mouse wheel.
Enable drag zooming
Enable zooming on the plot by dragging the mouse and drawing a zoom rectangle. Dragging from the top-left down will create a zoom rectangle, dragging from the bottom right up will reset the zoom to fit the extends of the plot. Note if panning and drag zooming is enabled, panning can be achieved by holding the Ctrl key and dragging the mouse.
Show zoom reset button
Renders a button to resize the plot to it's extends.
Enable line size edit
Renders a number spinner to control the thickness of the lines in the view.

Input Ports

Icon
Data table with data to display.
Icon
Data table containing one column with the column names of table which has in addition a color assigned.

Output Ports

Icon
SVG image rendered by the JavaScript implementation of the line plot.
Icon
Data table containing the input data.

Popular Predecessors

Popular Successors

Views

Interactive View: Line Plot
Displays a line plot visualization of the input data.

Workflows

Links

Developers

You want to see the source code for this node? Click the following button and we’ll use our super-powers to find it for you.

Installation

To use this node in KNIME, install the extension KNIME JavaScript Views from the below update site following our NodePit Product and Node Installation Guide:

v5.2

A zipped version of the software site can be downloaded here.

Plugin provider: KNIME AG, Zurich, Switzerland
Plugin version: 5.2.1.v202402011442
On NodePit since: 2023-12-06
Last update: 2024-04-19
KNIME versions: Since v3.6

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!