jQuery Flot Chart is not rendering dynamically

Question

I currently use a Flot chart which is supposed to render dynamically.

The code basically reiterates over all divs with the name "characterChart", and creates multiple Flot charts depending on the index.

This is the code basically:

<div id="salesSelectorItems" class="chart-data-selector-items mt-3">
    @foreach($characters as $key=>$character)
        <div class="chart chart-sm" data-sales-rel="{{ $character->id }}" id="flotDashSales_{{ $key }}" name="characterChart" class="chart-active" style="height: 203px;"></div>
    @endforeach

    <script>
        var flotDashSalesData = [];
        $(document).ready(function() {                                       
            $('div[name=characterChart]').each(function (index, value) {                                     
                flotDashSalesData[index] = [{
                    data: [
                        ["Jan", 140],
                        ["Feb", 240],
                        ["Mar", 190],
                        ["Apr", 140],
                        ["May", 180],
                        ["Jun", 320],
                        ["Jul", 270],
                        ["Aug", 180]
                    ],
                    color: "#0088cc"
                }];
            });
        });     
    </script>
</div>

Now, there is the code (in a separate included file) which includes all the data for the chart:

var flotDashSales = [];
$('div[name=characterChart]').each(function (index, value) { 
    console.log(index);
    flotDashSales[index] = $.plot('#flotDashSales_' + index, flotDashSalesData[index], {
        series: {
            lines: {
                show: true,
                lineWidth: 2
            },
            points: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            hoverable: true,
            clickable: true,
            borderColor: 'rgba(0,0,0,0.1)',
            borderWidth: 1,
            labelMargin: 15,
            backgroundColor: 'transparent'
        },
        yaxis: {
            min: 0,
            color: 'rgba(0,0,0,0.1)'
        },
        xaxis: {
            mode: 'categories',
            color: 'rgba(0,0,0,0)'
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: '%x: %y',
            shifts: {
                x: -30,
                y: 25
            },
            defaultTheme: false
        }
    });
});

As you can see, what I did to try and achieve this is created an array, reiterated over all the divs with the name characterChart and created multiple charts by the index.

However, it is still not working.

What am I doing wrong?

Answer 1

I have managed to resolve it by removing:

$(document).ready(function() {  

I assume that it tried to initialize the components twice, resulting in the Flot not showing.