Dashboard tips. Value with area chart using d3.js

image

Using d3.js library to draw a little area chart at the bottom of the card.
Some CSS tricks to fill the whole card width with the chart area nicely.

[{"id":"496ac290.48e8ac","type":"ui_template","z":"d4ff3fe5.7e9e7","group":"e53ffba2.ed0118","name":"template","order":1,"width":"6","height":"2","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":760,"y":260,"wires":[[]]},{"id":"1801a732.a0def9","type":"function","z":"d4ff3fe5.7e9e7","name":"prepare data","func":"var collection = context.get(\"collection\") || []\nif(msg.payload == \"init\"){\n    collection = []\n    context.set(\"collection\",collection)\n    return\n}\n//create datapoint\nvar datapoint = [new Date().getTime(),msg.payload]\ncollection.push(datapoint)\n\n//limit count of datapoints\nwhile(collection.length > 20){\n    collection.shift()\n}\n// store\ncontext.set(\"collection\",collection)\n\n\nmsg.payload = {}\nmsg.payload.value = collection[collection.length-1][1].toFixed(2)+\" kg/cmÂł\"\nmsg.payload.chartdata = JSON.stringify(collection);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":470,"y":260,"wires":[["f591a248.58de8"]]},{"id":"f591a248.58de8","type":"template","z":"d4ff3fe5.7e9e7","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div id=\"charting-value\">{{payload.value}}</div>\n<div id=\"charting-area\" ></div>\n<script>\n  var w = 340;//ui-cardpanel width + 8\n  var h = 80;\n  var svg = d3.select(\"#charting-area\").append(\"svg\").attr(\"width\", \"101%\").attr(\"height\",h);\n  var dataset = {{payload.chartdata}}\n  var xScale = d3.scaleTime().domain([d3.min(dataset, d => d[0]), d3.max(dataset, d => d[0])]).range([0, w]);\n  var yScale = d3.scaleLinear().domain([d3.min(dataset, d => d[1]), d3.max(dataset, d => d[1])]).range([h-4, 4]);\n  var mylinegen = d3.area().x(d => xScale(d[0])).y0(yScale(0)).y1(d => yScale(d[1])).curve(d3.curveBasis);\n  svg.append(\"path\").datum(dataset).attr(\"d\", mylinegen).attr(\"class\", \"charting-linestyle\");\n</script>","output":"str","x":620,"y":260,"wires":[["496ac290.48e8ac"]]},{"id":"b92d6ca9.c110d","type":"random","z":"d4ff3fe5.7e9e7","name":"","low":"30","high":"100","inte":"false","property":"payload","x":300,"y":260,"wires":[["1801a732.a0def9"]]},{"id":"76d44675.5a8978","type":"ui_button","z":"d4ff3fe5.7e9e7","name":"","group":"a1b48177.63b91","order":3,"width":0,"height":0,"passthru":false,"label":"clear","tooltip":"","color":"","bgcolor":"","icon":"","payload":"init","payloadType":"str","topic":"topic","topicType":"msg","x":310,"y":300,"wires":[["1801a732.a0def9"]]},{"id":"41f03b1c.d0fc04","type":"inject","z":"d4ff3fe5.7e9e7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":140,"wires":[["c08243ef.8bc7c"]]},{"id":"c08243ef.8bc7c","type":"delay","z":"d4ff3fe5.7e9e7","name":"","pauseType":"random","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"3","randomLast":"5","randomUnits":"seconds","drop":false,"x":260,"y":200,"wires":[["b92d6ca9.c110d"]]},{"id":"65682675.ae5418","type":"ui_template","z":"d4ff3fe5.7e9e7","group":"a1b48177.63b91","name":"CSS+script","order":3,"width":0,"height":0,"format":"<script src=\"https://d3js.org/d3.v4.js\"></script>\n<style id=\"dashboard_custom_css\">\n#Home_value_chart_cards > md-card{\n    left: 0px!important;\n    top: unset !important;\n    width: 100% !important;\n    height: 100% !important;\n    bottom: 0px;\n    padding: 0px;\n    background: transparent;\n    overflow:hidden;\n}\n#charting-value{\n    font-size: 24px;\n    padding-left: 6px;\n       position: relative;\n    font-size: 24px;\n    bottom: unset;\n    top: 0px;\n    padding-left: 6px;\n}\n#charting-area{\n    width: 101%;\n    height: 100%;\n    position: relative;\n    display: flex;\n    align-items: flex-end;\n}\n#charting-area > svg{\n    position: relative;\n    left: -2px;\n    top: 0px;\n    width: 100%;\n\n}\n.charting-linestyle {\n    fill: #EEAE2533 !important;\n    stroke: #EEAE25;\n    stroke-width: 2px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":730,"y":220,"wires":[[]]},{"id":"e53ffba2.ed0118","type":"ui_group","name":"value chart","tab":"c122ecdc.526d7","order":2,"disp":true,"width":"6","collapse":false},{"id":"a1b48177.63b91","type":"ui_group","name":"Default","tab":"c122ecdc.526d7","order":2,"disp":true,"width":"6","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

7 Likes

Another nice contribution @hotNipi :+1:
My only worry is that these great tips & examples are going to get buried & lost in the forum....

It is pretty same for flows as gists so I hope the searching keyword "dashboard tips" will do. And the time goes by and the fashion changes so they can be pretty pointless for next year/version/generation/whatever.

Question is rather - can the dashboard do.... and the answer is ... mostly yes.

...unless you made a 'collection' of your gists listed under your name.

1 Like

My name says nothing when you step in ...

The idea or solution gets wings if it is that good that it self-promotes. The others are just mid range happy moments.

Really nice work @hotNipi, they look super nice - another great contribution!

It doesn't work for me, this is the result.


I miss something?

Hard to say. See if there is any errors in browser console...

this is the errors in console


(the theme has changed because I'm trying your fab blue theme :heart_eyes:)

Just tried and it works, but in example the inject node is not set to inject anything automatically. You should even press the button couple of times or configure to send data periodically.

1 Like

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