Highcharts. Django won't load. Highcharts with Django-CodePudding

There is a wonderful library of js - Highcharts. I'm trying to link it to Django, and everything actually works, but not when I'm trying to insert a variable with content into data. Here's the code.

This function returns what I substitute in data in Highcharts.

def get_series(context):
    data_ser = []

for i in context:
    if i in ['One', "Two", "Three", "Four", "Five"]:
        data_ser.append({
            'name': i,
            'y': context[i],
            'z': 22.2
        })

data_ser = json.dumps(data_ser)

return data_ser

And this is the jquery code itself:

<script>
    $(document).ready(function () {
    
        var data_ser = '{{ data_ser|safe }}'
        console.log(data_ser)
    
        Highcharts.chart('container', {
            chart: {
                type: 'variablepie'
            },
            title: {
                text: 'Stats'
            },
            series: [{
                minPointSize: 10,
                innerSize: '20%',
                zMin: 0,
                name: 'countries',
                data: data_ser
            }]
        });
    })
</script>

In series in data, I try to substitute data_ser, but the graph is not output. Although, if you write it manually, then everything will work.

Similar code works:

<script>
    $(document).ready(function () {
    
        var data_ser = '{{ data_ser|safe }}'
        console.log(data_ser)
    
        Highcharts.chart('container', {
            chart: {
                type: 'variablepie'
            },
            title: {
                text: 'Stats'
            },
            series: [{
                minPointSize: 10,
                innerSize: '20%',
                zMin: 0,
                name: 'countries',
                data: [
                    {
                        "name": "One",
                        "y": 50.0,
                        "z": 22.2
                    }]
            }]
        });
    })
</script>

I really hope for help. Or give at least alternative js libraries with graphs where this will work.

CodePudding user response：

It looks like the issue is that data_ser is a string that represents a JavaScript object, but it is being treated as a string in the data property of the series object. Try it with:

<script>
   ...
   var data_ser = JSON.parse('{{ data_ser|safe }}')
   ...
</script>