# Simple Bar chart

**URL:** <https://discourse.nodered.org/t/simple-bar-chart/62938>\
**Category:** Dashboard\
**Tags:** chart\
**Created:** [22 May 2022 19:34 UTC](https://discourse.nodered.org/t/simple-bar-chart/62938 "2022-05-22T19:34:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manu77](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@Manu77](https://discourse.nodered.org/u/Manu77)\
**Post date:** [22 May 2022 19:34 UTC](https://discourse.nodered.org/t/simple-bar-chart/62938/1 "2022-05-22T19:34:58Z")

</div>

Hello, I'm not a programmer and the question is so simple but I still couldn't find a solution.  
I receive the data from DB SQLite in msg.payload and I intend to make a bar graph by date like the one in the picture, but I can't find how to do it.  
 ![Grafico](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/358cedd55d101b62481347be4254dfbcfce493f4.jpeg)

 ![IMAG01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9c2a57ba1322f7ae22fbeb66d63ee49fd0ab64c.jpeg)  
 ![Imag02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/5838b8975b193e4d25bbd22579198e0a8dc99daf.jpeg)

```auto
[
    {
        "id": "e1e5f1cca22c6a02",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f951759994b5f009",
        "type": "ui_button",
        "z": "e1e5f1cca22c6a02",
        "name": "submit",
        "group": "f76629c8ef571e88",
        "order": 3,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "Submit",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "1",
        "payloadType": "str",
        "topic": "submit",
        "topicType": "str",
        "x": 270,
        "y": 440,
        "wires": [
            [
                "5d32cd0ff2bf47ff",
                "b87cf50ff46554a6"
            ]
        ]
    },
    {
        "id": "ece3f3d56fd87fab",
        "type": "ui_date_picker",
        "z": "e1e5f1cca22c6a02",
        "name": "start date",
        "label": "Start date",
        "group": "f76629c8ef571e88",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "sdate",
        "topicType": "str",
        "className": "",
        "x": 500,
        "y": 220,
        "wires": [
            [
                "7fa43234aa77fe38"
            ]
        ]
    },
    {
        "id": "ba108cfbe760f2f3",
        "type": "ui_date_picker",
        "z": "e1e5f1cca22c6a02",
        "name": "End Date",
        "label": "End Date",
        "group": "f76629c8ef571e88",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "edate",
        "topicType": "str",
        "className": "",
        "x": 500,
        "y": 280,
        "wires": [
            [
                "e542571b5ffaf4df"
            ]
        ]
    },
    {
        "id": "6652a6a0391d933e",
        "type": "ui_dropdown",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "label": "Postos_Trabalho",
        "tooltip": "",
        "place": "Select option",
        "group": "f76629c8ef571e88",
        "order": 2,
        "width": "6",
        "height": "1",
        "passthru": false,
        "multiple": false,
        "options": [
            {
                "label": "Posto nº 1",
                "value": "Posto01",
                "type": "str"
            },
            {
                "label": "Posto nº 2",
                "value": "Posto02",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "Postos",
        "topicType": "str",
        "className": "",
        "x": 470,
        "y": 160,
        "wires": [
            [
                "ad81551c98e7e607"
            ]
        ]
    },
    {
        "id": "5d32cd0ff2bf47ff",
        "type": "function",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "func": "\nmsg={ \n \n \"topic\": \"SELECT Data as x, SUM(Unid) as y FROM \" +flow.get (\"Postos\")+ \" WHERE Timestamp BETWEEN \" +flow.get (\"sdate\")+ \" AND \" +flow.get (\"edate\")+ \" GROUP BY Data\"\n \n\n\n}\n\n\n\nreturn msg;\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 500,
        "y": 520,
        "wires": [
            [
                "8d94212a6a132791"
            ]
        ]
    },
    {
        "id": "7fa43234aa77fe38",
        "type": "change",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "sdate",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 720,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "e542571b5ffaf4df",
        "type": "change",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "edate",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 720,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "ad81551c98e7e607",
        "type": "change",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "Postos",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 720,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "8d94212a6a132791",
        "type": "sqlite",
        "z": "e1e5f1cca22c6a02",
        "mydb": "ed499a1a62c74337",
        "sqlquery": "msg.topic",
        "sql": "",
        "name": "Emp.DB",
        "x": 700,
        "y": 520,
        "wires": [
            [
                "6973bb8b35c582a4",
                "b8d5d9445675c0b1"
            ]
        ]
    },
    {
        "id": "b87cf50ff46554a6",
        "type": "function",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "func": "\nmsg={ \n \n \"topic\": \"SELECT SUM(Unid) FROM \" +flow.get (\"Postos\")+ \" WHERE Timestamp BETWEEN \" +flow.get (\"sdate\")+ \" AND \" +flow.get (\"edate\")+\"\"\n\n\n}\n\n\n\n\nreturn msg;\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 500,
        "y": 400,
        "wires": [
            [
                "5b584265e8141ee7"
            ]
        ]
    },
    {
        "id": "5b584265e8141ee7",
        "type": "sqlite",
        "z": "e1e5f1cca22c6a02",
        "mydb": "ed499a1a62c74337",
        "sqlquery": "msg.topic",
        "sql": "",
        "name": "Emp.DB",
        "x": 680,
        "y": 400,
        "wires": [
            [
                "365ed8a2bb3a50f1"
            ]
        ]
    },
    {
        "id": "1ddd8012aa218c72",
        "type": "ui_gauge",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "group": "f76629c8ef571e88",
        "order": 6,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "Total ",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": 10,
        "colors": [
            "#00b500",
            "#00e60f",
            "#3acb52"
        ],
        "seg1": "",
        "seg2": "",
        "className": "",
        "x": 1030,
        "y": 400,
        "wires": []
    },
    {
        "id": "365ed8a2bb3a50f1",
        "type": "change",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload[0].SUM(Unid)",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 860,
        "y": 400,
        "wires": [
            [
                "1ddd8012aa218c72"
            ]
        ]
    },
    {
        "id": "ee1b8820b5479163",
        "type": "ui_chart",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "group": "f76629c8ef571e88",
        "order": 5,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "bar",
        "legend": "false",
        "xformat": "D/M",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "86400",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 1270,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "6973bb8b35c582a4",
        "type": "debug",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 930,
        "y": 640,
        "wires": []
    },
    {
        "id": "b8d5d9445675c0b1",
        "type": "function",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "func": "\n\n\nvar chart = [{\n \"series\": [msg.payload[0].x],\n\n \"data\": [msg.payload[0].y] ,\n \"labels\": (\" \")\n \n}];\n\n\nmsg.payload = chart;\n\n\n\n\nreturn msg;\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 940,
        "y": 540,
        "wires": [
            [
                "a6aaec32e767feec",
                "ee1b8820b5479163"
            ]
        ]
    },
    {
        "id": "a6aaec32e767feec",
        "type": "debug",
        "z": "e1e5f1cca22c6a02",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1250,
        "y": 600,
        "wires": []
    },
    {
        "id": "f76629c8ef571e88",
        "type": "ui_group",
        "name": "Group_ teste",
        "tab": "58cd2d9b8236774d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ed499a1a62c74337",
        "type": "sqlitedb",
        "db": "C:\\Users\\Admin\\Documents\\Emp.db",
        "mode": "RWC"
    },
    {
        "id": "58cd2d9b8236774d",
        "type": "ui_tab",
        "name": "Tab 4",
        "icon": "dashboard",
        "order": 4
    }
]

```

---

<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:** [22 May 2022 19:45 UTC](https://discourse.nodered.org/t/simple-bar-chart/62938/2 "2022-05-22T19:45:12Z")

</div>

Maybe this thread will help

> [@Convert msg.payload from sql node to an array for bar chart](https://discourse.nodered.org/t/convert-msg-payload-from-sql-node-to-an-array-for-bar-chart/61250):
>
> Hello, I am new to the node-red community. I am currently trying to display data from an sql database in a bar chart. I have an sql table with two columns : client (name of the client) and nbconnexion (number of times this client logged in). By doing the follwing sql query : SELECT name as client, count(\*) AS nbconnexion FROM `ConnexionTime` GROUP BY client LIMIT 10 I get the following table : [image] Now I want to display this data by doing a barchart using the ui\_chart node. How do I co…

---

<div class="post-metadata">

**Author:** ![Manu77](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@Manu77](https://discourse.nodered.org/u/Manu77)\
**Post date:** [22 May 2022 20:36 UTC](https://discourse.nodered.org/t/simple-bar-chart/62938/3 "2022-05-22T20:36:27Z")

</div>

Yessss. it works now ! Thank you 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:** [5 June 2022 20:36 UTC](https://discourse.nodered.org/t/simple-bar-chart/62938/4 "2022-06-05T20:36:46Z")

</div>

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