Hi guys,
i'm trying a zoomable time series demo from apex zoomable time series but some how it's not working and i cant really debug because of my limited javascript + html skillls, no error is reported.
What i have done is adopting this example Creating charts with uibuilder and apex charts, replacing it with my time series demo but nothing is really displayed apart from the heading. I need some help to figure out why my demo example is not working, any hints will highly be appreciated thanks!
Here is my code:
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">
<h1>
Examples of using <a href="https://apexcharts.com/docs/vue-charts/" target="_blank">ApexChart</a>
with uibuilder, VueJS and bootstrap-vue
</h1>
<b-row>
<b-card col class="w-50" header="Time series Example" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
<apexchart type="area" height="350" :options="chartOptions" :series="series"></apexchart>
</b-card>
</b-row>
</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
/* jshint browser: true, esversion: 5 */
/* globals document,Vue,window,uibuilder,VueApexCharts */
// @ts-nocheck
/*
Copyright (c) 2019 Julian Knight (Totally Information)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'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',
components: {
apexchart: VueApexCharts,
},
data: {
series: [{
name: 'XYZ MOTORS',
data: dates
}],
chartOptions: {
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
toolbar: {
autoSelected: 'zoom'
}
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
title: {
text: 'Stock Price Movement',
align: 'left'
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90, 100]
},
},
yaxis: {
labels: {
formatter: function(val) {
return (val / 1000000).toFixed(0);
},
},
title: {
text: 'Price'
},
},
xaxis: {
type: 'datetime',
},
tooltip: {
shared: false,
y: {
formatter: function(val) {
return (val / 1000000).toFixed(0)
}
}
}
},
}, // --- 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.dseries.push(newVal.payload)
// Lose the first element
//vueApp.dseries.shift()
//console.log(vueApp.dseries)
}
})
} // --- End of mounted hook --- //
})
// EOF
and my flow:
[{"id":"df81cc9e.a9171","type":"inject","z":"f6b290d236523026","name":"repeat every 10s","props":[{"p":"payload","v":"","vt":"date"},{"p":"topic","v":"","vt":"str"}],"repeat":"10","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":270,"y":260,"wires":[["6ca36476.d0597c"]]},{"id":"76678044.5aaeb","type":"debug","z":"f6b290d236523026","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":240,"wires":[]},{"id":"bd9b5761.fb4918","type":"debug","z":"f6b290d236523026","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":280,"wires":[]},{"id":"b18a50dd.f7e5c","type":"uibuilder","z":"f6b290d236523026","name":"","topic":"","url":"chart","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"useSecurity":false,"sessionLength":"","tokenAutoExtend":false,"reload":false,"sourceFolder":"src","credentials":{},"x":630,"y":260,"wires":[["76678044.5aaeb"],["bd9b5761.fb4918"]]},{"id":"6ca36476.d0597c","type":"change","z":"f6b290d236523026","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"($random()*10)+($random()*10)\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":260,"wires":[["b18a50dd.f7e5c","ee020c1bdd8c7dbb"]]},{"id":"ee020c1bdd8c7dbb","type":"debug","z":"f6b290d236523026","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":380,"wires":[]}]
Best regards,
