What seems to be the problem:
I have a chart showing data and using Livewire to be able to change labels on these items. Upon a change in label, I want my charts to serenader and show with the new labels but the chart keep disappearing after I make the changes. Please if anyone could assist, it would help me so much!
I am using jQuery and what seems to be Apex Charts
$correct refers to an array -> [0, 10, 20, 30] indication the amount of times this question was answered correctly
$questions refers to an array -> [‘question 1’, ‘question 2’ etc…] which re the question labels. These change, and so does the order of the data as well. Upon these changes I send a BrowserEvent to update the view and data. The data updates correctly with the question label and correct variable but I can’t seem to update the chat with these new variables.
Steps to Reproduce:
<script type="text/javascript">
// Class definition
var KTWidgets = function() {
// Private properties
// Charts widgets
var _initChartsWidget1 = function($correct) {
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>
My Blade File
<div class="card-body">
<!--begin::Chart-->
<div id="kt_charts_widget_1_chart"></div>
<!--end::Chart-->
</div>
My Livewire Controller
public function update($lesson)
{
$this->questions = LessonComponent::where('lesson_id', $lesson)->where('content_type', 'Question')->orderBy('question_number')->pluck('question_label')->toArray();
$this->accordian_questions = LessonComponent::where('lesson_id', $lesson)->where('content_type', 'Question')->orderBy('question_number')->get();
$this->correct = LessonComponent::where('lesson_id', $lesson)->where('content_type', 'Question')->orderBy('question_number')->pluck('amount_correct')->toArray();
$this->dispatchBrowserEvent('update_scripts', ['dataseries' => $this->correct, 'categories' => $this->accordian_questions]);
}
Are you using the latest version of Livewire:
Yes
Do you have any screenshots or code examples: