# UI Builder change background color depending on the displayed value

**URL:** <https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [5 October 2020 16:28 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778 "2020-10-05T16:28:20Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 October 2020 13:15 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/21 "2020-10-16T13:15:30Z")

</div>

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

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

Like :

```auto
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

```auto
[["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

```auto
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](https://vuejs.org/v2/guide/reactivity.html#For-Arrays)

---

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [17 October 2020 11:28 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/22 "2020-10-17T11:28:21Z")

</div>

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

```auto
/* 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

```

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

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [17 October 2020 16:57 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/23 "2020-10-17T16:57:30Z")

</div>

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](https://github.com/ankane/vue-chartkick/issues/102)

I'll try to make an example with [vue-google-charts](https://codesandbox.io/embed/v3qorzrxm7)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [17 October 2020 20:19 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/24 "2020-10-17T20:19:27Z")

</div>

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](https://parceljs.org/)**  
which is a web application bundler similar with webpack.

**index.html**

```auto
<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**

```auto
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**

```auto
<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**

```auto
{
  "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**

```auto
[{"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"]]}]

```

---

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [18 October 2020 05:11 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/25 "2020-10-18T05:11:55Z")

</div>

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:

````auto
[{"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:

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

```auto

/* 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

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 October 2020 00:05 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/26 "2020-10-19T00:05:00Z")

</div>

> [@ChrisWeb71](#):
>
> But I tested to transfer the entire content from Node-red directly to the chart, it worked

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

> [@ChrisWeb71](#):
>
> what program do you work with to create the pages?

I use [Visual Studio Code](https://code.visualstudio.com/) with **Vetur** extension installed that is for Vue Syntax-highlighting in VS code.

---

<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:** [2 November 2020 00:05 UTC](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778/27 "2020-11-02T00:05:03Z")

</div>

Closed on 2 November 2020 00:05 UTC

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

[Previous page](https://discourse.nodered.org/t/ui-builder-change-background-color-depending-on-the-displayed-value/33778.md?page=1)