intergrate Chart.js with Django ( data not showing )

Tasa Fakhri 0
Viewed 38

im new to django and chart js, and trying to develop some project but I was having some trouble when trying to visualize my data from myAPI into chart JS and it shows nothing, here is my code :

var endpoint = '/chart/data/'
var defaultData = []
var labels = [];
$.ajax({
    method: "GET",
    urls: endpoint,
    success: function(data){
        labels = data.labels
        defaultData = data.default
        setChart()

    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)

    }
})

function setChart(){
    var ctxSI = document.getElementById("SumberChart");
    var SumberChart = new Chart(ctxSI, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: '# of Votes',
            data: defaultData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    },
    
});
}

views.py

user = get_user_model()
class ChartData(APIView):
authentication_classes = []
permission_classes = []



def get(self, request, format=None):

    labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    defaultitem = [12, 19, 3, 5, 2, 3]
    data = {
        "labels" : labels,
        "default" : defaultitem,
    }
        
    return Response(data)

home.html

    <div class="col-sm-6 col-xl-6">
        <div class=" text-center rounded p-4">
            <div class="d-flex align-items-center justify-content-center mb-4" >
                <h6 class="mb-0 text-center" style="color: black;">Sumber</h6>      
            </div>
            <canvas id="SumberChart" style="color:black ;"></canvas>
        </div>
    </div>

Attachment : My Html

Attachment : API

it is my first time posing and i really appreciate any ideas to solve my problem, thanks.

chart.js django
1 Answers

You are returning Response(data). I have no idea what type of Response this is. Better return a JsonResponse.

from django.http import JsonReponse
class ChartData(APIView):
    # your code
    def get(self, request, format=None):
        # your code
        return JsonResponse(data)

Then in your js script, specify the dataType as json, or parse the data explicitly.

// Specify the dataType as json
$.ajax({
    method: "GET",
    urls: endpoint,
    dataType: "json",
    // rest of your code
});

// Explicitly parse data
$.ajax({
    success: function(data){
        jsonData = JSON.parse(data);
        labels = jsonData.labels;
        defaultData = jsonData.default;
        setChart();
    },
    // rest of your code
});
Ezon Zhao0
Related