Good practice to return DateTime from PHP to JS

Question

I've created file api.php

<?php
// Prevent caching.
header('Cache-Control: no-cache, must-revalidate');

// The JSON standard MIME header.
header('Content-type: application/json');   

//mssql_select_db("**", mssql_connect(**));
$conn=mssql_connect(***);    

$query = "SELECT ROUND([AirTemp_C],1) as [T]
                ,[DT]
            FROM [ASUTP].[dbo].[Temperature_ER]
            WHERE [Place] = 'ER06' AND [DT] > '26.05.2015 11:00'";

$qwr_res = mssql_query($query);

while ($row=mssql_fetch_array($qwr_res))
{
    $temps[] = array (
        'x' => $row['DT'],
        'y' => $row['T']
                );
}
echo json_encode($temps);   
?>

It returns JSON like [{"x":"2015-05-26 11:02:04","y":26.3}] with my measurments.

I want to use this data to draw graph using canvasjs-1.6.2. Here is my code: window.onload = function () {

    $.getJSON("api.php",function(data1)
                        {                               
                            var chart = new CanvasJS.Chart("chartContainer",
                            {

                                title:{
                                    text: "Title",
                                    fontSize: 30
                                },
                                animationEnabled: true,
                                zoomEnabled:true,
                                height: 500,
                                axisX:{

                                    gridColor: "Silver",
                                    tickColor: "silver",
                                    labelAngle: -80,
                                    valueFormatString: "DD.MM HH:mm"

                                },                        
                                            toolTip:{
                                            shared:true
                                            },
                                theme: "theme2",
                                axisY: {
                                    gridColor: "Silver",
                                    tickColor: "silver"
                                },
                                legend:{
                                    verticalAlign: "center",
                                    horizontalAlign: "right"
                                },
                                data: [
                                {        
                                    type: "line",
                                    showInLegend: true,
                                    lineThickness: 2,
                                    name: "T",
                                    //markerType: "square",
                                    color: "#F08080",
                                    dataPoints: data1
                                }
                                ],
                            legend:{
                                cursor:"pointer",
                                itemclick:function(e){
                                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                    e.dataSeries.visible = false;
                                }
                                else{
                                    e.dataSeries.visible = true;
                                }
                                chart.render();
                                }
                            }
                            });

                            chart.render();
                        });

But it seems that this chart (or JS at all) cant use my Date value as a correct DateTime so chart can't render.

I've fixed this issue with such loop:

for(var i=0;i<data1.length;i++)
{
   data1[i].x = new Date(data1[i].x);
}

I should notice that I'm using PHP 5.2 and I'm not allowed to upgrade it. So my questions are:

Is my way to get data for chart via api.php correct?
Is there a way to pass correct DateTime values from php to JS without that loop convert?

Due to how different browsers parse string dates differently, I prefer to pass dates as unix timestamps for simplicity. — Rob
– Rob, Commented May 28, 2015 at 4:02
Can you show me the right way? Also I'm heavily restricted to support IE 6.0 beacause it's our corporative rules and most users have IE 7/8. — Kostya
– Kostya, Commented May 28, 2015 at 4:08

RobG · Accepted Answer · 2015-05-28 04:46:06Z

1

As noted in comments, the most reliable cross-browser way to transfer dates is using a time value. UNIX time values are in seconds since 1970-01-01T00:00:00Z. Javascript time values are from the same epoch, but use milliseconds so you just multiply UNIX time values by 1000 and pass directly to the Date constructor.

So the JSON might be like:

'[{x:"1432788147300", y:26.3}]'

and if the x value is read into a variable called unixTimeValue, the code would be like:

var javascriptDate = new Date(unixTimeValue * 1000);

However, if you can't do that, you can parse strings like '2015-05-26 11:02:04' fairly easily. Assuming that the date is UTC, you can use Date.UTC to convert it to a date object:

function parseISOUTC(s) {
  var b = s.split(/\D/);
  return new Date(Date.UTC(b[0],b[1],b[2],b[3],b[4],b[5]));
}

edited May 28, 2015 at 4:46

answered May 28, 2015 at 4:35

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kostya Over a year ago

Thank you, that helped a lot. And what about my approach with getting data, is it correct to get data this way?

Collectives™ on Stack Overflow

Good practice to return DateTime from PHP to JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related