# Bar Graph not showing

**URL:** <https://discourse.nodered.org/t/bar-graph-not-showing/30884>\
**Category:** Dashboard\
**Created:** [29 July 2020 15:25 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884 "2020-07-29T15:25:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![hmgp](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hmgp](https://discourse.nodered.org/u/hmgp)\
**Post date:** [29 July 2020 15:25 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/1 "2020-07-29T15:25:23Z")

</div>

Hello! I've been struggling with this one for a while. Already read a lot of topics but I cant get why it doesn't show info in a bar graph.

```auto
[{"id":"3e0b323b.87db66","type":"inject","z":"8195f5e6.5fdde8","name":"Timestamp","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"60","crontab":"","once":false,"onceDelay":"","topic":"","payload":"","payloadType":"date","x":110,"y":620,"wires":[["e619e817.5db39"]]},{"id":"e619e817.5db39","type":"template","z":"8195f5e6.5fdde8","name":"Query Total","field":"topic","fieldType":"msg","format":"sql","syntax":"mustache","template":"SELECT DATE_FORMAT(dataLeitura,'%Y-%m-%d') dia,ifnull(round(sum(data),2),0) consumo \nFROM sensorReadings \nWHERE topic = 'casa/kwh'\nAND date(dataLeitura) >= subdate(now(),INTERVAL 5 DAY)\nGROUP BY date(dataLeitura);","output":"str","x":270,"y":620,"wires":[["b41e5140.2de518"]]},{"id":"b41e5140.2de518","type":"Stackhero-MySQL","z":"8195f5e6.5fdde8","server":"5643cdd4.526464","name":"","x":460,"y":620,"wires":[["311af654.23ae8a","a70a5c60.e1c9b8"]]},{"id":"a70a5c60.e1c9b8","type":"debug","z":"8195f5e6.5fdde8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":270,"y":760,"wires":[]},{"id":"311af654.23ae8a","type":"ui_chart","z":"8195f5e6.5fdde8","name":"Consumo Diário","group":"bc04c8c8.10dab","order":5,"width":0,"height":0,"label":"Consumo Diario","chartType":"bar","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"Consumo","dot":false,"ymin":"0","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":460,"y":680,"wires":[["a70a5c60.e1c9b8"]]},{"id":"5643cdd4.526464","type":"Stackhero-MySQL-Server","z":"","name":"sensorLog DB","host":"localhost","port":"3306","tls":false,"database":"sensorLog"},{"id":"bc04c8c8.10dab","type":"ui_group","z":"","name":"Geral","tab":"fc15d692.61a598","order":4,"disp":true,"width":"12","collapse":true},{"id":"fc15d692.61a598","type":"ui_tab","z":"","name":"Casa","icon":"fa-home","disabled":false,"hidden":false}]

```

I also tried with a prepare data node like this:

```auto
[{"id":"cc8c01f6.159158","type":"function","z":"8195f5e6.5fdde8","name":"Prepare Data","func":"var msg1 = {};\nlet dataH =[];\n\nfor (let X in msg.payload) \n{\n dataH.push({\"x\":msg.payload[X].dia, \"y\":msg.payload[X].consumo});\n}\nmsg1.payload = [{\"series\":[\"Consumo\"], \"data\":[dataH],\"labels\": [\"Consumo\"]}];\nreturn (msg1);\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":100,"y":660,"wires":[[]]}]

```

Any clues?

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [29 July 2020 15:46 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/2 "2020-07-29T15:46:14Z")

</div>

At a Glance it looks like you are setting dashboard chart as bar chart, but feeding it line chart data format.

> <https://github.com/node-red/node-red-dashboard/blob/master/Charts.md>

---

<div class="post-metadata">

**Author:** ![hmgp](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hmgp](https://discourse.nodered.org/u/hmgp)\
**Post date:** [29 July 2020 16:18 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/3 "2020-07-29T16:18:05Z")

</div>

Hello, thank you for your reply.

I think I know what you mean, and I went to the page you refer.

Let me try to explain, this is what I get from the select on the database, I'm a newbie on Node Red, I think this is my payload, correct?

```auto
[{"dia":"2020-07-25","consumo":29.51},{"dia":"2020-07-26","consumo":31.8},{"dia":"2020-07-27","consumo":39.3},{"dia":"2020-07-28","consumo":24.03},{"dia":"2020-07-29","consumo":27.28}]

```

Isn't this enough for the Bar chart?

I thought I would get a bar for day 25 with value 29.51, and so on.

With this I get "Bad data inject"...

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [29 July 2020 16:38 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/4 "2020-07-29T16:38:43Z")

</div>

```auto
[{
    "series": ["X", "Y", "Z"],
    "data": [[29.51], [31.8], [39.3]],
    "labels": ["2020-07-25", "2020-07-26", "2020-07-27"]
}]

```

try injecting that

---

<div class="post-metadata">

**Author:** ![hmgp](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hmgp](https://discourse.nodered.org/u/hmgp)\
**Post date:** [29 July 2020 21:41 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/5 "2020-07-29T21:41:40Z")

</div>

Thanks again. From the page you sent I just saw the example in the bottom. I understood the example you are giving. I will try it.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [30 July 2020 09:34 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/6 "2020-07-30T09:34:44Z")

</div>

Hi. was in a rush when posted the example. This is more correct.

```auto
[{
"series": ["Used"],
"data": [[29.51,31.8,39.3]],
"labels": ["2020-07-25","2020-07-26", "2020-07-27"]
}]

```

---

<div class="post-metadata">

**Author:** ![hmgp](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hmgp](https://discourse.nodered.org/u/hmgp)\
**Post date:** [30 July 2020 09:40 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/7 "2020-07-30T09:40:25Z")

</div>

😀

I've just had my first try at this and I think I'm in the good way. Yes, I also found out that the labels where misplaced

![Screenshot from 2020-07-30 10-38-30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90290392fb1efa0219cae948ebfde4fd17dd19c2.png)

Thank you very much for your help. I will post here my solution, just have to make same adjustments.

---

<div class="post-metadata">

**Author:** ![hmgp](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hmgp](https://discourse.nodered.org/u/hmgp)\
**Post date:** [30 July 2020 10:56 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/8 "2020-07-30T10:56:49Z")

</div>

So, this is my graph right now. I think it's stable.

![Screenshot from 2020-07-30 11-30-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/81163e77f88badabb419d7f147969c3e4be35b60.png)

The code I use is this:

```auto
let dataC = [[]];
let dataLabels = [];

for (let X in msg.payload) 
{
    dataLabels[X] = msg.payload[X].dia;
    dataC[0][X] = msg.payload[X].consumo;
}

var m={
    "series":["Consumo"],
    "data":dataC,
    "labels":dataLabels
};

return {payload:[m]};

```

Thanks for your help!!! 👍

---

<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:** [13 August 2020 10:56 UTC](https://discourse.nodered.org/t/bar-graph-not-showing/30884/9 "2020-08-13T10:56:52Z")

</div>

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