TradeView financial charts in Dashboard UI Template

General
1

Hello, attempting to incorporate TraveView charts into Dashboard UI Template. Code below works fine as a direct embed. However, not having success doing it via a msg.payload inject (in order to be able to programmatically change the stock value ["symbol": "NASDAQ:AAPL"]). Tried every method/example I could find - the chart is not getting rendered. Thank you !!

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_28ece"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_28ece"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->
2

Hello ... you can pass the chart "symbol" in msg.payload and catch it in the code before you draw the chart.
There is an example in the side help tab of the ui_template node how to accept a msg.

Example flow :

[{"id":"2662d21336076a40","type":"ui_template","z":"54efb553244c241f","group":"267f752bf969a63c","name":"","order":0,"width":"24","height":"16","format":"<!-- TradingView Widget BEGIN -->\n<div class=\"tradingview-widget-container\">\n  <div id=\"tradingview_28ece\"></div>\n  <div class=\"tradingview-widget-copyright\"><a href=\"https://www.tradingview.com/symbols/NASDAQ-AAPL/\" rel=\"noopener\"\n      target=\"_blank\"><span class=\"blue-text\">AAPL Chart</span></a> by TradingView</div>\n  <script type=\"text/javascript\" src=\"https://s3.tradingview.com/tv.js\"></script>\n  <script type=\"text/javascript\">\n    (function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      \nlet sym = msg.payload\n\nlet chart = new TradingView.widget(\n  {\n  \"width\": 980,\n  \"height\": 610,\n  \"symbol\": sym,\n  \"interval\": \"D\",\n  \"timezone\": \"Etc/UTC\",\n  \"theme\": \"dark\",\n  \"style\": \"1\",\n  \"locale\": \"en\",\n  \"toolbar_bg\": \"#f1f3f6\",\n  \"enable_publishing\": false,\n  \"allow_symbol_change\": true,\n  \"container_id\": \"tradingview_28ece\"\n}\n  );\n\n\n    }\n  });\n})(scope);\n\n\n\n  </script>\n</div>\n<!-- TradingView Widget END -->","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":1020,"wires":[[]]},{"id":"3458dd110edd354c","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"NASDAQ:AAPL","payloadType":"str","x":500,"y":980,"wires":[["2662d21336076a40"]]},{"id":"72c9cd7d11ef0087","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"USGSS","payloadType":"str","x":530,"y":1060,"wires":[["2662d21336076a40"]]},{"id":"267f752bf969a63c","type":"ui_group","name":"Default","tab":"11b9c054a98cd693","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"11b9c054a98cd693","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
3

Thank you so much - works perfectly !

4

One small issue - on the browser refresh the chart disappears. I tried toggling the "Reload last value on refresh" in the template node, but makes no difference..

5

i noticed that also .. if you open your browser's developers tools you'll see that the libraries for your chart take a while to load and the TradingView.widget is undefined when the msg is resent and received (on refresh) and the code to draw it is triggered to soon.

the easiest way i found to avoid this is to create a small delay with js setTimeout in order to wait for the libraries.

[{"id":"2662d21336076a40","type":"ui_template","z":"54efb553244c241f","group":"267f752bf969a63c","name":"","order":0,"width":"24","height":"16","format":"<!-- TradingView Widget BEGIN -->\n<div class=\"tradingview-widget-container\">\n    <div id=\"tradingview_28ece\"></div>\n    <div class=\"tradingview-widget-copyright\"><a href=\"https://www.tradingview.com/symbols/NASDAQ-AAPL/\" rel=\"noopener\"\n            target=\"_blank\"><span class=\"blue-text\">AAPL Chart</span></a> by TradingView</div>\n    <script type=\"text/javascript\" src=\"https://s3.tradingview.com/tv.js\"></script>\n    <script type=\"text/javascript\">\n        (function (scope) {\n            scope.$watch('msg', function (msg) {\n                if (msg) {\n                    console.log(\"Msg received frm node-red\", msg)\n\n                    let sym = msg.payload\n\n                    setTimeout(() => {\n\n                        let chart = new TradingView.widget(\n                            {\n                                \"width\": 980,\n                                \"height\": 610,\n                                \"symbol\": sym,\n                                \"interval\": \"D\",\n                                \"timezone\": \"Etc/UTC\",\n                                \"theme\": \"dark\",\n                                \"style\": \"1\",\n                                \"locale\": \"en\",\n                                \"toolbar_bg\": \"#f1f3f6\",\n                                \"enable_publishing\": false,\n                                \"allow_symbol_change\": true,\n                                \"container_id\": \"tradingview_28ece\"\n                            }\n                        );\n\n\n                    }, 1000)\n\n\n                }\n            });\n        })(scope);\n\n\n\n    </script>\n</div>\n<!-- TradingView Widget END -->","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":740,"y":1020,"wires":[[]]},{"id":"3458dd110edd354c","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"NASDAQ:AAPL","payloadType":"str","x":500,"y":980,"wires":[["2662d21336076a40"]]},{"id":"72c9cd7d11ef0087","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"USGSS","payloadType":"str","x":530,"y":1060,"wires":[["2662d21336076a40"]]},{"id":"267f752bf969a63c","type":"ui_group","name":"Default","tab":"11b9c054a98cd693","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"11b9c054a98cd693","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
6

Thank you! I have another challenge, please. My dashboard has a table that is dynamically generated: the "OUT" function receives a new symbol and sends data via msgTable.payload to generate a new row. I want to implement a rowClick callback on the table that would load the corresponding chart on the front end. I found a perfect example of rowClick callback functionality. Just can't put it all together :slight_smile:

Screenshot 2021-12-25 212913
Screenshot 2021-12-25 2129131986Ă—598 163 KB 

msgTable  = {};
msgChart  = {};
msgAction = {};


var listed = flow.get('listed');
var l_coin = flow.get('l_coin');
var price; var change; var f_coin; var g_coin; var b_coin; var c_coin; var id; var token; var coin; var symbol;

    if (msg.payload.ftx.price > 0) {
        price = msg.payload.ftx.price;
        change = (msg.payload.ftx.change * 100).toFixed(2);   
        id = 739970400;
        token = "bae88628-4c8a-4176-a43b-a8dbd5f4f82d00";
        coin = msg.payload.ftx.coin;
        symbol = "FTX:"+ l_coin + "USD";
}   
    else if (msg.payload.gate.price > 0) {
         price = msg.payload.gate.price; 
         change = msg.payload.gate.change; 
         id = 739970400;
         token = "bae88628-4c8a-4176-a43b-a8dbd5f4f82d00";
         coin = msg.payload.gate.coin;
         symbol = "KUCOIN:"+ l_coin + "USD";
}   
    else if (msg.payload.binance.price > 0) {
         price = msg.payload.binance.price; 
         change = msg.payload.binance.change;
         id = 739970400;
         token = "bae88628-4c8a-4176-a43b-a8dbd5f4f82d00";
         coin = msg.payload.binance.coin;
         symbol = "BINANCE:"+ l_coin + "USDT";
}


if (msg.payload.ftx.price > 0) { f_coin = msg.payload.ftx.coin }
if (msg.payload.gate.price > 0) { g_coin = msg.payload.gate.coin }
if (msg.payload.binance.price > 0) { b_coin = msg.payload.binance.coin }
c_coin = msg.payload.coinbase.coin;


msgTable.payload = { "l_coin": l_coin, "listed": listed, "f_coin": f_coin, "g_coin": g_coin, "b_coin": b_coin, "c_coin": c_coin, "price": price, "change": change, "time": msg.time };
msgChart.payload = symbol;
msgAction = { "message_type": "bot", "bot_id": id, "email_token": token, "delay_seconds": "0", "pair": coin};

return [msgTable,msgChart,msgAction];

RowClick

[
    {
        "id": "a8ef826f4165b6de",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "8a38e79e.e30648",
        "type": "function",
        "z": "a8ef826f4165b6de",
        "name": "Format Table",
        "func": "\n//var DT_List = global.get(\"DT_List\");\n//var i;\n//var Line = msg.payload;\n\n\n\n// Can change color in CSS, but not sure where / how to do this:\n    //.tabulator .tabulator-row.selected{\n    //\tbackground: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/\n    //}\n\n// Display up to 12 rows, select row 0, and highlight in red.\nmsg.ui_control = {\n    \"customHeight\":12,\n    \"tabulator\": {\n        \"selectable\":1,\n        \"renderComplete\":\"function(){this.send({ui_control:{callback:'renderComplete'}})}\"\n    }\n};\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 650,
        "y": 400,
        "wires": [
            [
                "1d03a916.1ea9c7"
            ]
        ]
    },
    {
        "id": "1d03a916.1ea9c7",
        "type": "ui_table",
        "z": "a8ef826f4165b6de",
        "group": "58a8895c.e04f28",
        "name": "Table1",
        "order": 1,
        "width": "16",
        "height": "10",
        "columns": [
            {
                "field": "RecNo",
                "title": "RecNo",
                "width": "11px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "EvtStartTime",
                "title": "Event Start Time",
                "width": "20px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "L_Code",
                "title": "L_Code",
                "width": "12px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Dur",
                "title": "Dur",
                "width": "10px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 1,
        "cts": true,
        "x": 1055,
        "y": 400,
        "wires": [
            [
                "2e4f7d73.baa142",
                "5e0b3d4e.bc9634"
            ]
        ]
    },
    {
        "id": "2e4f7d73.baa142",
        "type": "debug",
        "z": "a8ef826f4165b6de",
        "name": "A",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1208,
        "y": 383,
        "wires": []
    },
    {
        "id": "2ba17e32.afc672",
        "type": "function",
        "z": "a8ef826f4165b6de",
        "name": "InitializeData",
        "func": "msg.payload = [{\n\t\t\t\"ID\": 20879,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:29:11\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 49,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 45,\n\t\t\t\"Dur\": 0.07,\n\t\t\t\"L_Reason\": \"45 - Filler - Idle Blocked - Outfeed Conveyor Full\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20878,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:28:43\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 48,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 144,\n\t\t\t\"Dur\": 0.47,\n\t\t\t\"L_Reason\": \"144 - Labeler - Low Low Labels\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20877,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:29\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 46,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 91,\n\t\t\t\"Dur\": 4.22,\n\t\t\t\"L_Reason\": \"91 - Seamer - System Manual Mode\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20875,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:25\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 44,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 9,\n\t\t\t\"Dur\": 0.02,\n\t\t\t\"L_Reason\": \"9 - Can Cleaner - Door #2 Open\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20874,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:00:00\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 42,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 35,\n\t\t\t\"Dur\": 9.43,\n\t\t\t\"L_Reason\": \"35 - Filler - Inspection Door 2 Open\"\n\t\t}];\n\t\t\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 650,
        "y": 349,
        "wires": [
            [
                "8a38e79e.e30648"
            ]
        ]
    },
    {
        "id": "2ebc4a57.75db86",
        "type": "inject",
        "z": "a8ef826f4165b6de",
        "name": "",
        "props": [
            {
                "p": "payload",
                "v": "",
                "vt": "date"
            },
            {
                "p": "topic",
                "v": "",
                "vt": "string"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 453,
        "y": 332,
        "wires": [
            [
                "2ba17e32.afc672"
            ]
        ]
    },
    {
        "id": "13a31094.82261f",
        "type": "function",
        "z": "a8ef826f4165b6de",
        "name": "select row 1",
        "func": "if (msg.hasOwnProperty('ui_control') && msg.ui_control.callback === \"renderComplete\") {\n    var msgOut={\n        payload:{\n            command:\"selectRow\",\n            arguments: [1],\n            returnPromise: false\n        }\n    }\n    return msgOut;\n}",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 650,
        "y": 468,
        "wires": [
            [
                "1d03a916.1ea9c7",
                "c347a95e.b7a9f8"
            ]
        ]
    },
    {
        "id": "6bb94a63.257154",
        "type": "ui_ui_control",
        "z": "a8ef826f4165b6de",
        "name": "",
        "events": "all",
        "x": 453,
        "y": 366,
        "wires": [
            [
                "2ba17e32.afc672"
            ]
        ]
    },
    {
        "id": "5e0b3d4e.bc9634",
        "type": "link out",
        "z": "a8ef826f4165b6de",
        "name": "",
        "links": [
            "88bc27e0.a8cb58"
        ],
        "x": 1173,
        "y": 434,
        "wires": []
    },
    {
        "id": "88bc27e0.a8cb58",
        "type": "link in",
        "z": "a8ef826f4165b6de",
        "name": "",
        "links": [
            "5e0b3d4e.bc9634"
        ],
        "x": 510,
        "y": 468,
        "wires": [
            [
                "13a31094.82261f"
            ]
        ]
    },
    {
        "id": "c347a95e.b7a9f8",
        "type": "debug",
        "z": "a8ef826f4165b6de",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 885,
        "y": 468,
        "wires": []
    },
    {
        "id": "d919bea9.aba6d",
        "type": "function",
        "z": "a8ef826f4165b6de",
        "name": "callback functions",
        "func": "var rowFormatter = function(row){     \n    var data = row.getData();\n    switch (data.$state) {\n        case 'lost':             \n            row.getElement().style.backgroundColor = '#9e2e66';\n            row.getElement().style.color = '#a6a6a6';\n            break;         \n        case 'sleeping':\n            row.getElement().style.backgroundColor = '#336699';\n            break;\n        case 'disconnected':\n            row.getElement().style.backgroundColor = '#cc3300';\n            row.getElement().style.color = '#a6a6a6';\n            break;\n        case 'alert':             \n            row.getElement().style.backgroundColor = '#A6A6DF';\n            break;         \n        case 'init':             \n            row.getElement().style.backgroundColor = '#f2f20d';\n            break;         \n        case 'ready':\n            row.getElement().style.backgroundColor = '';\n            row.getElement().style.color = '';\n            break;         \n        \n    } \n};\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 1095,
        "y": 485,
        "wires": [
            []
        ]
    },
    {
        "id": "58a8895c.e04f28",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "1da6d3da.8557bc",
        "order": 1,
        "disp": true,
        "width": "16",
        "collapse": false
    },
    {
        "id": "1da6d3da.8557bc",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 6,
        "disabled": false,
        "hidden": false
    }
]
7

i saw from your newly posted Flow that you already have ckecked the ui_table option

image

all good .. thats going to send a msg with the table row information (we see it in Debug node A) and is with this example data :

{
  "topic": "EvtStartTime",
  "payload": {
    "ID": 20875,
    "WO_StartTime": "2020-08-01 16:05:29",
    "EvtStartTime": "2020-08-01 17:24:25",
    "WO_No": "AUG1B",
    "RecNo": 44,
    "ModeNo": 1,
    "L_Code": 9,
    "Dur": 0.02,
    "L_Reason": "9 - Can Cleaner - Door #2 Open",
    "id": 3
  },
  "row": 3,
  "socketid": "hzOqPMeEh8bSthAcAAAr",
  "_msgid": "48925004e36f040d"
}

what data are you trying to use from this msg to draw a new Chart in ui_template ?
In your original question we saw how to pass the "symbol" with the msg.payload to draw it ..
from the above row msg .. what is the "symbol" .. the property WO_No ?

by the way .. i saw that you have another Forum thread running .. is it related? .. if yes then better keep the converstation in one place

8

Hello!

This flow starts with an input of a symbol name (http request alert) which is then used to look up additional information (pricing, etc) via ccxt api and then a table row is created. The previous exercise made it possible to automatically generate a corresponding TradeView chart (at the same time as the row). Now I want to be able to change charts on the front-end by clicking a particular row.

This is the msg.payload that generates the table, where "l_coin" is the original input symbol (i.e. GALA).

msgTable.payload = { "l_coin": l_coin, "listed": listed, "f_coin": f_coin, "g_coin": g_coin, "b_coin": b_coin, "c_coin": c_coin, "price": price, "change": change, "time": msg.time};

Screenshot 2021-12-26 212047
Screenshot 2021-12-26 2120471967Ă—849 219 KB

Yes, I posted another question regarding my application, but it was different, related to database lookup issue.

Thanks so much!

9

If the above is the msg creating the table rows, i would guess that a msg with similar structure would be produced when clicking on a table row ? can you copy and show as an example msg when clicking on a row ?

the steps to draw another chart you should be

  1. get the clicked row msg from the ui_table output
  2. get the l_coin property
  3. convert it to a symbol, if you have to ??? as you are doing with :
    symbol = "BINANCE:"+ l_coin + "USDT";
  4. add it to msg.payload .. and wire it to the ui_template to redraw the chart
10

Hi there - I assumed something had to be incorporated into the row to facilitate click functionality - turns out it's there already, returns all values, so actually very straight forward!

I have another embed challenge :slight_smile: Different widget from TradingView. I attempted the same approach we took with the chart (to replace *symbol": "BINANCE:ETHUSDT") but it didn't work. Strangely, it also affects the theme format (i.e. kills the "dark" option).

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<!--  <div class="tradingview-widget-container__widget"></div> -->
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
  {
  "interval": "15m",
  "width": "280",
  "isTransparent": false,
  "height": "400",
  *symbol": "BINANCE:ETHUSDT".
  "showIntervalTabs": true,
  "locale": "en",
  "colorTheme": "dark"
}
  </script>
</div>
<!-- TradingView Widget END -->
11

there are a couple of typo mistakes

shouldnt that be "symbol": "BINANCE:ETHUSDT",

12

oh, right -- but that's not related to the issue. This is straight from TradingView

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/technicals/" rel="noopener" target="_blank"><span class="blue-text">Technical Analysis for AAPL</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
  {
  "interval": "1m",
  "width": 425,
  "isTransparent": false,
  "height": 450,
  "symbol": "NASDAQ:AAPL",
  "showIntervalTabs": true,
  "locale": "en",
  "colorTheme": "dark"
}
  </script>
</div>
<!-- TradingView Widget END -->
13

yea .. its little strange how this widget picks up the data and renders .. i didnt fully undestand it but
you could re-render the whole widget from scratch with the new symbol

the ui_template can also accept a msg with the html template in msg.template

Example Flow

image
image706Ă—214 10.8 KB 

[{"id":"a82b42cff96f6cfb","type":"ui_template","z":"54efb553244c241f","group":"a5ba0b01d5e9a353","name":"","order":0,"width":"24","height":"12","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":1300,"wires":[[]]},{"id":"327c4cd6589d3e70","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BINANCE:ETHUSDT","payloadType":"str","x":270,"y":1260,"wires":[["eec58cadccae05bc"]]},{"id":"c085b1be787253fd","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"NASDAQ:AAPL","payloadType":"str","x":260,"y":1340,"wires":[["eec58cadccae05bc"]]},{"id":"eec58cadccae05bc","type":"template","z":"54efb553244c241f","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!-- TradingView Widget BEGIN -->\n<div class=\"tradingview-widget-container\">\n<!--  <div class=\"tradingview-widget-container__widget\"></div> -->\n  <script type=\"text/javascript\" src=\"https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js\" async>\n  \n  {\n  \"interval\": \"15m\",\n  \"width\": \"280\",\n  \"isTransparent\": false,\n  \"height\": \"400\",\n  \"symbol\": \"{{payload}}\",\n  \"showIntervalTabs\": true,\n  \"locale\": \"en\",\n  \"colorTheme\": \"dark\"\n}\n\n  </script>\n</div>\n<!-- TradingView Widget END -->","output":"str","x":520,"y":1300,"wires":[["a82b42cff96f6cfb","18b0afa8f2fc3794"]]},{"id":"18b0afa8f2fc3794","type":"debug","z":"54efb553244c241f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":1220,"wires":[]},{"id":"a5ba0b01d5e9a353","type":"ui_group","name":"Default","tab":"2058f15d2cc61080","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"2058f15d2cc61080","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
14

Awesome! Thank you!

15

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