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

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Bivek Singh 8 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14088

    andy78
    Member

    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
        }]
    }]
    #14095

    Bivek Singh
    Moderator

    @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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.