Examples using Apexcharts with uibuilder

Dashboard
1

Hi!

I installed the uibuilder to use apexcharts in node red, but when I try to implement the example on node red, I only get the title, no the chart. The example is this.

2

I have just tested that code with the latest version of node-red and it appears to be working fine. Can you please share your html and js code?

3

Yes, here is the js code:

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]
            }
        },
        series: [{
            name: 'series-1',
            data: [30, 40, 45, 50, 49, 60, 70, 91]
        }],

        // 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.dseries.push(newVal.payload)
                // Lose the first element
                vueApp.dseries.shift()
                //console.log(vueApp.dseries)
            }
        })

    } // --- End of mounted hook --- //

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

// EOF

and this is the html code:

<!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="Bar Chart" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
                        <apexchart width="100%" type="bar" :options="options" :series="series"></apexchart>
                </b-card>

                <b-card col class="w-50" header="Donut Chart" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="center">
                        <apexchart width="100%" type="donut" :options="doptions" :series="dseries"></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>

I only get this on the chart page:

image
image1866Ă—990 23.3 KB

4

You code example works fine for me ..

image
image1165Ă—499 25.8 KB

Are you sure you installed the correct Vue 2 version that is needed for the apexchart library ?

image

Its a common mistake that people install the Vue 3 library instead for either bootstrap-vue or apexcharts in this case this is not supported.

2 Likes
5

OK, you should check your browser's dev console for errors. As Andy has suggested, I suspect you've loaded Vue v3 rather than v2 and the fact that your browser window hasn't centred the title with a white background shows that bootstrap-vue is not loaded.

6

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