# TradeView financial charts in Dashboard UI Template

**URL:** <https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [25 December 2021 20:27 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691 "2021-12-25T20:27:26Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [25 December 2021 20:27 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/1 "2021-12-25T20:27:26Z")

</div>

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 !!

```auto
<!-- 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 -->

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [25 December 2021 23:36 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/2 "2021-12-25T23:36:22Z")

</div>

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 :**

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [26 December 2021 00:46 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/3 "2021-12-26T00:46:03Z")

</div>

Thank you so much - works perfectly !

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [26 December 2021 01:26 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/4 "2021-12-26T01:26:45Z")

</div>

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..

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [26 December 2021 01:40 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/5 "2021-12-26T01:40:02Z")

</div>

> [@interscope101](#):
>
> on the browser refresh the chart disappears

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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [26 December 2021 02:36 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/6 "2021-12-26T02:36:11Z")

</div>

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 🙂

 ![Screenshot 2021-12-25 212913](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f5d0d66821010dccdf374fe2ade946ee56f88e3.jpeg)

```auto
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

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [26 December 2021 13:55 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/7 "2021-12-26T13:55:34Z")

</div>

> [@interscope101](#):
>
> I want to implement a rowClick callback on the table that would load the corresponding chart on the front end.

i saw from your newly posted Flow that you already have ckecked the **ui\_table** option

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f629df0b2b84e8c4b56a10ddea4768eb94014136.png)

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 :

```auto
{
  "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

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [27 December 2021 02:53 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/8 "2021-12-27T02:53:53Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96f0d389ddabf8b646ed12d12fcfcd273541e8f7.jpeg)

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

Thanks so much!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 December 2021 12:01 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/9 "2021-12-27T12:01:13Z")

</div>

> [@interscope101](#):
>
> 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};

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

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [30 December 2021 01:40 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/10 "2021-12-30T01:40:48Z")

</div>

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 🙂 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).

```auto
<!-- 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 -->

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [30 December 2021 02:18 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/11 "2021-12-30T02:18:30Z")

</div>

> [@interscope101](#):
>
> `*symbol": "BINANCE:ETHUSDT".`

there are a couple of typo mistakes

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

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [30 December 2021 03:20 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/12 "2021-12-30T03:20:32Z")

</div>

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

```auto
<!-- 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 -->

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [30 December 2021 03:51 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/13 "2021-12-30T03:51:21Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa806eaa6b0b625d809e33d96baff468cca89044.png)

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [30 December 2021 04:04 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/14 "2021-12-30T04:04:27Z")

</div>

Awesome! Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 February 2022 04:05 UTC](https://discourse.nodered.org/t/tradeview-financial-charts-in-dashboard-ui-template/55691/15 "2022-02-28T04:05:08Z")

</div>

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