javascript - Django creating radar chart with Json

Question

I created a system with Django. I need some charts for my project and I am using chart.js library.

I get data from an API address, I can get the data correctly with Json and display it in a table, but I can not display it in the radar chart.

I think I cannot write Javascript code correctly because Radar chart does not show anything.

views.py

def Radar(request):
    response = requests.get('https://api.f-rayscoring.com/company/ADESE/radar')
    data = response.json()
    return render(request, 'radar.html', {'data': data})

radar.html

<div class="content">
        <div class="page-inner">
            <h4 class="page-title">Radar Chart</h4>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Radar Chart</div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="radarChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

{% block javascripts %}

    <script src="/static/assets/js/setting-demo2.js"></script>
    <script>
        radarChart = document.getElementById('radarChart').getContext('2d')




        {% for dt in data %}

        var myRadarChart= new Chart(radarChart, {
            type: 'radar',
            data: {
                labels: [{{ dt.title }}],
                datasets: [{
                    data: [{{ dt.value }}],
                    borderColor: '#1d7af3',
                    backgroundColor : 'rgba(29, 122, 243, 0.25)',
                    pointBackgroundColor: "#1d7af3",
                    pointHoverRadius: 4,
                    pointRadius: 3,
                    label: 'Team 1'
                }, {
                    data: [],
                    borderColor: '#716aca',
                    backgroundColor: 'rgba(113, 106, 202, 0.25)',
                    pointBackgroundColor: "#716aca",
                    pointHoverRadius: 4,
                    pointRadius: 3,
                    label: 'Team 2'
                },
                ]
            },
            options : {
                responsive: true,
                maintainAspectRatio: false,
                legend : {
                    position: 'bottom'
                }
            }
        });
                 {% endfor %}

my api

[{"title":"Verimlilik","value":0.5},{"title":"Likidite","value":0.7},{"title":"Kald?ra?","value":2.7},{"title":"Karl?l?k","value":1.55},{"title":"Büyüme","value":1.5}]

All data in this api should display in 1 radar chart.

question from:https://stackoverflow.com/questions/65840600/django-creating-radar-chart-with-json

Answer 1

Waitting for answers