UI Builder change background color depending on the displayed value

General
21

Ok... i see. Yes this is a little bit more tricky :wink:

After reading the chartkick documentation the chart data : can also be an array of arrays instead of objects.

Like :

lineChartData: [
				{
					name: "Line1",
					data: [ ["Jan", 5], ["Feb", 33], ["Mar", 6] ]
				},
				{
					name: "Line2",
					data: [ ["Jan", 45], ["Feb", 5], ["Mar", 26] ]
				}
			]

This will make it easier to push new values to each of the line's data array.
Ofcourse now you have to restructure the message you are sending to uibuilder since its a multiline.
I dont know how you differentiate the msgs coming in but maybe the message payload can also be an array of arrays

[["Jan", 21], ["Jan", 25]]

Where newVal.payload[0] is the new value for Line 1 and newVal.payload[1] the value for Line 2
and in uibuilder.onChange

vueApp.lineChartData[0].data.push(newVal.payload[0])
vueApp.lineChartData[1].data.push(newVal.payload[1])

Now comes the tricky part .. the above push() command will add the new data but there may be a problem with something in Vue called reactivity.
Since our lineChartData vue data is a deep nested array, Vue may not detect the new value changes to update the DOM / Chart.

I didnt investigate further because of time but instead of using push() you can try to use
this.$set as described in the Vue documentation

Reactivity in Depth

22

Hi Andy,
you are right about the reactivity in depth.
Although my array arrives in the correct format, the chart remains empty.
unfortunately I have no idea how to use. $ set instead of push.
That's how I've built the project up to now.
here my index.js and my index.html

/* jshint browser: true, esversion: 5 */
/* globals document,Vue,window,uibuilder */
// @ts-nocheck
/*
  Copyright (c) 2019 Julian Knight (Totally Information)
*/
'use strict';

/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */

// eslint-disable-next-line no-unused-vars
var app1 = new Vue({
    el: '#app',
    data: {
    lineChartData: [
				{
					name: "Line1",
					data: []
				},
				{
					name: "Line2",
					data: []
				}
			]
    }, // --- End of data --- //
    computed: {
    }, // --- End of computed --- //
    methods: {
    }, // --- End of methods --- //

    // Available hooks: init,mounted,updated,destroyed
    mounted: function(){
        uibuilder.start();
        var vueApp = this;
        // Process new messages from Node-RED
        uibuilder.onChange('msg', function (newVal) {

   vueApp.lineChartData[0].data.push([newVal.payload[0],newVal.payload[1]+2]);
   vueApp.lineChartData[1].data.push([newVal.payload[0],newVal.payload[1]]);
// If data array > 1000 points, keep it at that length by losing the first point
       //     if ( vueApp.areaChartData.length > 1000 ) vueApp.areaChartData.shift()
          //  console.log(vueApp.lineChartData[0]);
        });
    } // --- End of mounted hook --- //

}); // --- End of app1 --- //;

// EOF

<!doctype html><html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Chartkick/VueJS Example - Node-RED UI Builder</title>
    <meta name="description" content="Node-RED UI Builder - Chartkick/VueJS Example">

    <link rel="icon" href="./images/node-blue.ico">

    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />

    <link rel="stylesheet" href="./index.css" media="all">
</head><body>
    <div id="app">
        <b-container id="app_container">

            <h1>
                Example of using <a href="https://chartkick.com/vue" target="_blank">Vue Chartkick</a>
                with uibuilder, VueJS and bootstrap-vue
            </h1>

            <b-row>
                <b-card  class="w-100 mt-3 mb-3" header="Multi-Series Line Chart" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
                    <line-chart :data="lineChartData"></line-chart>
                </b-card>

              </b-row>

        </b-container>
        <h1>{{lineChartData}}</h1>
    </div>

    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
    <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>

    <!-- Loading from CDN, use uibuilder to install packages and change to vendor links -->
    <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script> <!-- Chart.js -->
    <script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts -->
    <!-- <script src="https://code.highcharts.com/highcharts.js"></script>  HighCharts -->
    <script src="https://unpkg.com/vue-chartkick@0.5.1"></script>

    <script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
    <script src="./index.js"></script>

</body></html>

greetings Chris

23

Hi Chris,

I've been straggling with this too last night and today i read on the Chartkick github issues page that its a known issue with this library. No concrete answers were given in the thread.

Can not get multi-series graphs to update #102

I'll try to make an example with vue-google-charts

24

I managed to finish an example using vue-google-charts and its seems that its updating fine when new data is received.

Below you will find the necessary files to make it work but it will require a build step using Parcel
which is a web application bundler similar with webpack.

index.html

<html>
  <head>
    <title>Uibuilder</title>
  </head>
  <body>
    <!-- <script src="./js/socket.io.js"></script> -->
    <div id="app"></div>

    <script src="./app.js"></script>
  </body>
</html>

app.js

import Vue from 'vue'
import App from './components/App.vue'


import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


// Vue.use(uibuilder)
window.uibuilder = uibuilder;


new Vue({
    el: '#app',
  // runtimerCompiler: true, 
 //   router,
  //  store,
    render: h => h(App)
})

/components/App.vue

<template>
  <div class="container ml-2">
    <h4 class="col-md-6 mt-4 ml-2">Google Vue Chart Example :</h4><br>
    <div class="row p-2">
      <div v-if="chartData.length > 1" class="myChart col-8">
        <GChart type="LineChart" :data="chartData" :options="chartOptions" />
      </div>
      <div v-else class="col-md-6 mt-5 ml-5"><b-alert show variant="warning">No Data to display</b-alert></div>
    </div>
    <div class="row p-2 ml-5 mt-5">
      <h4 class="col-md-6 mt-4 ml-2">Last message received from Node-Red :</h4><br>
      <pre>{{ msg }}</pre>
    </div>
  </div>
</template>

<script>
import { GChart } from "vue-google-charts";

module.exports = {
  name: "Chart",

  components: {
    GChart,
  },
  data() {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      msg: "",
      // chartData: [
      //   ["Year", "Sales", "Expenses", "Profit"],
      //   ["2012", 1000, 400, 200],
      //   ["2015", 1170, 460, 250],
      //   ["2016", 660, 1120, 300],
      //   ["2017", 1030, 540, 350],
      // ],
      chartData: [["Datetime", "Line1", "Line2", "Line3"]],
      chartOptions: {
        title: "My Google Vue Chart",
        width: 1200,
        height: 500,
        curveType: "function",
        hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
            color: "black",
            //fontName: 'Vernada',
            //bold:true,
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "selection",
        },
        focusTarget: "category",
        animation: {
          duration: 3000,
          easing: "out",
          startup: true, //This is the new option
        },

        lineWidth: 3,
      },
    };
  },
  created() {
    let vueApp = this;
    uibuilder.start();

    uibuilder.onChange("msg", function(newVal) {
      console.info("Msg received from Node-RED server :", newVal);
      vueApp.msg = JSON.stringify(newVal, undefined, 2);

      vueApp.chartData.push(newVal.payload);
    });

    // If a message is sent back to Node-RED, we can grab a copy here if we want to
    uibuilder.onChange("sentMsg", function(newVal) {
      //console.info('[indexjs:uibuilder.onChange:sentMsg] msg sent to Node-RED server:', newVal)
      vueApp.msgSent = newVal;
    });
  },

  methods: {},
};
</script>

<style scoped>
pre {
  white-space: pre-wrap;
  border-radius: 20px;
  line-height: 1.3;
  background-color: #369;
  color: #fff;
  padding: 20px;
  margin-top: 20px;
  width: 600px;
}
</style>

package.json

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-vue": "^2.17.3",
    "vue": "^2.6.12",
    "vue-google-charts": "^0.3.3"
  }
}

Steps :

  1. create your 4 files in the src folder in .node-red\uibuilder\<name of uibuilder url>\src
  2. Install parcel globally with the command : npm install -g parcel-bundler
  3. go to path .node-red\uibuilder<name of uibuilder url>\src
  4. run npm install to install the necessary modules based on the package.json
  5. run the command parcel build index.html --public-url ./ --no-cache --out-dir ../dist/
    to build the app in the dist folder.
  6. you may need to restart node red so it will now serve the dist folder instead of src

Test flow to send fake values to the chart

[{"id":"6cd2ee61.53b2d","type":"inject","z":"548eb292.85e214","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":240,"wires":[["d4ff5954.48359"]]},{"id":"813ff99c.eef53","type":"function","z":"548eb292.85e214","name":"","func":"let random = Number((Math.random() * 30).toFixed(2))\nlet val1 = 1000 + random\nlet val2 = 400 + random\nlet val3 = 200 + random\n\nmsg.payload = [msg.datetime, val1, val2, val3];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":620,"y":240,"wires":[["98aee343.6984d8","f84dbabf.8a106"]]},{"id":"98aee343.6984d8","type":"debug","z":"548eb292.85e214","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":970,"y":160,"wires":[]},{"id":"f84dbabf.8a106","type":"uibuilder","z":"548eb292.85e214","name":"","topic":"","url":"chart","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":990,"y":320,"wires":[[],[]]},{"id":"d4ff5954.48359","type":"moment","z":"548eb292.85e214","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/Nicosia","adjAmount":0,"adjType":"days","adjDir":"add","format":"YYYY-MM-DD HH:mm:ss","locale":"en_US","output":"datetime","outputType":"msg","outTz":"Europe/Nicosia","x":420,"y":240,"wires":[["813ff99c.eef53"]]}]
25

HiAndy,

unfortunately I haven't got your example working yet.
But I tested to transfer the entire content from Node-red directly to the chart, it worked.
It would work if my values (come from an SQL database) are only transferred to the chart once every minute.
that worked so far.
Only the old data would have to be deleted before the arrival of new data.
there is currently still my problem.
This is what my attempt looks like at the moment.

Anything else, what program do you work with to create the pages?

greetings Chris

Node-red:

[{"id":"d59fc4d9.664b58","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"93a1270b.4e2a68","type":"inject","z":"d59fc4d9.664b58","name":"repeat every 10s","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":240,"wires":[["9466ca1.384d038"]]},{"id":"fcfe28f1.29b228","type":"debug","z":"d59fc4d9.664b58","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":320,"wires":[]},{"id":"482c5a4f.9e97e4","type":"debug","z":"d59fc4d9.664b58","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":930,"y":360,"wires":[]},{"id":"be814071.4e2f4","type":"comment","z":"d59fc4d9.664b58","name":"html","info":"copy the following and paste into `index.html`\n\n```html\n<!doctype html><html lang=\"en\"><head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\">\n\n    <title>Chartkick/VueJS Example - Node-RED UI Builder</title>\n    <meta name=\"description\" content=\"Node-RED UI Builder - Chartkick/VueJS Example\">\n\n    <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css\" />\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css\" />\n\n    <link rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n</head><body>\n    <div id=\"app\">\n        <b-container id=\"app_container\">\n\n            <h1>\n                Example of using <a href=\"https://chartkick.com/vue\" target=\"_blank\">Vue Chartkick</a>\n                with uibuilder, VueJS and bootstrap-vue\n            </h1>\n\n            <b-row>\n                <b-card cols=\"5\" class=\"mr-1\" header=\"Bar Chart\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                    <column-chart :data=\"[['Sun', 32], ['Mon', 46], ['Tue', 28]]\"></column-chart>\n                </b-card>\n\n                <b-card  class=\"mr-1\" header=\"Line Chart\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                    <line-chart :data=\"lineChartData\"></line-chart>\n                </b-card>\n\n                <b-card  class=\"mr-1\" header=\"Multi-Series Line Chart\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                    <line-chart :data=\"lineChartData2\"></line-chart>\n                </b-card>\n\n                <b-card class=\"w-100 mt-3 mb-3\" header=\"Area Chart\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                    <area-chart :data=\"areaChartData\"></area-chart>\n                </b-card>\n\n                <b-card class=\"mr-1\" header=\"Geo Chart (Google)\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                    <geo-chart width=\"800px\" :data=\"[['United States', 44], ['Germany', 23], ['Brazil', 22]]\"></geo-chart>\n                </b-card>\n\n                <b-card class=\"mr-1\" header=\"Timeline (Google)\" border-variant=\"primary\" header-bg-variant=\"primary\" header-text-variant=\"white\" align=\"center\">\n                   <timeline width=\"800px\" :data=\"[['Washington', '1789-04-29', '1797-03-03'], ['Adams', '1797-03-03', '1801-03-03']]\"></timeline>\n                </b-card>\n\n            </b-row>\n\n        </b-container>\n    </div>\n\n    <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n    <script src=\"../uibuilder/vendor/vue/dist/vue.min.js\"></script>\n    <script src=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js\"></script>\n\n    <!-- Loading from CDN, use uibuilder to install packages and change to vendor links -->\n    <script src=\"https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js\"></script> <!-- Chart.js -->\n    <script src=\"https://www.gstatic.com/charts/loader.js\"></script> <!-- Google Charts -->\n    <!-- <script src=\"https://code.highcharts.com/highcharts.js\"></script>  HighCharts -->\n    <script src=\"https://unpkg.com/vue-chartkick@0.5.1\"></script>\n\n    <script src=\"./uibuilderfe.min.js\"></script> <!--    //prod version -->\n    <script src=\"./index.js\"></script>\n\n</body></html>\n```","x":590,"y":440,"wires":[]},{"id":"fb09f259.9acb","type":"comment","z":"d59fc4d9.664b58","name":"JavaScript","info":"Copy the following and paste into `index.js`\n\n```javascript\n/* jshint browser: true, esversion: 5 */\n/* globals document,Vue,window,uibuilder */\n// @ts-nocheck\n/*\n  Copyright (c) 2019 Julian Knight (Totally Information)\n\n  Licensed under the Apache License, Version 2.0 (the \"License\");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n  http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an \"AS IS\" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n*/\n'use strict'\n\n/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */\n\n// eslint-disable-next-line no-unused-vars\nvar app1 = new Vue({\n    el: '#app',\n    data: {\n        // Single series line chart\n        lineChartData: [\n            ['Jan', 4], ['Feb', 2], ['Mar', 10], ['Apr', 5], ['May', 3],\n        ],\n        // Multi-series line chart\n        lineChartData2: [\n            {name: 'Workout', data: {'2017-01-01 00:00:00 -0800': 3, '2017-01-02 00:00:00 -0800': 4}},\n            {name: 'Call parents', data: {'2017-01-01 00:00:00 -0800': 5, '2017-01-02 00:00:00 -0800': 3}},\n        ],\n\n        // Area chart\n        areaChartData: [], //{\n            //'2017-01-01 00:00:00 -0800': 2,\n            //'2017-01-01 00:01:00 -0800': 5,\n        //},\n\n    }, // --- End of data --- //\n    computed: {\n    }, // --- End of computed --- //\n    methods: {\n    }, // --- End of methods --- //\n\n    // Available hooks: init,mounted,updated,destroyed\n    mounted: function(){\n        /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3\n         * Pass the namespace and ioPath variables if hosting page is not in the instance root folder\n         * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.\n         * e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names\n         */\n        uibuilder.start()\n\n        var vueApp = this\n\n        // Process new messages from Node-RED\n        uibuilder.onChange('msg', function (newVal) {\n            // We are assuming that msg.payload is an array like [datenum, value]\n\n            // Add new element\n            vueApp.areaChartData.push( new Array( (new Date(newVal.payload[0])), newVal.payload[1] ) )\n\n            // If data array > 1000 points, keep it at that length by losing the first point\n            if ( vueApp.areaChartData.length > 1000 ) vueApp.areaChartData.shift()\n\n            //console.log(vueApp.areaChartData)\n        })\n\n    } // --- End of mounted hook --- //\n\n}) // --- End of app1 --- //\n\n// EOF\n```\n","x":760,"y":440,"wires":[]},{"id":"e4372d1a.78ebc","type":"debug","z":"d59fc4d9.664b58","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":870,"y":200,"wires":[]},{"id":"e5a1045f.45eae8","type":"function","z":"d59fc4d9.664b58","name":"","func":"\nmsg.payload=[\n{ \"name\": \"Line1\", \"data\":  [[ msg.datetime, 25 ], [  msg.datetime+1,33 ], [  msg.datetime+2, 66]] }, \n{ \"name\": \"Line2\", \"data\":  [[  msg.datetime, 45 ], [  msg.datetime+1, 55 ], [  msg.datetime+2, 26]] },\n{ \"name\": \"Line3\", \"data\":  [[  msg.datetime, 85 ], [  msg.datetime+1, 85 ], [  msg.datetime+2, 86]] } \n\n\n\n]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":630,"y":180,"wires":[["e4372d1a.78ebc","d3ac5c72.33bda"]]},{"id":"d3ac5c72.33bda","type":"uibuilder","z":"d59fc4d9.664b58","name":"","topic":"","url":"ChartControl","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":760,"y":340,"wires":[["fcfe28f1.29b228"],["482c5a4f.9e97e4"]]},{"id":"9466ca1.384d038","type":"moment","z":"d59fc4d9.664b58","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/Berlin","adjAmount":0,"adjType":"days","adjDir":"add","format":"YYYY-MM-DD HH:mm:ss","locale":"en_US","output":"datetime","outputType":"msg","outTz":"Europe/Berlin","x":400,"y":200,"wires":[["e5a1045f.45eae8"]]}]

html:

<!doctype html><html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Chartkick/VueJS Example - Node-RED UI Builder</title>
    <meta name="description" content="Node-RED UI Builder - Chartkick/VueJS Example">

    <link rel="icon" href="./images/node-blue.ico">

    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />

    <link rel="stylesheet" href="./index.css" media="all">
</head><body>
    <div id="app">
        <b-container id="app_container">

            <h1>
                Example of using <a href="https://chartkick.com/vue" target="_blank">Vue Chartkick</a>
                with uibuilder, VueJS and bootstrap-vue
            </h1>

            <b-row>
                <b-card  class="w-100 mt-3 mb-3" header="Multi-Series Line Chart" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
                    <line-chart :data="lineChartData"></line-chart>
                </b-card>

              </b-row>

        </b-container>
        <h1>{{lineChartData}}</h1>
    </div>

    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
    <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>

    <!-- Loading from CDN, use uibuilder to install packages and change to vendor links -->
    <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script> <!-- Chart.js -->
    <script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts -->
    <!-- <script src="https://code.highcharts.com/highcharts.js"></script>  HighCharts -->
    <script src="https://unpkg.com/vue-chartkick@0.5.1"></script>

    <script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
    <script src="./index.js"></script>

</body></html>

index.js


/* globals document,Vue,window,uibuilder */

'use strict';

/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */

// eslint-disable-next-line no-unused-vars
var app1 = new Vue({
      lineChartData:"",
    el: '#app',
  
    data: {
 
 lineChartData: []
  
   
   
    }, // --- End of data --- //
    computed: {
    }, // --- End of computed --- //
    methods:  {
    }, // --- End of methods --- //

    // Available hooks: init,mounted,updated,destroyed
    mounted: function(){
        uibuilder.start();
        var vueApp = this;
     
        // Process new messages from Node-RED
        uibuilder.onChange('msg', function (newVal) {

vueApp.lineChartData.push(newVal.payload[0],newVal.payload[1],newVal.payload[2]);
  //  if ( vueApp.areaChartData.length > 2 ) vueApp.areaChartData.remove();  
 
        });
    } // --- End of mounted hook --- //

}); // --- End of app1 --- //;

// EOF
26

.. that seems like a good workaround to Vue's reactivity issue with nested arrays.
to do all the processing of the chart data on Node-red side and
on uibuilder.onChange you can reset the existing chart data with vueApp.lineChartData = [] before pushing the new complete msg. Sounds good.

I use Visual Studio Code with Vetur extension installed that is for Vue Syntax-highlighting in VS code.

1 Like
27

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