return the right month of a datetime when using Date.UTC conversion

Question

I am working with Symfony, doctrine, twig and highchart.js.

I need to create a chart with the js library and doctrine ORM data object.

See my controller here:

public function chartTestAction() {

    $em=$this->getDoctrine()->getManager();
    $datasGraphique = $em->getRepository('mySpaceMyBundle:Graphique2')->findAll();

    return $this->render('MySpaceMyBundle:myFolder:chartTest.html.twig',
                         array('datasGraphique' => $datasGraphique)
                         );
}

So, my entity looks like this in table schema:

 ----------------
|Graphique entity|
|----------------|
|id              |
|consomation1    |
|consomation2    |
|consomation3    |
|dateIndex       |
|----------------|

For explanation, there are 3 linecharts in my graph, in my lineschart I need to set the dateIndex for each consomation like this example.

In fact I have on xAxis datetime, hour per hour for a day, it's a regular interval. But I need to make on yAxis the parameter for xAxis for the datetime, in order to display correctly the linechart on the right dateIndex. That means, xAxis is fixed, hour per hour, but If I have a dateIndex on 2015-05-05 00:03:08, the yAxis need to point on this date which not appear on xAxis fixed hour per hour.

This my twig view with the javascript part containing the series code for highchart.js:

series: [
    //consomation1
        {
            yAxis: 1,
            type: 'spline',
            name: '{{consomation1Name}}',
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date("Y,m,d,H,i,s"")}}), {{data.consomation1}}],
                  {% endfor %}],
            tooltip: {
                valueSuffix: ' kW'
            },

        },
        //consomation2
        {
            yAxis: 2,
            name: '{{consomation2Name}}' ,
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date('Y,m,d,H,i,s"', "Europe/Paris")}}), {{data.consomation2}}],
                  {% endfor %}],
            tooltip: {
              valueSuffix: ' kW'
            },

         },
        //consomation3
        {
            name: '{{consomation3Name}}' ,
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date("Y,m,d,H,i,s"")}}), {{data.consomation3}}],
                  {% endfor %}],
            type: 'spline',
            tooltip: {
                valueSuffix: ' °C'
            },
            dashStyle: 'shortdot',

        }
    ]

The problem occured with the Date.UTC conversion. Indeed, the js script returns me no error, it works well except for the datetime. For example in my database, I have this field 2015-05-05 00:03:08 matching with 2015 for year, May for mounth, 5 for day 00:03:08 for hour:min:sec. But In my highchart, after the date.UTC conversion it returns me this value for this date 2015, Jun, 5, 00:03:08 which is not matched with my real data, just for the month, because in UTC January = 0 and December = 11 instead of datetime where January = 1 and December = 12 .

Someone knows a solution?

I think first that I need to convert the datetime in unix timestamp in my dql query, but I know that doctrine doesn't support the UNIX_TIMESTAMP function conversion.

How can I proceed to have the right month, can I force this in javascrip?

this the code in my javascript for xAxis:

//xAxis setup to manage the chart
    xAxis: [{
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%H:%M',
        },

        tickInterval: 3600 * 1000,
        title: {
            text: 'Heures journalière '
        },
        crosshair: true,
        tickWidth: 1,
        gridLineWidth: 2
    }],

EDIT - trying with Date.parse()

I tried this solution:

{
    yAxis: 2,
    name: '{{consomation1Name}}' ,
    data: [{% for data in datasGraphique %}
            [Date.parse({{data.dateIndex|date("Y-m-d H:i:s")}}), {{data.consoECS}}],
          {% endfor %}],
    tooltip: {
      valueSuffix: ' kW'
    },
},

It returns me this with the error Uncaught SyntaxError: missing ) after argument list :

data: [
  [Date.parse(2015-05-05 00:03:08), 0], // the error occured on the first data render here
  [Date.parse(2015-05-05 01:19:34), -2],
  [Date.parse(2015-05-05 02:44:16), 0],
  [Date.parse(2015-05-05 03:18:19), 0],
  [Date.parse(2015-05-05 04:24:06), 0],
  [Date.parse(2015-05-05 05:12:44), 0],
  [Date.parse(2015-05-05 06:55:08), 0],
  [Date.parse(2015-05-05 07:26:08), 0],
  [Date.parse(2015-05-05 08:32:05), 1],
  [Date.parse(2015-05-05 09:34:50), 2],
  [Date.parse(2015-05-05 10:42:16), 3],
  [Date.parse(2015-05-05 11:16:03), 3],
  [Date.parse(2015-05-05 12:27:07), 1],
  [Date.parse(2015-05-05 13:22:08), 1],
  [Date.parse(2015-05-05 14:18:51), 3],
  [Date.parse(2015-05-05 15:06:27), -1],
  [Date.parse(2015-05-05 16:40:00), 2],
  [Date.parse(2015-05-05 17:30:24), 1],
  [Date.parse(2015-05-05 18:36:24), 0],
  [Date.parse(2015-05-05 19:43:57), 0],
  [Date.parse(2015-05-05 20:32:41), 0],
  [Date.parse(2015-05-05 21:28:29), 0],
  [Date.parse(2015-05-05 22:37:14), 0],
  [Date.parse(2015-05-05 23:53:14), 0],
],

Paweł Fus · Accepted Answer

Tow things to make it work:

set useUTC to false
change format for dates and use Date.parse(): Date.parse('{{data.dateIndex|date("Y-m-d H:i:s")}}')

And working demo: http://jsfiddle.net/4099kjzy/

return the right month of a datetime when using Date.UTC conversion

Answers (2)

Related Questions