Icon

Javascript_​load_​3rdPart_​Library_​2022_​05_​12

This workflow shows different method for loading 3rd part JS library， which make Generic JavaScript View implement flexible data visualization. Most of them are collected fromKnime forum (AlexanderFillbrun@knime) and Internet.这个工作流用来展示用不同的方法来加载第三方 js 库，使得 Generic JavaScirpt View 可以完成更加灵活的数据的可视化. 主要素材收集自 knime 论坛和互联网。Last update @ 2022.05.12 by BFcat Mthod A： Store local js lib file in string variable, and pass it to JavaScript View with CSS editor by using variable port JS文件存储在本地， 结合 CSS editor， 将处理结果作为变量传给可视化节点 Mthod B： Fetch the js lib online, convert into variable and pass into the Viewer as a variable 在线获取指定的js lib， 将处理结果作为变量传给可视化节点 Mthod C： 1. According to the file list, fetch the js libs online, 2. Store the js lib files locally in a table 3. Reload the js lib and convert into variable, pass into the Viewer as a variable 在线获取指定的js lib， 保存到本地， 再从本地加载后作为变量传给可视化节点 If there are several JS libs, that would be imported for the workflow, one way below is recommended by aworker@knimehttps://forum.knime.com/t/generic-java-script-view-node-does-not-recognize-an-external-library/33302/6 If there are several JS libs, that would be imported for the workflow, another method is use filelist to loading all JS lib stored locally,which is recommended by AlexanderFillbrun@knimehttps://forum.knime.com/t/using-external-js-libraries-via-webtemplate-folder/23855/5 Dynamically find and return the JS lib path by using pythonBefore you run below workflow:1. Change local JS files' path. Here echarts.min.js is really used. Many JS libs, pre-defined in a tableBefore you run below workflow:1. Change local JS files' path. Here echarts.min.js and echarts.js are really used.Echarts.js can be found at https://echarts.apache.org/zh/index.html Get mermaid.jsblob to stringConvert String to URIFetch the variableinto a tabletabulatorcssDataTables css file fromhttps://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.csshttps://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.jsHTML examplehttps://code.jquery.com/jquery-3.5.1.jsTable Contentlocal echarts locallyNode 17392Node 17396blob to stringLocal JS filesNode 17406Convert String to URIblob to stringHTML exampleHTML exampleNode 17412Node 17413 GET Request Binary Objectsto Strings GenericJavaScript View String to URI Variable toTable Row JS Library GenericJavaScript View CSS Editor Table Rowto Variable CSS Editor Binary Objectsto Strings GET Request GenericJavaScript View GET Request Binary Objectsto Strings Table Row to Variable(deprecated) Table Creator Table Rowto Variable Table Rowto Variable Python EditVariable Conda EnvironmentPropagation Files toBinary Objects Binary Objectsto Strings Table Creator Files toBinary Objects String to URI Binary Objectsto Strings GenericJavaScript View GenericJavaScript View Table Rowto Variable Table Columnto Variable This workflow shows different method for loading 3rd part JS library， which make Generic JavaScript View implement flexible data visualization. Most of them are collected fromKnime forum (AlexanderFillbrun@knime) and Internet.这个工作流用来展示用不同的方法来加载第三方 js 库，使得 Generic JavaScirpt View 可以完成更加灵活的数据的可视化. 主要素材收集自 knime 论坛和互联网。Last update @ 2022.05.12 by BFcat Mthod A： Store local js lib file in string variable, and pass it to JavaScript View with CSS editor by using variable port JS文件存储在本地， 结合 CSS editor， 将处理结果作为变量传给可视化节点 Mthod B： Fetch the js lib online, convert into variable and pass into the Viewer as a variable 在线获取指定的js lib， 将处理结果作为变量传给可视化节点 Mthod C： 1. According to the file list, fetch the js libs online, 2. Store the js lib files locally in a table 3. Reload the js lib and convert into variable, pass into the Viewer as a variable 在线获取指定的js lib， 保存到本地， 再从本地加载后作为变量传给可视化节点 If there are several JS libs, that would be imported for the workflow, one way below is recommended by aworker@knimehttps://forum.knime.com/t/generic-java-script-view-node-does-not-recognize-an-external-library/33302/6 If there are several JS libs, that would be imported for the workflow, another method is use filelist to loading all JS lib stored locally,which is recommended by AlexanderFillbrun@knimehttps://forum.knime.com/t/using-external-js-libraries-via-webtemplate-folder/23855/5 Dynamically find and return the JS lib path by using pythonBefore you run below workflow:1. Change local JS files' path. Here echarts.min.js is really used. Many JS libs, pre-defined in a tableBefore you run below workflow:1. Change local JS files' path. Here echarts.min.js and echarts.js are really used.Echarts.js can be found at https://echarts.apache.org/zh/index.html Get mermaid.jsblob to stringConvert String to URIFetch the variableinto a tabletabulatorcssDataTables css file fromhttps://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.csshttps://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.jsHTML examplehttps://code.jquery.com/jquery-3.5.1.jsTable Contentlocal echarts locallyNode 17392Node 17396blob to stringLocal JS filesNode 17406Convert String to URIblob to stringHTML exampleHTML exampleNode 17412Node 17413 GET Request Binary Objectsto Strings GenericJavaScript View String to URI Variable toTable Row JS Library GenericJavaScript View CSS Editor Table Rowto Variable CSS Editor Binary Objectsto Strings GET Request GenericJavaScript View GET Request Binary Objectsto Strings Table Row to Variable(deprecated) Table Creator Table Rowto Variable Table Rowto Variable Python EditVariable Conda EnvironmentPropagation Files toBinary Objects Binary Objectsto Strings Table Creator Files toBinary Objects String to URI Binary Objectsto Strings GenericJavaScript View GenericJavaScript View Table Rowto Variable Table Columnto Variable

Nodes

Extensions

Links

Download

To use this workflow in KNIME, download it from the below URL and open it in KNIME:

Download Workflow
Created by: MD45QH
Created at: 2020-05-26
On NodePit since: 2022-05-15
Last update: 2024-04-26
Created with KNIME version: v4.5.2

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

Try NodePit Runner!