Hope it's ok to revive this topic. I am working with your examples at :https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-ApexCharts-with-VueJS
I don't have any javascript chops so this has been trial and error. My goal is to create a line chart - time on the x and temperature on the y axis. I am able to put the data pairs directly into the index.js and it looks good. I need some direction, however, on how to load this data into Uibuilder from an inject node for starters with then I can load the data from a file once it's clear how it works. Here is what I have so far:
index.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>ApexChart/VueJS Example - Node-RED UI Builder</title>
<meta name="description" content="Node-RED UI Builder - ApexChart/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">
<b-card col class="w-80" header="Line Chart" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
<apexchart width="100%" type="line" :options="options" :series="series"></apexchart>
</b-card>
</b-container>
</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://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script src="./uibuilderfe.min.js"></script> <!-- //prod version -->
<script src="./index.js"></script>
</body></html>
index.js
'use strict'
/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */
/** Reference the apexchart component (removes need for a build step) */
Vue.component('apexchart', VueApexCharts)
// eslint-disable-next-line no-unused-vars
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]
//}
xaxis: {
type: 'datetime'
}
},
series: [{
name: 'series-1',
//data: [30, 40, 45, 50, 49, 60, 70, 91]
data: [[1582672682720,3.3],[1582672743197,3.4],[1582672802656,3.4],[1582672863262,3.5],[1582672922642,3.6],[1582672983224,3.6],[1582673042637,3.6],[1582673103127,3.6],[1582674603470,3.4],[1582674662717,3.3],[1582674723201,3.2],[1582674782700,3.1],[1582694883073,-3.9],[1582698482591,-4],[1582705322673,-4.1],[1582708923245,-0.6],[1582712522456,-3.2],[1582716123025,-2.4],[1582719722594,-3.6],[1582723322980,-4.5],[1582726923580,-3.4],[1582751943244,10.8],[1582773543768,-2.4],[1582795142888,-1.6],[1582816743323,-5.2],[1582838342726,9.6],[1582860063475,2.4],[1582881662632,-2.4],[1582903262894,-1.9],[1582924983168,11.9],[1582946583208,0.8],[1582968183465,-2.8],[1582989782780,-1.6],[1583011383481,0.7],[1583119382606,-1.8],[1583140983079,1.3],[1583162583504,2.1],[1583184183360,4.7],[1583205783112,-2],[1583227383258,-0.8],[1583248982931,-0.8],[1583270582910,5.4],[1583292182760,0.6],[1583313783483,-1.8],[1583335382559,-1.4],[1583356982766,3.1],[1583378583180,-3.1],[1583400182937,-10.3],[1583421783210,-5],[1583443383273,9.2],[1583464982974,-4.9],[1583486582796,-6.7],[1583508183368,-3.6],[1583529783257,-1.6],[1583551382677,-9.5],[1583572982935,-13.9],[1583594583061,-14.4],[1583616183303,-8.6],[1583637783453,-13.4],[1583659382530,-16.4],[1583680982771,-16.1],[1583702583576,-1.9],[1583724183393,-13.2],[1583745783507,-15.8],[1583767383297,-10.5],[1583790362859,2],[1583811963131,-8.5],[1583833563017,-12.7],[1583855163075,-4.4],[1583876762680,4.9]]
}],
// Data for donut chart
//doptions: {},
//dseries: [44, 55, 41, 17, 15]
}, // --- End of data --- //
computed: {
}, // --- End of computed --- //
methods: {
}, // --- End of methods --- //
// Available hooks: init,mounted,updated,destroyed
mounted: function(){
/** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
* Pass the namespace and ioPath variables if hosting page is not in the instance root folder
* e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
* e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
*/
uibuilder.start()
var vueApp = this
// Process new messages from Node-RED
uibuilder.onChange('msg', function (newVal) {
if ( typeof newVal.payload === 'number' ){
// Add new element
vueApp.series.push(newVal.payload)
// Lose the first element
vueApp.series.shift()
//console.log(vueApp.dseries)
}
})
} // --- End of mounted hook --- //
}) // --- End of app1 --- //
// EOF
