Gauthier Gauthier - 24 days ago 6
Twig Question

Implement googlechart x-axis with dates from twig datetimes

I have an array of the last 30 days with 2 keys for each day :

-date (datetime)

-count (integer)

enter image description here

I try to instanciate a google chart with the date in Xaxis and

count
in Yaxis but as soon as I try to loop on my array using twig, it seems that my datetime value is changed.

Here is the way I loop to add Rows on my graph in my
drawGraph()
function :

function drawChart() {

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'date', label: 'date'});
dataTable.addColumn({ type: 'number', id: 'Nombre d OF', label: 'Nb of'});


{% for value in chartData.data %}
console.log({{ value.date.format('Y-m-d') }});
dataTable.addRow([new Date("{{ value.date.format('Y-m-d')| date("Y-m-d") }}".replace(/-/g,"/")), {{ value.count }}]);
{% endfor %}

var options = {
title: 'Nombre d\'ordre de fabrication crées sur les 30 derniers jours ('+{{ chartData.info }}+')',
hAxis: {title: 'Jours', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}


I printed the date for each loop iteration and I get this result :

enter image description here

My question is : Why is the date changed in my loop ?

Answer Source

Well 2017 - 9 - 24 actualy is 1984, you need to wrap your statement with quotes otherwise it gets treated as a subvision

console.log('{{ value.date.format('Y-m-d') }}');