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

General
1

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 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!

2

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.

3

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.

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]
4

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

1 Like
5

I kept pushing through and finally figured it out.

1 Like
6

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