Easy 'for loop' for datetime field not working in Django(google chart)

Question

I'm trying to use google chart in my Django project, the google chart required a format like ['label1', 'label2', 'label3', new Date(Y, m, d), new Date(Y, m, d), null, 100, null], it's like a list, so I'm trying to keep things simple first, I only replaced the date with template tags and leave other fields as default. The template tage works well alone in P element and output result as "2014, 10, 12". I would really appreciate it if someone can have a look, cheers.

views.py

def visualisation(request, project_id):
    
    project = Project.objects.get(id=project_id)
    counts_data = Todo.objects.aggregate(
        to_do_count=Count('id', filter=Q(status='to_do')),
        in_progress_count=Count('id', filter=Q(status='in_progress')),
        done_count=Count('id', filter=Q(status='done'))
        )
    todos = project.todo_set.order_by('-project_code')

    return render(request, 'todo_lists/progress.html', {"counts_data":counts_data,'team':team,'todos':todos})

HTML

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    
    {% for todo in todos %}
        ['Introduction', 'Introduction Project', 'Introduction',
         new Date({{ todo.start_date|date:"Y,m,d"}}), new Date({{ todo.due_date|date:"Y,m,d"}}), null, 50, null]{% if not forloop.last %},{% endif %}{% endfor %}
        ]);

user_16818965 · Answer

You're mixing your for loop into your data types which may be your issue. I think you'd be better off with something like this:

{% for todo in todos %}
data.addRow(
        ['Introduction', 'Introduction Project', 'Introduction',
         new Date({{ todo.start_date|date:"Y,m,d"}}), new Date({{ todo.due_date|date:"Y,m,d"}}), null, 50, null]
        );
{% endfor %}

user_17227020 · Answer

I solved the issue, it turned out that the issue is in the template tag, the first column of the dataset can't be the same, otherwise there would be one one row output, and since my satrt_date and due_date that stored in the database is same, so there wasn't anything display on the chart. I used the below code in my HTML:

HTML

'''

{% for todo in todos %}
        ['{{ todo.name }}', 'Introduction Project', 'Introduction',
         new Date({{todo.start_date|date:"Y, m, d"}}), new Date({{todo.due_date|date:"Y, m, d"}}), null, 50, null]{% if not forloop.last %},{% endif %}
{% endfor %}

'''

Easy 'for loop' for datetime field not working in Django(google chart)

2 Answers