CanvasJS chart not rendering properly when using json data returned from php

[andy78]

Hi I am trying to use CanvasJS to render an area chart using JSON data returned from php. The chart renders but its rendering in hours of one day rather than in days
Something must be wrong with the JSON output but i cant see why?

The javascript:

 $(document).ready(function(){
        $("#click").click(function(){
            $.ajax({
                type: "POST",
                url: "data.php",
                dataType: 'json',
                success: function(data) {
                    loadChart(data);

                }
            });
        });
    });

    function loadChart(response) {
        console.log(response);
        var chart = new CanvasJS.Chart("chartContainer",
            {
                title: {
                    text: "Email Analysis"
                },
                animationEnabled: true,
                axisX:{
                    interval: 3
                    // labelAngle : 30,
                    // valueFormatString: "HHmm'hrs'"

                },
                axisY: {
                    title: "kWH"
                },
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },

                data: response

            });

        chart.render();
    }

  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  <input id="click" type="button">

The php :

$begin = new DateTime( '2017-01-01' );
$end = new DateTime( '2017-01-31' );

$interval = DateInterval::createFromDateString('1 day');
$period = new DatePeriod($begin, $interval, $end);

$data[0] = array(
'name'=> "Electricy",
'showInLegend' => true,
'legendMarkerType' => "square",
'type' => "area",
'color' => "rgba(40,175,101,0.6)",
'markerSize' => 0,
'xValueType' => "dateTime",
);

foreach ( $period as $dt ){
   $data[0]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' =>    10);
}

$data[1] = array(
   'name'=> "Gas",
   'showInLegend' => true,
   'legendMarkerType' => "square",
   'type' => "area",
   'color' => "rgba(40,175,101,0.6)",
   'markerSize' => 0,
   'xValueType' => "dateTime",
);

foreach ( $period as $dt ){
   $data[1]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' =>    20);
}

$data = json_encode($data);
echo $data;
die();

It outputs the following JSON:

[{
    "name": "Electricy",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800,
        "y": 10
    }, {
        "x": 1483315200,
        "y": 10
    }, {
        "x": 1483401600,
        "y": 10
    }, {
        "x": 1483488000,
        "y": 10
    }, {
        "x": 1483574400,
        "y": 10
    }, {
        "x": 1483660800,
        "y": 10
    }, {
        "x": 1483747200,
        "y": 10
    }, {
        "x": 1483833600,
        "y": 10
    }, {
        "x": 1483920000,
        "y": 10
    }, {
        "x": 1484006400,
        "y": 10
    }, {
        "x": 1484092800,
        "y": 10
    }, {
        "x": 1484179200,
        "y": 10
    }, {
        "x": 1484265600,
        "y": 10
    }, {
        "x": 1484352000,
        "y": 10
    }, {
        "x": 1484438400,
        "y": 10
    }, {
        "x": 1484524800,
        "y": 10
    }, {
        "x": 1484611200,
        "y": 10
    }, {
        "x": 1484697600,
        "y": 10
    }, {
        "x": 1484784000,
        "y": 10
    }, {
        "x": 1484870400,
        "y": 10
    }, {
        "x": 1484956800,
        "y": 10
    }, {
        "x": 1485043200,
        "y": 10
    }, {
        "x": 1485129600,
        "y": 10
    }, {
        "x": 1485216000,
        "y": 10
    }, {
        "x": 1485302400,
        "y": 10
    }, {
        "x": 1485388800,
        "y": 10
    }, {
        "x": 1485475200,
        "y": 10
    }, {
        "x": 1485561600,
        "y": 10
    }, {
        "x": 1485648000,
        "y": 10
    }, {
        "x": 1485734400,
        "y": 10
    }]
}, {
    "name": "Gas",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800,
        "y": 20
    }, {
        "x": 1483315200,
        "y": 20
    }, {
        "x": 1483401600,
        "y": 20
    }, {
        "x": 1483488000,
        "y": 20
    }, {
        "x": 1483574400,
        "y": 20
    }, {
        "x": 1483660800,
        "y": 20
    }, {
        "x": 1483747200,
        "y": 20
    }, {
        "x": 1483833600,
        "y": 20
    }, {
        "x": 1483920000,
        "y": 20
    }, {
        "x": 1484006400,
        "y": 20
    }, {
        "x": 1484092800,
        "y": 20
    }, {
        "x": 1484179200,
        "y": 20
    }, {
        "x": 1484265600,
        "y": 20
    }, {
        "x": 1484352000,
        "y": 20
    }, {
        "x": 1484438400,
        "y": 20
    }, {
        "x": 1484524800,
        "y": 20
    }, {
        "x": 1484611200,
        "y": 20
    }, {
        "x": 1484697600,
        "y": 20
    }, {
        "x": 1484784000,
        "y": 20
    }, {
        "x": 1484870400,
        "y": 20
    }, {
        "x": 1484956800,
        "y": 20
    }, {
        "x": 1485043200,
        "y": 20
    }, {
        "x": 1485129600,
        "y": 20
    }, {
        "x": 1485216000,
        "y": 20
    }, {
        "x": 1485302400,
        "y": 20
    }, {
        "x": 1485388800,
        "y": 20
    }, {
        "x": 1485475200,
        "y": 20
    }, {
        "x": 1485561600,
        "y": 20
    }, {
        "x": 1485648000,
        "y": 20
    }, {
        "x": 1485734400,
        "y": 20
    }]
}]

[Bivek Singh]

@andy78

JavaScript uses milliseconds as a timestamp, whereas PHP uses Unix timestamp which is in seconds. So, you need to convert PHP timestamp to JS timestamp. You can multiply PHP timestamp by 1000 to get JS timestamp. For further information, you can refer this post on StackOverflow.