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}]
)
