There is a way to show the current Value on the top of the Bar Graph without moving your curson on the top of it?
HI, welcome to forum.
It is not possible with ui_chart node but you can do your charts using the ui_template node and use chartjs library directly and that opens many of advanced possibilities.
As, it takes quite of coding, it is up to you to tell if you want to do it that way.
An example:
It's a very simple Bar chart, with only a single variable, like your "Montag, 17 Uhr", feeded with a Modbus Read. Do you have any template code example?
Forgot to say Hi, and thanks for the welcome!
If one value only why not to use some gauge?
I'm doing a project for the College and my professor dind't like any of the gauges and asked me to use a Graph Bar. I don't know why too haha.
it's not the same visual result but the "Level" option of the gauge ui_node does the job: display a level which varies with the value, and the value which is displayed inside
Most of the chartjs complexity can be avoided by using plotly charts... 
[{"id":"c5db9e69.e34e5","type":"inject","z":"82bb9cb4.29b64","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":310,"y":640,"wires":[["a230896e.9204c8"]]},{"id":"a230896e.9204c8","type":"change","z":"82bb9cb4.29b64","name":"bar chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"x\":[\"Data label here\"],\"y\":[\"58.6\"]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":640,"wires":[["75a92564.21e79c"]]},{"id":"75a92564.21e79c","type":"ui_template","z":"82bb9cb4.29b64","group":"6aa20356.9b59bc","name":"Example 2","order":2,"width":16,"height":8,"format":"<div id=\"plotly_chart\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n title:'No data',\n };\nPlotly.newPlot('plotly_chart', data, layout);\n\n// Update data & layout\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n var trace = {\n x:msg.payload.x,\n y:msg.payload.y,\n type: 'bar',\n connectgaps: true,\n text: msg.payload.y.map(String),\n textposition: 'auto',\n hoverinfo: 'none',\n marker: {\n color: 'rgb(158,202,225)',\n opacity: 0.6,\n line: {\n color: 'rgb(8,48,107)',\n width: 1.5\n }\n }\n \n } \n \n var data = [trace];\n \n var layout = {\n title: \"Chart title here\",\n titlefont: {\n size: 22,\n },\n autosize: true,\n plot_bgcolor: '#ffffff',\n paper_bgcolor: '#ffffff',\n 'xaxis': {\n title: 'X axsis title here',\n fixedrange: true\n },\n 'yaxis': {\n title: 'Y axix title here',\n fixedrange: true\n }\n };\n\n Plotly.newPlot('plotly_chart', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":780,"y":640,"wires":[[]]},{"id":"5e0d9a67.116c84","type":"ui_template","z":"82bb9cb4.29b64","group":"2e16cb22.999174","name":"Load Plotly","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":750,"y":560,"wires":[[]]},{"id":"6aa20356.9b59bc","type":"ui_group","name":"examples","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":16,"collapse":false},{"id":"2e16cb22.999174","type":"ui_group","name":"Chart","tab":"567d8fae.98148","order":1,"disp":false,"width":"10","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false},{"id":"567d8fae.98148","type":"ui_tab","name":"Realtime Power","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
Hey hotNipi, sorry for the long time to reply. I`m really struggling to change the 58.6, that you use as an example. I'm trying to use the msg.payload I recieve from my modbus read block, but every sintax I try to use, doesn't work. Do you know how to add a variable, like the msg.payload, in that object's array?
I was using that one, because I'm measuring the level of a tank in this project, but my professor didn't like this Gauge, Why? I don't know either hahaha.
Why make it simple when you can make it complicated ? 
exactly lol
I do.
[{"id":"c5db9e69.e34e5","type":"inject","z":"82bb9cb4.29b64","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"$round($random()*100, 2)\t\t","payloadType":"jsonata","x":510,"y":400,"wires":[["a230896e.9204c8"]]},{"id":"a230896e.9204c8","type":"change","z":"82bb9cb4.29b64","name":"bar chart","rules":[{"t":"set","p":"data","pt":"msg","to":"{\"x\":[\"Data label here\"],\"y\":[]}","tot":"json"},{"t":"set","p":"data.y[0]","pt":"msg","to":"payload","tot":"msg"},{"t":"move","p":"data","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":400,"wires":[["75a92564.21e79c"]]},{"id":"75a92564.21e79c","type":"ui_template","z":"82bb9cb4.29b64","group":"6aa20356.9b59bc","name":"Example 2","order":2,"width":"6","height":"9","format":"<div id=\"plotly_chart\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n title:'No data',\n };\nPlotly.newPlot('plotly_chart', data, layout);\n\n// Update data & layout\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n var trace = {\n x:msg.payload.x,\n y:msg.payload.y,\n type: 'bar',\n connectgaps: true,\n text: msg.payload.y.map(String),\n textposition: 'auto',\n hoverinfo: 'none',\n marker: {\n color: 'rgb(158,202,225)',\n opacity: 0.6,\n line: {\n color: 'rgb(8,48,107)',\n width: 1.5\n }\n }\n \n } \n \n var data = [trace];\n \n var layout = {\n title: \"Chart title here\",\n titlefont: {\n size: 22,\n },\n autosize: true,\n plot_bgcolor: '#ffffff',\n paper_bgcolor: '#ffffff',\n 'xaxis': {\n title: 'X axsis title here',\n fixedrange: true\n },\n 'yaxis': {\n title: 'Y axix title here',\n fixedrange: true\n }\n };\n\n Plotly.newPlot('plotly_chart', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":790,"y":400,"wires":[[]]},{"id":"5e0d9a67.116c84","type":"ui_template","z":"82bb9cb4.29b64","group":"2e16cb22.999174","name":"Load Plotly","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":790,"y":360,"wires":[[]]},{"id":"6aa20356.9b59bc","type":"ui_group","name":"examples","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":"6","collapse":false},{"id":"2e16cb22.999174","type":"ui_group","name":"Chart","tab":"567d8fae.98148","order":1,"disp":false,"width":"10","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false},{"id":"567d8fae.98148","type":"ui_tab","name":"Realtime Power","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes
It worked perfectly! Thank you so much hotNipi, helped me a lot 
i like it , but how to make Y axes Fixed. From 0 to 100 like this :
And see the chart Blue bar up and down (with the value inside) ?
nice , it's great.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
