Chartjs-Chart.js with Django – Using REST

0👍

Remember to include <canvas id="myChart"></canvas> within your html file.

That might be all you need. If not, this is a working function I have – I’ve not changed my variable names to match your’s but I think it easy to understand.

        success : function(json) {

            // Add graph
            var chartLabels = json.categories.map(function(e) {
                return e.name;
            })
            var chartValues = json.values.map(function(e) {
                return e;
            })

            var ctx = document.getElementById("myChart");
            var data = {
                labels: chartLabels,
                datasets: [{
                    "label" : json.startRegulation[0].name,
                    "data" : chartValues,
                    "fill" : true,
                    "backgroundColor":"rgba(255, 99, 132, 0.2)",
                    "borderColor":"rgb(255, 99, 132)",
                    "pointBackgroundColor":"rgb(255, 99, 132)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(255, 99, 132)"
                }]
            }
            var options = {
                "elements":
                    {"line":{"tension":0,"borderWidth":3}
                    },
                scale  : {
                    ticks : {
                        min : 0,

                    }
                }
            }

            var myChart = new Chart(ctx, {
                type: 'radar',
                data: data,
                options : options,
            });

0👍

Try to change :

defaultData = data.comp_history_data.forEach(functoin(entry){

to :

defaultData = data.comp_history_data.forEach(function(entry)){

Also, read the usage of template filters (Django) maybe you will find them helpful.

For instance, from your views.py file send data :

def MyView(request):
    comp_history_data: ['1', '2', '3']
    return render(request, 'chart.html', {'comp_history_data':comp_history_data})

and then in your HTML file print the vars :

{% for var in comp_history_data %}
{{ var }}
{% endfor %}

Hope it helps

0👍

It looks like you have an error in your success function, as below

defaultData = data.comp_history_data.forEach(functoin(entry){

to:

defaultData = data.comp_history_data.forEach(function(entry){

Leave a comment