Chart.js with Django using Ajax

In this example, we will transfer data between Django and JavaScript and dynamically update a chart in the browser.

We will use:

• Django for the backend,

• Ajax for asynchronous communication between the browser and the server,

• and Chart.js for visualizing the returned data.

The example is intentionally simple so that we can focus on the data flow between the frontend and Django.

The code is available in the ajax_charjs (opens in a new tab) app.

AJAX stands for Asynchronous JavaScript and XML.

Despite the name, Ajax does not require XML. Modern applications commonly exchange data in formats such as JSON.

Ajax allows JavaScript running in the browser to communicate with a web server asynchronously. This means that the browser can send a request, receive a response, and update part of the page without reloading the entire document.

In this example, we use jQuery's $.ajax() function to send requests from the page to Django.

The general flow is:

1User Input2    ↓3Ajax Request4    ↓5Django View6    ↓7Server-Side Processing8    ↓9JSON Response10    ↓11JavaScript12    ↓13Chart.js Update

This application takes a value from the user, sends it to Django, processes it on the server, and then updates the chart with the returned result.

JavaScript reads the user's input and sends it to the Django view using an Ajax request.

The Django view then processes the value according to the application logic. To keep the example simple, we will only add 10 to the input value.

Finally, Django returns the processed value to the browser as JSON. JavaScript receives the response and adds the new value to the Chart.js dataset.

The chart is then updated dynamically without refreshing the page.

We have only one application in this project. Let's name it ajax_charjs.

We also have one page, index.html, and one Django view class.

Chart.js uses an HTML <canvas> element to render the chart.

1<canvas id="myChart" width="400" height="400"></canvas>

1const ctx = document.getElementById('myChart').getContext('2d');2 3const myChart = new Chart(ctx, {4    type: 'line',5    data: {6        labels: [1, 2], // dummy initial labels7        datasets: [{8            label: 'Data Chart',9            data: [1, 2], // dummy initial data10        }]11    },12    options: {13        responsive: false // to define specific size14    }15});

Here, we first get the two-dimensional rendering context of the canvas and use it to create a Chart.js chart.

The chart starts with dummy labels and data:

1labels: [1, 2]2data: [1, 2]

These values only provide an initial state for the chart. Later, new values returned by Django will be appended dynamically.

The myChart object is important because we will use it later to modify the dataset and redraw the chart.

Now we can send the value entered by the user to Django.

1$('#submit').click(function (e) {2    e.preventDefault();3 4    $.ajax({5        url: '',6        type: 'GET',7        data: {8            val: $('#value-field').val()9        },10        success: function (response) {11            myChart.data.datasets[0].data.push(response.data);12            myChart.data.labels.push(myChart.data.labels.at(-1) + 1);13            myChart.update();14        }15    });16});

When the user clicks the submit button, the value in value-field is read:

1$('#value-field').val()

It is then sent to Django using a query parameter called val.

For example, if the user enters:

120

the request will contain a parameter similar to:

1?val=20

The request uses GET because this simple example only sends a value to the server and receives a calculated result. It does not create or modify persistent server-side data.

The empty URL:

1url: ''

means that the Ajax request is sent to the current page URL.

For a small demonstration like this, this keeps the example simple.

On the Django side, the view receives the value sent by the Ajax request.

1from curses.ascii import HT2from django.http import HttpRequest3from django.shortcuts import render4from django.http.request import HttpRequest5from django.views.generic import View6from django.http import JsonResponse7class AjaxViewer(View):8    def get(self,request:HttpRequest):9        if request.GET.get('val'):10            value = float(request.GET.get('val')) #get data from ajax11            value += 10 #dummy process12            return JsonResponse({'data':value},status=200) #return json response13        return render(request,'./templates/ajax_chartjs/index.html')14    def post(self,request:HttpRequest):15        return render(request,'./templates/ajax_chartjs/index.html')

When the page is opened normally, the request does not contain val, so Django renders the HTML page.

When the Ajax request contains val, Django retrieves it using:

1request.GET.get('val')

Values received through query parameters arrive as strings, so the value is converted to a floating-point number:

1float(request.GET.get('val'))

For this example, the server-side processing is intentionally simple:

1value += 10

In a real application, this step could represent more meaningful server-side logic such as calculations, database queries, aggregations, or other domain-specific operations.

After processing the value, Django returns it as JSON:

1JsonResponse({'data':value},status=200)

For example, if the user sends:

120

Django returns a response equivalent to:

1{2    "data": 30.03}

This example assumes that the user enters a numeric value. In a production application, the input should also be validated so that invalid values can be handled safely.

When Django successfully returns the response, the Ajax success function is executed.

1success: function (response) {2    myChart.data.datasets[0].data.push(response.data);3    myChart.data.labels.push(myChart.data.labels.at(-1) + 1);4    myChart.update();5}

The returned value is first added to the chart's dataset:

1myChart.data.datasets[0].data.push(response.data);

Then a new label is added:

1myChart.data.labels.push(myChart.data.labels.at(-1) + 1);

Finally, we call:

1myChart.update()

This tells Chart.js to redraw the chart using the updated data.

The complete interaction therefore looks like this:

1User enters a value2        ↓3JavaScript sends the value with Ajax4        ↓5Django receives the value6        ↓7Django processes the value8        ↓9Django returns JSON10        ↓11JavaScript receives the response12        ↓13The new value is added to Chart.js14        ↓15The chart is redrawn

This example demonstrates a simple way to connect a Django backend with a dynamic frontend.

Each part has a different responsibility:

• Django receives and processes the data.

• Ajax enables asynchronous communication between the browser and Django.

• JSON carries the processed value back to the browser.

• Chart.js visualizes the returned data.

Although this example uses jQuery's $.ajax() function, the important concept is the request-response flow itself.

The same pattern can be used whenever data needs to be processed on the server and reflected in the user interface without reloading the entire page.

By combining Django, Ajax, and Chart.js, we can build interfaces where server-side data is reflected dynamically in charts and other frontend components.