dynamic script for generating charts ,charts not showing.

[mo3enpro]

i am using this code to generate charts dynamically

<script>
            {{#each table1}}
            {{#each this.Classes}}
            Console.log('Script is executing.');

            const subjects_{{../Level}}_{{this.Class}} = {{{toJS Subjects}}};
            
            Highcharts.chart('container-chart-{{../Level}}-{{this.Class}}', {
                credits: { enabled: false },
                chart: { backgroundColor: 'transparent' },
                title: { text: '' },
                xAxis: { categories: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Subject), labels: { overflow: 'justify', style: { fontSize: '10px' }, rotation: -65 } },
                yAxis: { title: { text: 'الدرجات' }, opposite: true },
                tooltip: { valueSuffix: ' million liters' },
                plotOptions: { series: { borderRadius: '25%', dataLabels: { enabled: true } } },
                series: [
                    { type: 'column', name: 'اقل درجة', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MinTotal, 10)) },
                    { type: 'column', name: 'المتوسط', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MeanTotal, 10)) },
                    { type: 'column', name: 'اعلى درجة', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MaxTotal, 10)) }
                ]
            });

            // Chart for Grade Distribution
            Highcharts.chart('highcharts-chart-{{../Level}}-{{this.Class}}', {
                credits: { enabled: false },
                chart: { backgroundColor: 'transparent', type: 'column' },
                title: { text: '' },
                xAxis: { categories: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Subject), labels: { style: { fontSize: '10px' }, rotation: -65 } },
                yAxis: { allowDecimals: false, min: 0, title: { text: 'عدد الطلاب' }, opposite: true },
                tooltip: { format: '<b>{key}</b><br/>{series.name}: {y}<br/>' + 'Total: {point.stackTotal}' },
                plotOptions: { column: { stacking: 'normal' } },
                series: [
                    { name: 'ممتاز', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Excellent_count), stack: 'order' },
                    { name: 'جيد جدا', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Very_Good_count), stack: 'order' },
                    { name: 'جيد', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Good_count), stack: 'order' },
                    { name: 'مقبول', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Pass_count), stack: 'order' },
                    { name: 'ضعيف', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Weak_count), stack: 'order' }
                ]
            });
            {{/each}}
            {{/each}}
        </script>

but I see nothing the code works for specific data but not dynamic

this is the playground link everything is there : https://playground.jsreport.net/w/mo3enpro/GhHZP6fH

the same script code is done in the template and is working there and data is shown , does jsreport support dynamic script ??? or maybe its done any other way???

[mo3enpro]

i found the solution and the solution is to set the data inside a dictionary

<script>
            SubjectData=[]
            {{#each table1}}
            {{#each this.Classes}}
         
            SubjectData['subjects_{{../Level}}_{{this.Class}}'] = {{{toJS Subjects}}};
            Highcharts.setOptions({ plotOptions: { series: { animation: false } } });
            
            Highcharts.chart('container-chart-{{../Level}}-{{this.Class}}', {
            credits: { enabled: false },
            chart: { backgroundColor: 'transparent' },
            title: { text: '', align: 'right' },
            xAxis: { categories: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Subject), labels: { overflow: 'justify', style: { fontSize: '10px' }, rotation: -65 }},
            yAxis: {title: { text: 'الدرجات' },opposite: true},
            tooltip: { valueSuffix: ' million liters' },
            plotOptions: { series: { borderRadius: '25%',dataLabels: { enabled: true }}},
            series: [
                    { type: 'column', name: 'اقل درجة', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MinTotal, 10)) },
                    { type: 'column', name: 'المتوسط', data:  SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MeanTotal, 10)) },
                    { type: 'column', name: 'اعلى درجة', data:  SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MaxTotal, 10)) }
                ]
            });
            
            Highcharts.chart('highcharts-chart-{{../Level}}-{{this.Class}}', {
                credits: { enabled: false },
                chart: { backgroundColor: 'transparent', type: 'column' },
                title: { text: '' },
                xAxis: { categories:  SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Subject), labels: { style: { fontSize: '10px' }, rotation: -65 } },
                yAxis: { allowDecimals: false, min: 0, title: { text: 'عدد الطلاب' }, opposite: true },
                tooltip: { format: '<b>{key}</b><br/>{series.name}: {y}<br/>' + 'Total: {point.stackTotal}' },
                plotOptions: { column: { stacking: 'normal' } },
                series: [
                    { name: 'ممتاز', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Excellent_count), stack: 'order' },
                    { name: 'جيد جدا', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Very_Good_count), stack: 'order' },
                    { name: 'جيد', data:  SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Good_count), stack: 'order' },
                    { name: 'مقبول', data:  SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Pass_count), stack: 'order' },
                    { name: 'ضعيف', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Weak_count), stack: 'order' }
                ]
            });
            {{/each}}
            {{/each}}
        </script>