Chartjs-In Chart.js and django, add data by clicking the button

by

0👍

I’ve done something similar previously like this (clearly I’m doing in on a change in the select field but you can call it however you want):

$('#id_target_select').on('change', function() {
    var info = [];
    info[0] = $('#id_language').val();
    info[1] = $('#id_regulation_select').val();
    info[2] = $('#id_target_regulation_select').val();
    info[3] = $('#id_paragraph_select').val();
    info[4] = $('#id_number_topics').val();
    $.ajax({
        url : "/ajax/radar_graph/",  // endpoint
        type : "GET", // http method
        data : { info : info }, // send data
        // handle success response
        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,
            });

Leave a comment