Displaying dynamic data in google barchart using django and jquery

report.html

  function load_monthwise_ward(year, title) {
        var temp_title = title + ' ' + year + '';
        console.log(temp_title);
        $.ajax({
            url: '{% url "ward" %}',
            type: "GET",
            data: {
                "_token": "{% csrf_token %}"
            },
            dataType: "json",
            success: function (data) {
                if (data) {
                    var results = data;
                    var count = results.results;
                    drawMonthwiseChartWard(count, temp_title);
                }
            }
        });
    }

    function drawMonthwiseChartWard(chart_data, chart_main_title) {
        var date = $("select#ward").val();
        var jsonData = chart_data;
        console.log(jsonData);
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Ward');
        data.addColumn('number', 'Total');
        $.each(jsonData, function (i, jsonData) {
            var month = date;
            var profit = jsonData;
            data.addRows([[month, profit]]);
            var options = {
                title: chart_main_title,
                hAxis: {
                    title: "Ward"
                },
                vAxis: {
                    title: 'Total'
                }
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_area1'));
            chart.draw(data, options);
        });
    }



    $(document).ready(function () {


        var ward = $('#ward').prop('id')

        if (ward != '') {

            load_monthwise_ward(ward, 'Ward');
        }


    });

report.py

def ward(request):
            results = NewRegistrationModel.objects.all().values('ward_no')
            return JsonResponse({'results': list(results)})