Issue in making a Pie Chart using django with fully dynamic data-CodePudding

I have a Django backend that is sending this dict :

{'New': 1, 'Pending': 0, 'Done': 0}

I have to make a pie chart with this, So I tried:

labels: ["{% for key, value in pie.items %}{{key}}{% endfor %}"]

and the output is "NewPendingDone" instead of New, Pending, Done

My Full code is :

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: ["{% for key, value in pie.items %}{{value}}{% endfor %}"],
      backgroundColor: [
        '#dc3912', '#ff9900', '#3366cc'
      ],
      label: ''
    }], 
    labels: ["{% for key, value in pie.items %}{{key}}{% endfor %}"] <-- here
  },
  options: {
    responsive: true,
    plugins: {
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: ''
        }

    }
}
};

Here's the ss of the current situation. Pie Chart

CodePudding user response：

To generate the list you could do:

labels: [{% for key, value in pie.items %}"{{key}}",{% endfor %}]

Output: ["Key1","Key2","Key3"]

data: [{% for key, value in pie.items %}{{value}},{% endfor %}]

Output: [1,0,0]

You don't have a comma, and the string is encapsulating the entire for loop in your example.

This should work.

(Even though it looks a little weird in the html script tag)