canvasjs showing blank, data not shown

Question

I'm using Canvasjs to create a candlestick chart. The values are coming from PHP and I use JSON-encode to convert to the javascript array. I recreate the javascript array in the same format as the example, which is this

 dataPoints=[{x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]}]

But the canvas is blank? Here is my code:

<?php


$chart_array[] = array("x"=>"2012-01-01","y"=>array("5198", "5629", "5159", "5385"));
$chart_array[] = array("x"=>"2012-01-02","y"=>array("5366", "5499", "5135", "5295"));

    $chart_array = json_encode($chart_array);

?>
    <script type="text/javascript">
        window.onload = function () {


            var resultArray = <?php echo $chart_array; ?>;

            var new_array = [];
            jQuery.each(resultArray, function(index, item) {

                new_array.push({ x: new Date(item.x), y: item.y });

            });

console.log(new_array);
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Basic Candle Stick Chart"
                },
                zoomEnabled: true,
                axisY: {
                    includeZero: false,
                    title: "Prices",
                    prefix: "$ "
                },
                axisX: {
                    interval: 2,
                    intervalType: "month",
                    valueFormatString: "MMM-YY",
                },
                data: [
                {
                    type: "candlestick",
                    dataPoints: new_array
                }
                ]
            });
            chart.render();
        }
    </script>

console.log show the array exists. Why is a blank canvas showing? How do I solve?

Answer 1

Y-value in your code seems to be string, which should be numeric. Even if you are storing it as string, parsing it to number before passing it to chart-options will work fine.

Here is the working code:

<?php

$chart_array[] = array("x"=>"2012-01-01","y"=>array(5198, 5629, 5159, 5385));
$chart_array[] = array("x"=>"2012-01-02","y"=>array(5366, 5499, 5135, 5295));

$chart_array = json_encode($chart_array);
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">
    window.onload = function () {
        var resultArray = <?php echo $chart_array; ?>;

        var new_array = [];
        jQuery.each(resultArray, function(index, item) {
            new_array.push({ x: new Date(item.x), y: item.y });
        });

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Basic Candle Stick Chart"
            },
            zoomEnabled: true,
            axisY: {
                includeZero: false,
                title: "Prices",
                prefix: "$ "
            },
            axisX: {
                interval: 2,
                intervalType: "month",
                valueFormatString: "MMM-YY",
            },
            data: [
            {
                type: "candlestick",
                dataPoints: new_array
            }
            ]
        });
        chart.render();
    }
</script>

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