title: How to display Json object in chart js consisting of lists created using Django rest framework in angular application
body: <p>I am sending a json object created using Django rest framework to display in chart using Chart js in angular application.</p>
  <p><strong>Json:</strong></p>
  <pre><code>[{&quot;data&quot;: &quot;[5908, 3793, 3002, 2049, 1907]&quot;, &quot;labels&quot;: &quot;['0005', '0022', '0003', '0135', '0061']&quot;}]
  </code></pre>
  <p>In angular app, I am calling the api to get the above json and trying to display in the chart as below:</p>
  <pre><code>import { PieData } from '@modules/charts/models/charts.model';
  import { Chart } from 'chart.js';
  
  @Component({
     selector: 'sb-charts-pie',
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './charts-pie.component.html',
     styleUrls: ['charts-pie.component.scss'],
  })
  export class ChartsPieComponent implements OnInit {
   @ViewChild('myPieChart') myPieChart!: ElementRef&lt;HTMLCanvasElement&gt;;
  chart!: Chart;
  
  url = 'http://localhost:7000/products';
  httpHeaders = new HttpHeaders({ 'Content-type': 'application/json' });
  Data: number[] = [];
  
  Labels: string[] = [];
  
  constructor(private httpClient: HttpClient) {}
  ngOnInit() {
      this.httpClient
          .get&lt;PieData[]&gt;(this.url, {
              headers: this.httpHeaders,
          })
          .subscribe(result =&gt; {
              result.forEach(x =&gt; {
                  this.Data.push(x.data);
                  this.Labels.push(x.labels);
                  console.log(this.Data);
              });
              this.chart = new Chart(this.myPieChart.nativeElement, {
                  type: 'pie',
                  data: {
                      labels: this.Labels,
                      datasets: [
                          {
                              data: this.Data,
                              backgroundColor: 'blue',
                          },
                      ],
                  },
              });
          });
      }
  }
  </code></pre>
  <p>Model class for PieData is as below:</p>
  <pre><code>export class PieData {
    data!: number;
    labels!: string;
  }
  </code></pre>
  <p>Console Log for this.Data and this.Labels is showing as below:</p>
  <pre><code>  [&quot;[5908, 3793, 3002, 2049, 1907]&quot;]
  
    [&quot;['0005', '0022', '0003', '0135', '0061']&quot;]
  </code></pre>
  <p>Django rest framework (server side) code as below:</p>
  <p>model.py:</p>
  <pre><code>class Products(models.Model):
        data = models.TextField()
        labels= models.TextField()
  </code></pre>
  <p>serializers.py:</p>
  <pre><code>class ProductSerializer(serializers.ModelSerializer):
  class Meta:
      model = Products
      fields = ('data',
                'labels'
                )
  </code></pre>
  <p>view.py:</p>
  <pre><code>def products(request):
      labels = []
      data = []
  
      products = GetSQLData('db', 'query')
      for product in products:
          labels.append(product.ProdID)
          data.append(product.TotalCount)
  
      if request.method == 'GET':
          objects_list = []
  
          d = collections.OrderedDict()
          d['data'] = data
          d['labels'] = labels
          objects_list.append(d)
  
      products_serializer = ProductSerializer(objects_list, many=True)
      return JsonResponse(products_serializer.data, safe=False)
  </code></pre>
  <p>How to display the above data in chartjs? Please help!!</p>