Is it possible to fetch data and plot it to graph from REST API using only Django?

Question

Because I have a chart on my django app. I also have django-filter on my rest_framework. where I can filter dates. start_date=$start_date&end_date=$end_date

from a typical get data.

def view_info(request):
    objs = test.objects.all()
    return render(request, 'test.html', {'objs': test})

I want to fetch the data directly to the REST API URL localhost:8000/api/test/?start_date=$start&end_date=$end

Is it possible? this is how I fetch data from my chart.

<script>
    $(document).ready(function(){
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [{% for i in objs %}'{{i.timestamp}}',{% endfor %}],
            datasets: [{
                label: 'Rainfall Graph',
                data: [{% for i in objs %}'{{i.amount}}',{% endfor %}],
                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: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    });
</script>

Answer 1

Here is, in my opinion, the easiest way to do this:

views.py

# inherits APIView, ModelViewSet, etc.
class View(...):

    # override get_queryset method like so:
    def get_queryset(self):
        
        queryset = self.queryset
        custom_filter = self.request.query_params.get('filter')
        
        if custom_filter: 
            custom_filter = json.loads(custom_filter)
            queryset = queryset.filter(**custom_filter)
        
        return queryset

Then we can filter from javascript like so:

script.js

// create the django-like filter:
var filter = JSON.stringify({
  'start_date__gte' : '2020-01-01',
  'end_date__lte' : '2020-12-31',
})

var url = '.../api/test?filter=' + filter;

Your url will look like: .../api/test?filter={"start_date__gte":"2020-01-01","end_date__lte":"2020-12-31"}