0

I am trying to create a candlestick graph with CanvasJs and I am currently having trouble formatting the X Axis correct to show the dates.

I am pulling this data from a database. When I pull the date from the data base I am pulling it as a UNIX Timestamp. I want the X-Axis to show the date for each data point (I want to just do it monthly but I'll worry about that later once I get this). I have tried using "label" and "x" for the date points on the X-Axis. 

array_push($dataPoints, array("label"=>$row->day, "y"=> array($row->openPrice, $row->high, $row->low, $row->closePrice)));.

And here is what I have for creating the graph. window.onload = function() {

        var chart = new CanvasJS.Chart("chartContainer", {
            zoomEnabled:true,
            title: {
                text: "Apple Historical Prices"
            },
            axisX: {
                labelFormatter: function (e) {
                    return CanvasJS.formatDate( e.value, "DD MMM");
                },
                valueFormatString: "DD MMM"
            },
            axisY: {
                includeZero: false,
                prefix: "$"
            },
            data: [{
                type: "candlestick",
                xValueType: "dateTime",
                yValueFormatString: "$###.##",
                dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
            }]
        });
        chart.render();

        }

What would I have to change here to correctly format the X-Axis to show the date (convert from UNIX Time Stamp)

Currently it only displays "DEC 31" for each data point.

Zack Sloan
  • 101
  • 3
  • 13

1 Answers1

0

Zack,

You are passing label and y-value to dataPoints whereas xValueType is applicable for x-values. As you are not passing x-values in dataPoints, library auto-generates it as 1,2,3,4,5... which gives you undesired results in labelFormatter.

You can convert Unix timestamp to JavaScript timestamp by multiplying it by 1000. Then pass that value as 'x' in dataPoints.

array_push($dataPoints, array("x"=>strtotime($row->day)*1000, "y"=> array($row->openPrice, $row->high, $row->low, $row->closePrice)));.
Vishwas R
  • 3,340
  • 1
  • 16
  • 37
  • Sorry for the late reply but now that i have changed it to strtotime($row->day)*1000 it is still showing on the axis as Dec 31, however the date it shows when I hover over a data point shows "31 Dec 69" for each data point – Zack Sloan Feb 18 '19 at 19:23
  • Can you share sample data that you are passing to chart ($dataPoints)? – Vishwas R Feb 21 '19 at 07:55
  • Sorry for the late reply but here is a print out of the first few entries in $dataPoints `Array ( [0] => Array ( [label] => 1049173200000 [y] => Array ( [0] => 1.010000 [1] => 1.020000 [2] => 1.000000 [3] => 1.010000 ) ) [1] => Array ( [label] => 1049259600000 [y] => Array ( [0] => 1.030000 [1] => 1.050000 [2] => 1.020000 [3] => 1.040000 ) ) [2] => Array ( [label] => 1049346000000 [y] => Array ( [0] => 1.040000 [1] => 1.050000 [2] => 1.030000 [3] => 1.030000 ) ) ` – Zack Sloan Feb 23 '19 at 02:00