Диаграмма CanvasJS некорректно отображается при использовании данных json, полученных из переполнения стека

Привет я пытаюсь использовать CanvasJS для рендеринга диаграммы с использованием данных JSON, возвращаемых из php. Диаграмма отображается, но не имеет каких-либо значений и является пустой от осей.

Что-то должно быть не так с выводом JSON, но я не вижу, почему?

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">

PHP-скрипт, который возвращает JSON:

$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();

Он выводит следующий 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
}]
}]