# Uibuilder - Getting array data from Node-Red into a bar chart

**URL:** <https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [5 July 2022 20:44 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745 "2022-07-05T20:44:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbrann](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@dbrann](https://discourse.nodered.org/u/dbrann)\
**Post date:** [5 July 2022 20:44 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/1 "2022-07-05T20:44:31Z")

</div>

First of all, I'm just getting into uibuilder, and I'm not great with html or javascript, but I think I have a question that will be reasonably simple for someone. I'm using the example @ [Creating Charts with uibuilder and ApexCharts (flow) - Node-RED](https://flows.nodered.org/flow/9e6a7ba4ac5cebbe058e53ddb9d8feac) to try to input data from a SQL database into a bar chart. Working with this example, I've been able to get an array of numbers into the donut chart (dseries data), but I cannot figure out how to get the same array of numbers in the (series: data) for the bar chart.

I'm using this script for the donut chart.

uibuilder.onChange('msg', function (newVal) {  
vueApp.dseries = newVal.payload //.push(newVal.payload)  
vueApp.dseries.push()  
uibuilder.send(msg)  
})

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 July 2022 20:48 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/2 "2022-07-05T20:48:14Z")

</div>

Best to put your code into pre-formatted text blocks, it is a lot easier to read.

Your code example is pushing nothing into your dseries array so that isn't going to work.

Best thing is to get some example data similar to a simplified version of the data from your db and share that. Then we can help you put that into the chart.

---

<div class="post-metadata">

**Author:** ![dbrann](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@dbrann](https://discourse.nodered.org/u/dbrann)\
**Post date:** [5 July 2022 20:53 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/3 "2022-07-05T20:53:18Z")

</div>

I'm using a function node prior to the uibuilder node to inject the following.

msg.payload = [10,9,22,24,54,33,32,31]  
return msg;

This data does get placed into the donut chart via the dseries variable and works. I simply can't figure out how to push the array into the series data of the bar chart. Below is how the variables for the vue app are formatted in the setup.

Sorry, my first time on the site. I'm not sure how to use pre-formatted text blocks.

```auto
var app1 = new Vue({
    el: '#app',
    data: {
        startMsg : 'Vue has started, waiting for messages',

        // Data for bar chart
        options: {
            chart: {
                id: 'vuechart-example'
            },
            xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
            }
        },
        series: [{
            name: 'series-1',
            data: [30, 40, 45, 50, 49, 60, 70, 91]
        }],

        // Data for donut chart
        doptions: {},
        dseries: [44, 55, 41, 17, 15]

```

---

<div class="post-metadata">

**Author:** ![dbrann](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@dbrann](https://discourse.nodered.org/u/dbrann)\
**Post date:** [5 July 2022 20:53 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/4 "2022-07-05T20:53:49Z")

</div>

Never mind, I guess that worked for pre-formatted... 😀

---

<div class="post-metadata">

**Author:** ![dbrann](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@dbrann](https://discourse.nodered.org/u/dbrann)\
**Post date:** [5 July 2022 23:09 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/5 "2022-07-05T23:09:26Z")

</div>

I kept pushing through and finally figured it out.

---

<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:** [3 September 2022 23:09 UTC](https://discourse.nodered.org/t/uibuilder-getting-array-data-from-node-red-into-a-bar-chart/64745/6 "2022-09-03T23:09:47Z")

</div>

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