# StateTrail-Node for Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [5 December 2024 08:22 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700 "2024-12-05T08:22:47Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![n.bayer97](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@n.bayer97](https://discourse.nodered.org/u/n.bayer97)\
**Post date:** [5 December 2024 08:22 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/1 "2024-12-05T08:22:47Z")

</div>

Hello everyone, has anyone already found a solution for a StateTrail node in DB2.0?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 December 2024 09:08 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/2 "2024-12-05T09:08:20Z")

</div>

Kinda, by using echarts in a template node: [How to- submit html form using template table - #6 by Steve-Mcl](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/6)

Here is a different demo where echarts is used in a template node : [How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4)

If you combine the code from the first pen to the 2nd flow you could make your own.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 December 2024 14:30 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/3 "2024-12-14T14:30:44Z")

</div>

New Development.

> [@NEW: Timeline/state-trail Web Component](https://discourse.nodered.org/t/new-timeline-state-trail-web-component/93900):
>
> Hi all, as indicated in [Statetrail chart in uibuilder - #16 by TotallyInformation](https://discourse.nodered.org/t/statetrail-chart-in-uibuilder/93838/16) (and a few other threads), I've started work on a new web component. Here is what it looks like so far along with the requirements I've set so far. I am looking for feedback. Remember that being a web component means that it should work with ANY web app/page including UIBUILDER, Dashboards 1 & 2, and http-in/-response. And outside of Node-RED of course. It will, of course, have some special sauce to make use with …

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [15 December 2024 09:09 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/4 "2024-12-15T09:09:42Z")

</div>

You could also use a markdown node with a [mermaid gantt chart](https://mermaid.live/edit#pako:eNpdkEFrwzAMhf-K0DmBOOvJt0LYTj11lw1fROymprVdHOUwSv_7ZOxSNmGwJX2Ph98d52QdalwoMpsIUuz56mAPH2UEk6clU6grS-zeUw7EAF9S_eHQT1PdrW5mnyIc612He2BaL_AqTaqDcVC7flByOngbbENj4rPLL4GmE0tPCqBI7F-bhtfhZ9H4WJbN5mmhxqJWY1PTfxPQMO4sdhicfMtbieJeUIPCBWdQy9NSvhg08SEcbZyOP3FGzXlzHea0LWfUJ7qu0m23ElHL7IncKH6nFBr0-AV5Y257).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/e/dea4e5e6f0418379eb43910f4d1ee517b549f86f.png)

produces:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cab76f5401e179b27fac2da50fb98e3b23b60c1.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [15 December 2024 10:56 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/5 "2024-12-15T10:56:16Z")

</div>

Excellent !  
Configuration was really easy and intuitive.

~~Is it possible to have click event ?~~ Yes the docs say, need to find out how..

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

````auto
[{"id":"247b5d3411247210","type":"ui-markdown","z":"7c54d6845755357a","group":"a870a89a79a6be1f","name":"","order":1,"width":"24","height":"1","content":"``` mermaid\n\n---\ndisplayMode: compact\n---\n\ngantt\n\n dateFormat YYYY-MM-DD HH:mm\n axisFormat %H:%M\n tickInterval 1hour\n title Machine Operation Status\n excludes weekends\n %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (\"sunday\") or \"weekends\", but not the word \"weekdays\".)\n\n section Machine-1\n OFF :crit, des1, 2014-12-15 00:00, 2014-12-15 04:20 \n ON :active, des2, 2014-12-15 04:20, 2014-12-15 05:20 \n OFF :crit, des1, 2014-12-15 05:20, 2014-12-15 09:30\n ON :active, des2, 2014-12-15 09:30, 2014-12-16 00:00\n","className":"","x":350,"y":2360,"wires":[["9060657a40c585d8"]]},{"id":"a870a89a79a6be1f","type":"ui-group","name":"Month-Table","page":"59f7c83cfe44c342","width":"24","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"59f7c83cfe44c342","type":"ui-page","name":"StateTrail","ui":"0aa5ac292a3ec726","path":"/statetrail","icon":"table","layout":"grid","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-dropdown","ui-form"],"showPathInSidebar":true,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

````

@TotallyInformation

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 December 2024 01:25 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/6 "2024-12-16T01:25:21Z")

</div>

> [@smanjunath211](#):
>
> @TotallyInformation

Yup, Markdown & Mermaid also well supported by UIBUILDER. 😁 The front-end uibuilder library recognises the use of the Markdown-IT library and also allows the inclusion of Markdown-IT extensions including Mermaid.

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [16 December 2024 02:01 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/7 "2024-12-16T02:01:18Z")

</div>

Is there a way to feed in dynamic data ..e.g. It shows the ON/OFF states over 24h ? .. shifting automatically 😉

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [16 December 2024 06:15 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/8 "2024-12-16T06:15:54Z")

</div>

Yes, you can use `{{msg.payload}}` for example.  
See [documentation](https://dashboard.flowfuse.com/nodes/widgets/ui-markdown.html).

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [16 December 2024 07:11 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/9 "2024-12-16T07:11:25Z")

</div>

If only I was able to get the on click event working...

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [16 December 2024 07:22 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/10 "2024-12-16T07:22:12Z")

</div>

Click events require javascript, you can http-in/out nodes where you include the mermaid library and write the javascript to get the click behaviour, or use a normal template node or use uibuilder.

eg in a dashboard template node you can do something like (it probably needs vue bindings somewhere):

```auto
<template>
<pre class="mermaid">
    gantt
      dateFormat YYYY-MM-DD

      section Clickable
      Visit mermaidjs :active, cl1, 2014-01-07, 3d
      Print arguments :cl2, after cl1, 3d
      Print task :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </pre>

</template>

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>
<script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
</script>

```

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [16 December 2024 08:06 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/11 "2024-12-16T08:06:46Z")

</div>

Yeah, I saw the documentation ... but I'm struggling to get the format right ☹

Does anybody have an example with feeding the msg.payload object ?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [16 December 2024 08:52 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/12 "2024-12-16T08:52:44Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> Does anybody have an example with feeding the msg.payload object ?

Whatever you need to have replaced by the incoming payload can be encapsulated in `{{ }}`

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 December 2024 09:10 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/13 "2024-12-16T09:10:34Z")

</div>

Not actually done any JavaScript with Mermaid. Will try to find some time to work up a UIBUILDER example this week.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [16 December 2024 09:45 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/14 "2024-12-16T09:45:23Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> Does anybody have an example with feeding the msg.payload object

````auto
[{"id":"f30b49229da9d627","type":"group","z":"7c54d6845755357a","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["247b5d3411247210","9060657a40c585d8","11436b35da33d719","0f3887617dea1c74","9e57c3323b202c66","db12c41ffbf45e27","ee25a2452b2ebceb","bda1ddebeedf5bf6"],"x":94,"y":2419,"w":952,"h":142},{"id":"247b5d3411247210","type":"ui-markdown","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","order":3,"width":"24","height":"1","content":"```mermaid\n---\ndisplayMode: compact\n---\n\ngantt\n\ndateFormat YYYY-MM-DD HH:mm\naxisFormat %H:%M\ntickInterval 1hour\ntitle Machine Operation Status (HTML) \n\nsection {{msg.machine}}\n\n{{msg.payload}}\n\n\nclick des1 call printArguments(\"test1\", \"test2\", test3)\n</pre>\n\n\n <script>\n const printArguments = function (arg1, arg2, arg3) {\n alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);\n };\n mermaid.initialize(config);\n </script>\n\n```","className":"","x":710,"y":2460,"wires":[["9060657a40c585d8"]]},{"id":"9060657a40c585d8","type":"debug","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"debug 2726","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":930,"y":2460,"wires":[]},{"id":"11436b35da33d719","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\nOFF :crit, des1, 2014-12-15 00:00, 2014-12-15 01:10\nON :active, des2, 2014-12-15 01:10, 2014-12-15 02:20\nOFF :crit, des1, 2014-12-15 02:20, 2014-12-15 09:30\nON :active, des2, 2014-12-15 09:30, 2014-12-15 14:00\n","output":"str","x":320,"y":2460,"wires":[["ee25a2452b2ebceb"]]},{"id":"0f3887617dea1c74","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\nOFF :active, des1, 2014-12-15 00:00, 2014-12-15 01:10\nON :crit, des2, 2014-12-15 01:10, 2014-12-15 02:20\nOFF :active, des1, 2014-12-15 02:20, 2014-12-15 09:30\nON :crit, des2, 2014-12-15 09:30, 2014-12-15 14:00\n","output":"str","x":320,"y":2520,"wires":[["bda1ddebeedf5bf6"]]},{"id":"9e57c3323b202c66","type":"ui-button","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","label":"Data-1","order":1,"width":"4","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":2460,"wires":[["11436b35da33d719"]]},{"id":"db12c41ffbf45e27","type":"ui-button","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","label":"Data-2","order":2,"width":"4","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":2520,"wires":[["0f3887617dea1c74"]]},{"id":"ee25a2452b2ebceb","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"machine","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Machine-1","output":"str","x":460,"y":2460,"wires":[["247b5d3411247210"]]},{"id":"bda1ddebeedf5bf6","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"machine","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Machine-2","output":"str","x":460,"y":2520,"wires":[["247b5d3411247210"]]},{"id":"a870a89a79a6be1f","type":"ui-group","name":"Month-Table","page":"59f7c83cfe44c342","width":"24","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"59f7c83cfe44c342","type":"ui-page","name":"StateTrail","ui":"0aa5ac292a3ec726","path":"/statetrail","icon":"table","layout":"grid","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-dropdown","ui-form"],"showPathInSidebar":true,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

````

![mermaid](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0877ff16dafee7aa678608c7c7d00d41fa2fad1.gif)

It May not be the best example, as i am still learning!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 December 2024 21:37 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/15 "2024-12-16T21:37:18Z")

</div>

I managed to use MermaidJS directly (without the need for markdown) in a uibuilder node - I won't pollute this thread with anything though. I'll probably create a new thread.

Seems to be easier to call the API directly and return an SVG image of the rendered chart, you can then more easily add click and other events.

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [16 December 2024 22:00 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/16 "2024-12-16T22:00:00Z")

</div>

thx .. 😉 now I need to feed dynamic data from variables .. but should not be a problem

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [16 December 2024 22:00 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/17 "2024-12-16T22:00:42Z")

</div>

Sounds interesting 👍

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 December 2024 17:59 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/18 "2024-12-17T17:59:33Z")

</div>

> [@UIBUILDER: Using MermaidJS](https://discourse.nodered.org/t/uibuilder-using-mermaidjs/93969):
>
> Hi all, little mini FAQ about using [MermaidJS](https://mermaid.js.org) to generate browser-based charts with data from Node-RED and with the support of UIBUILDER. You will see some chat here: [StateTrail-Node for Dashboard 2.0](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700) - about using Mermaid for a timeline chart. It supports many other chart types too. Mermaid takes TEXT chart descriptions and turns them into graphics. Usually it is used as an extension along side some tool to convert Markdown to HTML. If I get time, I'll add more info to this FAQ to show how to…

---

<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:** [16 January 2025 17:59 UTC](https://discourse.nodered.org/t/statetrail-node-for-dashboard-2-0/93700/19 "2025-01-16T17:59:37Z")

</div>

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