Search code examples
javascriptphparraysdatetimecanvasjs

CanvasJS docs show weird datapoints on the x-axis

So, I've been looking at the docs here: https://canvasjs.com/php-charts/multi-series-area-chart/

It shows the datapoints array like this:

array("x" => 1451586600000, "y" => 96.709),
array("x" => 1454265000000, "y" => 94.918),
array("x" => 1456770600000, "y" => 95.152),
array("x" => 1459449000000, "y" => 97.070),
array("x" => 1462041000000, "y" => 97.305),
array("x" => 1464719400000, "y" => 89.854),
array("x" => 1467311400000, "y" => 88.158),
array("x" => 1469989800000, "y" => 87.989),
array("x" => 1472668200000, "y" => 86.366),
array("x" => 1475260200000, "y" => 81.650),
array("x" => 1477938600000, "y" => 85.789),
array("x" => 1480530600000, "y" => 83.846),
array("x" => 1483209000000, "y" => 84.927),
array("x" => 1485887400000, "y" => 82.609),
array("x" => 1488306600000, "y" => 81.428),
array("x" => 1490985000000, "y" => 83.259),
array("x" => 1493577000000, "y" => 83.153),
array("x" => 1496255400000, "y" => 84.180),
array("x" => 1498847400000, "y" => 84.840),
array("x" => 1501525800000, "y" => 82.671),
array("x" => 1504204200000, "y" => 87.496),
array("x" => 1506796200000, "y" => 86.007),
array("x" => 1509474600000, "y" => 87.233),
array("x" => 1512066600000, "y"=> 86.276)

And then further down in the JS section of the code, it formats this data with the following code:

xValueType: "dateTime",
xValueFormatString: "MMM YYYY",

So, my question is that how does those number in the x key in the array translate to months like in this attached image here? image of the chart in action

And also, how would I convert my php datetime object to translate into those numbers in the x variable of the datapoints array.

Solution

  • CanvasJS is a JavaScript library and accepts number / JavaScript date-object / JavaScript timestamp as x-value. As you have date object in PHP, first you should convert PHP datetime to PHP timestamp using strtotime. Then you need to convert it to JavaScript timestamp (multiplying PHP timestamp by 1000).

    And according to documentation, if you are providing timestamp values instead of Date objects, you’ll have to explicitly set the xValueType to "dateTime". So when you pass timestamp to the chart-options and set xValueType to "dateTime", library considers it as date-time.

    Note: In PHP, timestamp is the value represented as seconds calculated, since UNIX Epoch, January 1, 1970 (also called as UNIX timestamp) - which you are calling as number.