Update JS Chart Data and re render chart

#1

What seems to be the problem:
I have a chart that I need to re render upon data changes made in the db. I am able to reload new data in and re render it but it doesn’t display on the screen. When I click inspect element in safari, it begins to display in the browser, but without clicking inspect element, my card remains empty with no chart. If anyone can assist or provide me with a better solution, it would be greatly appreciated.
Steps to Reproduce:
Master File:
@yield('widget_scripts')

Livewire component
<div class="card-body"><!--begin::Chart--><div id="kt_charts_widget_1_chart"></div><!--end::Chart--></div>

@section('widget_scripts')
	<script type="text/javascript">
		"use strict";

		// Class definition
		var KTWidgets = function() {
		    // Private properties

		    // Charts widgets
		    var _initChartsWidget1 = function() {
		        var element = document.getElementById("kt_charts_widget_1_chart");

		        if (!element) {
		            return;
		        }

		        var options = {
		            series: [{
		                name: 'Amount Correct',
		                data: {!! json_encode($correct) !!}
		            }],
		            chart: {
		                type: 'bar',
		                height: 450,
		                toolbar: {
		                    show: true
		                }
		            },
		            plotOptions: {
		                bar: {
		                    horizontal: false,
		                    columnWidth: ['30%'],
		                    endingShape: 'rounded'
		                },
		            },
		            legend: {
		                show: false
		            },
		            dataLabels: {
		                enabled: false
		            },
		            stroke: {
		                show: true,
		                width: 2,
		                colors: ['transparent']
		            },
		            xaxis: {
		                categories: {!! json_encode($questions) !!},
		                axisBorder: {
		                    show: false,
		                },
		                axisTicks: {
		                    show: false
		                },
		                labels: {
		                    style: {
		                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
		                        fontSize: '12px',
		                        fontFamily: KTApp.getSettings()['font-family']
		                    }
		                }
		            },
		            yaxis: {
		                labels: {
		                    style: {
		                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
		                        fontSize: '12px',
		                        fontFamily: KTApp.getSettings()['font-family']
		                    }
		                }
		            },
		            fill: {
		                opacity: 1
		            },
		            states: {
		                normal: {
		                    filter: {
		                        type: 'none',
		                        value: 0
		                    }
		                },
		                hover: {
		                    filter: {
		                        type: 'none',
		                        value: 0
		                    }
		                },
		                active: {
		                    allowMultipleDataPointsSelection: false,
		                    filter: {
		                        type: 'none',
		                        value: 0
		                    }
		                }
		            },
		            tooltip: {
		                style: {
		                    fontSize: '12px',
		                    fontFamily: KTApp.getSettings()['font-family'],
		                },
		                y: {
		                    formatter: function(val) {
		                        return val
		                    }
		                }
		            },
		            colors: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['gray']['gray-300']],
		            grid: {
		                borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
		                strokeDashArray: 4,
		                yaxis: {
		                    lines: {
		                        show: true
		                    }
		                }
		            }
		        };

		        var chart = new ApexCharts(element, options);
		        chart.render();
		    }

		    // Public methods
		    return {
		        init: function() {
		            // Charts Widgets
		            _initChartsWidget1();
		        }
		    }
		}();

		// Webpack support
		if (typeof module !== 'undefined') {
		    module.exports = KTWidgets;
		}

		jQuery(document).ready(function() {
		    KTWidgets.init();
		});
	</script>
	<script>
		window.addEventListener('update_scripts', event => {
		    "use strict";

			// Class definition
			var KTWidgets = function() {
			    // Private properties

			    // Charts widgets
			    var _initChartsWidget1 = function() {
			        var element = document.getElementById("kt_charts_widget_1_chart");

			        if (!element) {
			            return;
			        }

			        var options = {
			            series: [{
			                name: 'Amount Correct',
			                data: event.detail.correct
			            }],
			            chart: {
			                type: 'bar',
			                height: 450,
			                toolbar: {
			                    show: true
			                }
			            },
			            plotOptions: {
			                bar: {
			                    horizontal: false,
			                    columnWidth: ['30%'],
			                    endingShape: 'rounded'
			                },
			            },
			            legend: {
			                show: false
			            },
			            dataLabels: {
			                enabled: false
			            },
			            stroke: {
			                show: true,
			                width: 2,
			                colors: ['transparent']
			            },
			            xaxis: {
			                categories: {!! json_encode($questions) !!},
			                axisBorder: {
			                    show: false,
			                },
			                axisTicks: {
			                    show: false
			                },
			                labels: {
			                    style: {
			                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
			                        fontSize: '12px',
			                        fontFamily: KTApp.getSettings()['font-family']
			                    }
			                }
			            },
			            yaxis: {
			                labels: {
			                    style: {
			                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
			                        fontSize: '12px',
			                        fontFamily: KTApp.getSettings()['font-family']
			                    }
			                }
			            },
			            fill: {
			                opacity: 1
			            },
			            states: {
			                normal: {
			                    filter: {
			                        type: 'none',
			                        value: 0
			                    }
			                },
			                hover: {
			                    filter: {
			                        type: 'none',
			                        value: 0
			                    }
			                },
			                active: {
			                    allowMultipleDataPointsSelection: false,
			                    filter: {
			                        type: 'none',
			                        value: 0
			                    }
			                }
			            },
			            tooltip: {
			                style: {
			                    fontSize: '12px',
			                    fontFamily: KTApp.getSettings()['font-family'],
			                },
			                y: {
			                    formatter: function(val) {
			                        return val
			                    }
			                }
			            },
			            colors: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['gray']['gray-300']],
			            grid: {
			                borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
			                strokeDashArray: 4,
			                yaxis: {
			                    lines: {
			                        show: true
			                    }
			                }
			            }
			        };

			        var chart = new ApexCharts(element, options);
			        chart.render();
			    }

			    // Public methods
			    return {
			        init: function() {
			            // Charts Widgets
			            _initChartsWidget1();
			        }
			    }
			}();

			// Webpack support
			if (typeof module !== 'undefined') {
			    module.exports = KTWidgets;
			}

			jQuery(document).ready(function() {
			    KTWidgets.init();
			});
		});
	</script>
@endsection

Livewire Controller
$this->dispatchBrowserEvent('update_scripts', ['correct' => $this->correct]);

Are you using the latest version of Livewire:
Yes
Do you have any screenshots or code examples:

#2

Hi,
First lets remove duplicated code, using your main function with parameters and second rebind all values and regenerate the chart

    "use strict";

    // Class definition
            //Here I'm passing the needed data for the chart
    var KTWidgets = function(dataseries,datacategories) {

        // Private propertie

        // Charts widgets

        var _initChartsWidget1 = function() {

            var element = document.getElementById("kt_charts_widget_1_chart");

            if (!element) {

                return;

            }

            var options = {

                series: [{

                    name: 'Amount Correct',

                    data: dataseries  //Parameter added

                }],

                chart: {

                    type: 'bar',

                    height: 450,

                    toolbar: {

                        show: true

                    }

                },

                plotOptions: {

                    bar: {

                        horizontal: false,

                        columnWidth: ['30%'],

                        endingShape: 'rounded'

                    },

                },

                legend: {

                    show: false

                },

                dataLabels: {

                    enabled: false

                },

                stroke: {

                    show: true,

                    width: 2,

                    colors: ['transparent']

                },

                xaxis: {

                    categories: datacategories, //Parameter added

                    axisBorder: {

                        show: false,

                    },

                    axisTicks: {

                        show: false

                    },

                    labels: {

                        style: {

                            colors: KTApp.getSettings()['colors']['gray']['gray-500'],

                            fontSize: '12px',

                            fontFamily: KTApp.getSettings()['font-family']

                        }

                    }

                },

                yaxis: {

                    labels: {

                        style: {

                            colors: KTApp.getSettings()['colors']['gray']['gray-500'],

                            fontSize: '12px',

                            fontFamily: KTApp.getSettings()['font-family']

                        }

                    }

                },

                fill: {

                    opacity: 1

                },

                states: {

                    normal: {

                        filter: {

                            type: 'none',

                            value: 0

                        }

                    },

                    hover: {

                        filter: {

                            type: 'none',

                            value: 0

                        }

                    },

                    active: {

                        allowMultipleDataPointsSelection: false,

                        filter: {

                            type: 'none',

                            value: 0

                        }

                    }

                },

                tooltip: {

                    style: {

                        fontSize: '12px',

                        fontFamily: KTApp.getSettings()['font-family'],

                    },

                    y: {

                        formatter: function(val) {

                            return val

                        }

                    }

                },

                colors: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['gray']['gray-300']],

                grid: {

                    borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],

                    strokeDashArray: 4,

                    yaxis: {

                        lines: {

                            show: true

                        }

                    }

                }

            };

            var chart = new ApexCharts(element, options);

            chart.render();

        }

        // Public methods

        return {

            init: function() {

                // Charts Widgets

                _initChartsWidget1();

            }

        }

    }();

    // Webpack support

    if (typeof module !== 'undefined') {

        module.exports = KTWidgets;

    }

    jQuery(document).ready(function() {

       /// first page Load with init data
        KTWidgets({!! json_encode($correct) !!},{!! json_encode($questions) !!}).init();

         ///Listen for event and instead of sending just data series, send categories, or any adicional data need to recreate  the whole chart

        document.addEventListener('update_scripts', data =>({
           KTWidgets(data.detail.dataseries,data.detail.categories).init();
        });

    });

  </script>
#3

Thank you so much for your response, I think this might work, however, as soon as add
KTWidgets({!! json_encode($correct) !!},{!! json_encode($questions) !!}).init(); even just with empty brackets, the chart does not render at all. Is there a different place or way to do this perhaps?

#4

Sorry my mistake, i thought that on first load everything works and that you where having troubles with new data.

You should check if the data that you are assigning is in the correct format. Make a console.log of what your passing.

1- First use the chart with sample data, if everthings works fine then verify that you are using the same format as the example.

Also you can add a link to see what chart library you are using.

#5

Hi, I will be able to share the chart library soon. But for now, the first chart does render, it doesn’t though as soon as I add the brackets in the init function below

KTWidgets(where you want me to add the data) -> doesn’t work

KTWidgets -> works

#6

Got it , i saw you are using Apexchart

Check the doc, updating your chart with json data.