# Dashboard tips. Value with area chart using d3.js

**URL:** <https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411>\
**Category:** Dashboard\
**Created:** [30 March 2021 15:54 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411 "2021-03-30T15:54:47Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 March 2021 15:54 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/1 "2021-03-30T15:54:47Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2e981fe69a7f992754619e7d1c9e1cd2713f67c.png)

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.

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

```

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 March 2021 21:46 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/2 "2021-03-30T21:46:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 March 2021 21:52 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/3 "2021-03-30T21:52:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 March 2021 21:58 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/4 "2021-03-30T21:58:59Z")

</div>

> [@hotNipi](#):
>
> It is pretty same for flows as gists

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 March 2021 22:00 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/5 "2021-03-30T22:00:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [1 April 2021 11:25 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/6 "2021-04-01T11:25:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [20 April 2021 07:45 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/7 "2021-04-20T07:45:18Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cdc6ad373d9e878df22e83366ab7d829cfb7707d.png)  
I miss something?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 April 2021 07:48 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/8 "2021-04-20T07:48:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [20 April 2021 08:02 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/9 "2021-04-20T08:02:59Z")

</div>

this is the errors in console

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a3137123ba6192d68e0823536dae7bfb5411abb8.jpeg)  
(the theme has changed because I'm trying your fab blue theme 😍)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 April 2021 08:33 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/10 "2021-04-20T08:33:21Z")

</div>

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.

---

<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:** [20 May 2021 08:33 UTC](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411/11 "2021-05-20T08:33:49Z")

</div>

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