I have integrated the below area-graph https://apexcharts.com/vue-chart-demos/area-charts/basic/
In my vue uibuilder template provided by node-red.
Now I would like to have my graph responsive to the new data that comes from node red (updating).
My first question, is this possible? if so, what should I change/add to the example link that I have placed above to have it re-rendering to the new data that has comin in from node-red.
If it is not clear I still can place minimal example.
With uibuilder, anything is possible! But seriously, yes it is certainly possible.
Hmm, naughty of them in that demo data: series.monthDataSeries1.prices does not make sense given the demo code. But anyway, that's the bit you will be most interested in.
The first thing to do would be to set up a test flow using the ApexCharts example from the uibuilder WIKI. That should show you what you need to do. Unfortunately, that example is a little dated and uses VueJS v2 and also uses the older uibuilder front-end library (uibuilderfe.js) rather than the newer uibuilder.iife.js or uibuilder .esm.js library. But it should get you started anyway.
The key thing to note is the warning at the top of the WIKI example about the data object being too complex for Vue to automatically update. There are various ways to deal with that but the simplest is shown in the example code which is to replace the whole data array after an incoming msg with new data. Otherwise you can use Vue's set function.
Thank you very much, and really appreciate your repository.
I have tried this the pie chart updates fine when a new data comes in. but the bar chart next to it does not. I have the onChange function as below:
uibuilder.onChange('msg', function (newVal) {
if ( typeof newVal.payload === 'number' ){
// Add new element
vueApp.series[0].data.push(newVal.payload)
console.log(newVal.payload)
// Lose the first element
vueApp.series[0].data.shift()
//console.log(vueApp.dseries)
}
})
I'm fairly sure that this is covered by the extra note at the top of the wiki entry, you need to completely replace the data array or use set to tell Vue that the data is updated. There is another thread in the forum from maybe a month back that covers this.
Thank you very much, I checked the wiki again and it helped.
I have changed the code of the onChange as below for someone else who needs it
// Process new messages from Node-RED
uibuilder.onChange('msg', function (newVal) {
if ( typeof newVal.payload === 'number' ){
// Add new element
// vueApp.series[0].data.push(newVal.payload)
const data = vueApp.series[0].data
data.push(newVal.payload)
vueApp.series = [{ data: data }]
vueApp.dseries.push(newVal.payload)
console.log(newVal.payload)
// Lose the first element
vueApp.series[0].data.shift()
vueApp.dseries.shift()
//console.log(vueApp.dseries)
}
})
Thanks a lot,
By the way I have read here and there that there are some issues with ApexCharts running on Android web engines, is this still the case?
Great, glad you've got it working. ApexCharts isn't the easiest to work with but it claims to be mobile friendly. I've not really tried it on mobile to be honest.
I've now updated the WIKI entry to use the latest uibuilder v6 code and also updated and extended to better show how to dynamically update the more complex charts such as Bar and Line.
But seriously, yes it is certainly possible.