Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

229
Views
Unable to see pie chart in template using django and chart js

I want to count the number of companies in companytype model and show that in pie chart. The count should by the name field in company table.

eg: If Company Type is medical and there are 4 companies in that category then i want to show its count on pie chart.

models.py

class CompanyType(models.Model):
    company_type = models.CharField(max_length=100)
    is_active = models.BooleanField(default=True)
    created_at = models.DateField(auto_now_add=True)
    updated_at = models.DateField(auto_now=True)
class Company(models.Model):
    name = models.CharField(max_length=100)
    address = models.TextField()
    company_type = models.ForeignKey(CompanyType,on_delete=models.CASCADE)
    is_active = models.BooleanField(default=True)

views.py

def index(request):
    labels = []
    data = []
                               
    queryset = Company.objects.values('company_type__company_type').annotate(company_type_sum=Count('name')).order_by('-company_type_sum')
    for entry in queryset:
        labels.append(entry['company_type__company_type'])
        data.append(entry['company_type_sum'])


    context = {
        'labels':labels,
        'data':data,
    }
    return render(request,'index.html',context)


I have taken Chartjs code from index.html file if there is something wrong.

index.html

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [data.labels],
        datasets: [{
            label: 'Companies in Particular Section',
            data: [data.data],
            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: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You are putting your data in arrays in your views.py but then also make it an array in your new Chart, this 2D array is not being liked by chart.js, changing your new Chart to this should fix the issue:

new Chart(ctx, {
  type: 'pie',
  data: {
    labels: data.labels, // Remove double array
    datasets: [{
      label: 'Companies in Particular Section',
      data: data.data, // Remove double array
      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: {
  }
});

On a side note, the pie chart does not have a y scale so you will get ugly lines behind your pie if you keep it in your options, removing it will make your chart look a lot better

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!