Create full configurable chart through a form (Chart.js)

[Corn98]

Hi, 

I'm pretty new with Node-RED but I like it and I'd like to obtain so much from this platform.

The problem that I have at the moment is to set the Chart definition, properly created in a funciton node, to a Chart instance (new Chart(ctx, chartDef).

Obviously I taken this:

https://flows.nodered.org/flow/c3dc75c47323a2754f5285225bce64b5

how an example, to understand the logic, but while I applying it to my case I surely don't cosider some thing that prevent to reach what I'd want to display.

What I do is, at the moment, take in input some data for chart definition and create it. This works fine. The problem raises when I have to set Chart instance.

Chart definition:

{

type: "bar",
data: {
    labels: [ "1-3-16", "2-3-16", "3-3-16", "4-3-16", "5-3-16", "6-3-16" ],
    datasets: [ {
        label: "Macchina 1",
        data: [ 30, 0, 35, 0, 0, 30 ],
        borderWidth: 2,
        backgroundColor: 'rgba(60, 180, 220, 0.5)',
        borderColor: 'rgba(60, 180, 220, 0.5)'
        }, {
        label: "Macchina 2",
        data: [ 30, 30, 0, 0, 15, 25 ],
        borderWidth: 2,
        backgroundColor: 'rgba(250, 35, 35, 0.5)',
        borderColor: 'rgba(250, 35, 35, 0.5)'
        }, {
        label: "Macchina 3",
        data: [ 30, 20, 25, 0, 0, 45 ],
        borderWidth: 2,
        backgroundColor: 'rgba(35, 250, 35, 0.5)',
        borderColor: 'rgba(35, 250, 35, 0.5)'
        }
    ]
 },


options: {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true,
            ticks: {
                min: 0,
                max: 100,
                stepSize: 5
            }
        }]
    },
    tooltips: {
        mode: 'index',
        intersect: true,
        titleFontSize:12,
        bodyFontSize:20
    },
    animation: {
        duration: 2000
    }
}

Template node:  (in msg.DEF is stored Chart definition)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="chart" width=100%></canvas>
<script>
(function() {
   
    function doChart() {
        var ctx = document.getElementById("chart");
        var myChart = new Chart(ctx, msg.DEF);
           
        myChart.update();
    }


    (function(scope) {
       
        scope.$watch('msg', function(msg) {
            if(msg) {
                doChart(msg, scope);
            }
        });
    })(scope);
})();
</script>

Certainly I do errors but I cannot find it, I kindly ask some help because I don't know what I can do anymore.

Thanks in advance!

[Colin Law]

Are you getting any errors? Check in the browser console.

Colin

> --
> You received this message because you are subscribed to the Google Groups
> "Node-RED UI" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red-contri...@googlegroups.com.
> To post to this group, send email to node-red-...@googlegroups.com.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red-contrib-ui/912715d6-0e64-430d-9f1e-14cf821bf8b0%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Corn98]

Hi Colin, 

thanks for quick answer! 

However yes i do,  i get this error:

ReferenceError: msg is not defined

    at doChart (eval at globalEval (app.min.js:18), <anonymous>:5:38)

    at eval (eval at globalEval (app.min.js:18), <anonymous>:15:17)

    at m.$digest (app.min.js:164)

    at m.$apply (app.min.js:167)

    at app.min.js:180

    at e (app.min.js:66)

    at app.min.js:69

(anonymous) @ app.min.js:139

(anonymous) @ app.min.js:111

$digest @ app.min.js:164

$apply @ app.min.js:167

(anonymous) @ app.min.js:180

e @ app.min.js:66

(anonymous) @ app.min.js:69

setTimeout (async)

k.defer @ app.min.js:69

f @ app.min.js:179

u @ app.min.js:496

Emitter.emit @ socket.io.js:7414

Socket.onevent @ socket.io.js:7130

Socket.onpacket @ socket.io.js:7088

(anonymous) @ socket.io.js:7520

Emitter.emit @ socket.io.js:7414

Manager.ondecoded @ socket.io.js:2823

(anonymous) @ socket.io.js:7520

Emitter.emit @ socket.io.js:2285

Decoder.add @ socket.io.js:1054

Manager.ondata @ socket.io.js:2813

(anonymous) @ socket.io.js:7520

Emitter.emit @ socket.io.js:6102

Socket.onPacket @ socket.io.js:3523

(anonymous) @ socket.io.js:3341

Emitter.emit @ socket.io.js:6102

Transport.onPacket @ socket.io.js:4760

Transport.onData @ socket.io.js:4752

ws.onmessage @ socket.io.js:6640

even if i tried to add this

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="chart" width=100%></canvas>
<script>
(function() {
   
    function doChart() {
        var ctx = document.getElementById("chart");
        var myChart = new Chart(ctx, msg.DEF);
           
        myChart.update();
    }


    (function(scope) {
       
        scope.$watch('msg', function(msg) {
            if(msg) {

                console.log(msg)                      //line added

                doChart(msg, scope);
            }
        });
    })(scope);
})();
</script>

to the template node, but i can see all properties of msg.

[Colin Law]

You have lost the parameters in the declaration of doChart, it should be
function doChart(msg, scope) { ...}

Colin

> --
> You received this message because you are subscribed to the Google Groups
> "Node-RED UI" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red-contri...@googlegroups.com.
> To post to this group, send email to node-red-...@googlegroups.com.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/node-red-contrib-ui/9b64e3f3-2daa-48e2-ad75-b81674950e67%40googlegroups.com.

[Colin Law]

On 27 November 2017 at 11:26, lorenzo cornaro <jmaco...@gmail.com> wrote:
> The first question, regarding the correctness of the site's use, is how i
> can share our previous conversation in order to make available what we have
> talked about (It's my first time here).

If you are reading this via email then just using Reply should do it
(or Reply All if necessary). Make sure that the To field contains the
node-red list address, which it should by default. I see you are using
the node red ui list (which is really obsolete) you would be better on
the node red user list which is better supported
https://groups.google.com/forum/#!forum/node-red
I have been copying you in on my posts as you have been sending them
to me so I am not certain which group/groups you are subscribed to.
Assuming you are going through the group then just make sure you send
it back to the group not me personally.

>
> The second question regard problems coming from tries made in these days.
> Node-RED or Chart.bundle.min.js sends every time (i don't know why) a
> message on load of the Tab where is situated the template node, so creating
> a chart.
> The msg that Node-RED or Chart.bundle.min.js sends is the last one sent by
> user through the form (i think the msg is stored in the cache as soon as it
> enters in the template node, so changes to the msg (in the template node)
> won't be saved in chache, but I'm not sure of that).

It is best to sort one problem at a time lets deal with this one
first. Put debug nodes in and work out which node the message is
coming from. Note that if you are still using something similar to the
demo flow as in your first post then you may be talking about the
message from the Chart Helper node. The whole purpose of this node is
to cache the chart data and refresh it when the browser opens the page
so that it shows up to date data. If you don't want that then just
remove that node.

Let's get this problem sorted first then come back with the next question

Colin

[Corn98]

Discussion is moved on:

https://groups.google.com/forum/#!topic/node-red/qmKN70KxrLA