How to implement chart.js with each field in the model? Django

Question

I'm creating an aircraft comparison website where the user can compare two aircraft. In my Aircraft model I have several fields like range, passengers, speed etc - all these fields are numerical allowing for comparison to be done.

Models.py

class Aircraft(AircraftModelBase):
    engines = models.PositiveSmallIntegerField(default=1)
    cost = models.DecimalField(max_digits=8, decimal_places=3)
    maximum_range = models.PositiveSmallIntegerField()
    passengers = models.PositiveSmallIntegerField()
    maximum_altitude = models.PositiveIntegerField()
    cruising_speed = models.PositiveIntegerField()
    fuel_capacity = models.DecimalField(max_digits=6, decimal_places=2)
    wing_span = models.PositiveSmallIntegerField(default=1)

This is my view.py for the comparison:

def aircraft_delta(request):
  ids = [id for id in request.GET.get('ids') if id != ',']
  aircraft_to_compare = Aircraft.objects.filter(id__in=ids)
  property_keys = ['image', 'name', 'maximum_range', 'passengers',
    'cruising_speed', 'fuel_capacity']
  column_descriptions = {
    'image': '',
    'name': 'Aircraft',
    'maximum_range': 'Range (NM)',
    'passengers': 'Passengers',
    'cruising_speed': 'Max Speed (kts)',
    'fuel_capacity': 'Fuel Capacity'
  }
  data = []

  for key in property_keys:
    row = [column_descriptions[key]]

    first_value = getattr(aircraft_to_compare[0], key)
    second_value = getattr(aircraft_to_compare[1], key)

    if key not in ['image', 'name']:
      delta = first_value - second_value
    else:
      delta = ''

    row.append(first_value)
    row.append(delta)
    row.append(second_value)

    data.append(row)

  return render(request, 'aircraft/delta.html', {
    'data': data
  })

The way I've done is that each aircrafts field is appended into a row and that row is displayed in the template.

I would like to add a chart for EACH of the following fields, but I don't know how to do this. An example of what I mean

This is what it looks like currently:

            -----------------------------------
            | B777     | Difference  | A380   |
            -----------------------------------       
     Range:|  6463NM   |    646NM    | 7435NM |
Passengers:|  235      |    54       |   442  |  

But what I ideally want is something like this:

            -----------------------------------
            | B777     | Difference  | A380   |
            -----------------------------------       
     Range:|  6463NM   |    646NM    | 7435NM |
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the range difference       |
           |                                   |
           -------------------------------------

           -------------------------------------
Passengers:|  235      |    54       |   442    |  
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the passenger difference   |
           |                                   |
           -------------------------------------

           -------------------------------------
     Speed:|  0.85 Mach|    3   |   0.82 Mach|  
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the speed difference       |
           |                                   |
           -------------------------------------

Answer 1

where is your javascript code?

  Here is my php code you can have idea from here
    <script>
      var client="<?php echo $count_client; ?>";
      var lead="<?php echo $count_lead; ?>";
      var lead_inactive="<?php echo $count_lead_inactive; ?>";
      var suspended="<?php echo $count_suspended; ?>";
      var prospect="<?php echo $count_prospect; ?>";
      var inactive="<?php echo $count_inactive; ?>"; 

      var pending_invoice_balance="<?php echo $count_balance; ?>";


var clientdata = function() {
       return (parseFloat(client));
};
var leaddata = function() {
       return (parseFloat(lead));
};

var lead_inactivedata = function() {
       return (parseFloat(lead_inactive));
};
var suspendeddata = function() {
       return (parseFloat(suspended));
};
var prospectdata = function() {
       return (parseFloat(prospect));
};
var inactivedata = function() {
       return (parseFloat(inactive));
};

var pendingbalance = function() {
       return (parseFloat(client));
};

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                clientdata(),
                inactivedata(),
                leaddata(),
                lead_inactivedata(),
                prospectdata(),
                suspendeddata(),
            ],
            backgroundColor: [
             "#00FF00",
            "#e50000",
            "#ffa500",
           "#00FF00",
           "#0000FF",
           "#4B0082",
            ],
            label: 'Dataset 1'
        }],
        labels: [
        "Client",
        "Inactive",
        "Lead",
        "Lead/Inactive",
        "Prospect",
        "Suspended",
        ]
    },
    options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
            display: true,
            text: 'Status'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};
   var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config); 
   </script>