python - How to create a line chart with Json in Django?

Question

I created a system with Django. I want to display a line chart. I decided to use chart.js library. I have an API address and I take values from there. I can get values correctly, but I can not figure out how to display this values in a line chart. I try create some for loop but I had so many charts with only one value. It is wrong.

Please, can you help me?

views.py

def Trend(request):
    response = requests.get('https://api.f-...gelir')
    data = response.json()
    return render(request, 'trend.html', {'data': data})

trend.html

<div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Line Chart</div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="lineChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

<script>
        var lineChart = document.getElementById('lineChart').getContext('2d')

        var myLineChart = new Chart(lineChart, {
            type: 'line',
            data: {
                labels: [{{ data.text }}],
                datasets: [{
                    label: "Trend",
                    borderColor: "#1d7af3",
                    pointBorderColor: "#FFF",
                    pointBackgroundColor: "#1d7af3",
                    pointBorderWidth: 2,
                    pointHoverRadius: 4,
                    pointHoverBorderWidth: 1,
                    pointRadius: 4,
                    backgroundColor: 'transparent',
                    fill: true,
                    borderWidth: 2,
                    data: [{{ data.value }}]
                }]
            },
            options : {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                    labels : {
                        padding: 10,
                        fontColor: '#1d7af3',
                    }
                },
                tooltips: {
                    bodySpacing: 4,
                    mode:"nearest",
                    intersect: 0,
                    position:"nearest",
                    xPadding:10,
                    yPadding:10,
                    caretPadding:10
                },
                layout:{
                    padding:{left:15,right:15,top:15,bottom:15}
                }
            }
        });

    </script>

API

[{"text":"Sat?? Gelirleri","value":0.04148631496798572},{"text":"T?CAR? FAAL?YETLERDEN BRüT KAR (ZARAR)","value":0.36421382582116013},{"text":"FAV?K (EBITDA)","value":0.5245223152324183},{"text":"FAAL?YET KARI (ZARARI)","value":0.21672111269860994},{"text":"(Esas Faaliyet D???) Finansal Gelirler","value":-0.7445835008740246},{"text":"(Esas Faaliyet D???) Finansal Giderler (-)","value":-0.7380229520686089},{"text":"SüRDüRüLEN FAAL?YETLER VERG? ?NCES? KARI (ZARARI)","value":-42.79475252901908},{"text":"D?NEM KARI (ZARARI)","value":-4.3907119108524455}]

question from:https://stackoverflow.com/questions/65896900/how-to-create-a-line-chart-with-json-in-django

Answer 1

Waitting for answers