
<div class="row">
    <div class="offset-md-2 col-md-8">
        <canvas id="category_chart_{{random}}"></canvas>
    </div>
</div>
{% if adjustSliderColor %}
   <style>
        {% for col in colors %} 
            .category_chart_{{random}}_{{loop.index0}} {
                background-color: {{col}}  !important;
            }

            .category_chart_{{random}}_{{loop.index0}}.slider-handle {
                background-color: {{col | slice(0,7) }}  !important;
            }
        {% endfor %}
    </style>
{% endif %}
<script>
    jQuery(document).ready(function () {

        {% if adjustSliderColor %}
            var i = 0;
            var colors = [{% for col in colors %} "{{col}}" {% if not loop.last %},{% endif %} {% endfor %}];
            jQuery('.ts-forms-form-{{form_id}} .form-group .slider').each(function(e) {
                jQuery(this).find('.slider-selection').addClass("slider_custom_color");
                jQuery(this).find('.slider-selection').addClass("category_chart_{{random}}_" + i);
                jQuery(this).find('.slider-handle').addClass("slider_custom_color");
                jQuery(this).find('.slider-handle').addClass("category_chart_{{random}}_" + i);
                i++;
            });
        {% endif %}

        function updateData(chart, label, data) {
            chart.data.datasets[0].data = data;
            chart.update();
        }

        jQuery('.ts-forms-form-{{form_id}} input').on('change', function(){
            var newData = [];
            jQuery('.ts-forms-form-{{form_id}} input.ts-forms-element').each(function(e) {
                newData.push(jQuery(this).val());
            });
            updateData(category_chart{{random}}, "", newData);
        });

        var category_chart{{random}} = new Chart(
            document.getElementById('category_chart_{{random}}'),
            {
                type: 'polarArea',
                data: {
                    labels: [{% for cat in categories %} "{{cat}}" {% if not loop.last %},{% endif %} {% endfor %}],
                    datasets: [
                        {
                            label: "Kategorien",
                            data: [{% for d in data %}{{d}}{% if not loop.last %},{% endif %}{% endfor %}],
                            backgroundColor: [{% for col in colors %} "{{col}}" {% if not loop.last %},{% endif %} {% endfor %}],
                            borderWidth: 0
                        },
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        r: {
                            pointLabels: {
                                display: {% if showPointLabel %}true{% else %}false{% endif %},
                                centerPointLabels: {% if centerPointLabel %}true{% else %}false{% endif %},
                                font: {
                                    size: 14
                                },
                            },
                            ticks: {
                                precision: 0,
                                z: 1,
                                showLabelBackdrop: false,
                            },
                            grid:{
                                z: 1,
                            }
                        },
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            display: {% if showLegend %}true{% else %}false{% endif %}
                        },
                        title: {
                            display: false,
                        }
                    }
                }
            }
        );
    });

    {% if sliderCategoryItems is not empty %}
        jQuery(document).ready(function(){
            var sliderCategoryItems = {};
            {% for sliderElementName, sliderElement in sliderCategoryItems %}
                sliderCategoryItems[{{sliderElementName}}] = [{% for catItem in  sliderElement%}'{{catItem}}'{% if not loop.last %},{% endif %}{% endfor %}];
            {% endfor %}
            jQuery('.ts-forms-form-{{form_id}} input').each(function(e){
                var sliderFieldId = jQuery(this).attr('data-fieldid');
                var sliderElementId = jQuery(this).attr('id');
                var sliderItems = sliderCategoryItems[sliderFieldId];
                var sliderLabel = jQuery('label[for="' + sliderElementId + '"]').text();
                if(sliderItems.length>0){
                    sliderLabel = sliderLabel + " (";
                    for(var sliderItemsIndex = 0; sliderItemsIndex < sliderItems.length; sliderItemsIndex++){
                        if(sliderItemsIndex != 0){
                            sliderLabel = sliderLabel + ", ";
                        }
                        sliderLabel = sliderLabel + sliderItems[sliderItemsIndex];
                    }
                    sliderLabel = sliderLabel + ")";
                }
                jQuery('label[for="' + sliderElementId + '"]').text(sliderLabel);
            });
        });
    {% endif %}
    
</script>