Search code examples
phpjsonajaxchartscanvasjs

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

Hi I am trying to use CanvasJS to render an area chart using JSON data returned from php. The chart renders but does not have any Values and is just blank apart from the axis's.

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 script which returns the 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();

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
    }]
}]
Solution

  • It looks like you're using an old version of the library. I've used your json data with the latest CDN version and it seems to work OK.

    EDIT You are seeing hours because you are generating Unix timestamps in PHP (which are in seconds). To convert to a javascript timestamp multiply the value by 1000: $dt->getTimestamp() * 1000

    I've updated this demo with the json data multiplied by 1000 http://jsbin.com/nezigexilu/1/edit?html,output

    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>