CanvasJS: xValueFormatString does not do anythin at all

So, I have stumbled upon a very infuriating problem I just cannot seem to overcome. I have been trying to make a graph that displays the change in temperature over the day.

All not that tricky, but I simply cannot format the datetime string I pass to my script from PHP. After some trial and error, I figured, I would just download another example and try from there.

`<?php



$dataPoints = array(
    array("x" => 1512441720000 , "y" => array(120, 78)),
    array("x" => 1512447240000 , "y" => array(147, 89)),
    array("x" => 1512453960000 , "y" => array(139, 85)),
    array("x" => 1512461700000 , "y" => array(160, 95)),
    array("x" => 1512466320000 , "y" => array(130, 84)),
    array("x" => 1512472020000 , "y" => array(138, 87)),
    array("x" => 1512475440000 , "y" => array(127, 78)),
    array("x" => 1512477540000 , "y" => array(119, 76)),
    array("x" => 1512482280000 , "y" => array(135, 82)),
    array("x" => 1512486900000 , "y" => array(122, 78)),
    array("x" => 1512490800000 , "y" => array(130, 82)),
    array("x" => 1512494160000 , "y" => array(122, 75))
 );

?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Blood Pressure Readings over a Day"
    },
    axisY: {
        title: "Pressure (in mmHg)",
        gridThickness: 0
    },
    data: [{
        type: "rangeArea",
        xValueType: "dateTime",
        yValueFormatString: "#,##0 mmHg",
        toolTipContent: "{x}<br><b>Systolic:</b> {y[0]}<br><b>Diastolic:</b> {y[1]}",
        dataPoints: <?php echo json_encode($dataPoints); ?>
    }]
});

chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>`

This thing works just fine. Notice that I have no "xValueFormatString" in there. The original has one as follows: "xValueFormatString: "hh:MM TT"," so the timestamp on the x axis displays hours from 00 to 12 and minutes from 00 to 59 with am or pm. I wanted to change that to "HH:mm". It did nothging, stayed like before. Now I have deleted it and it's still the same. What is telling the graph to format the x axis like that now? Nothing in my opininion. So, why does it stay the same?

The other example from which i built my original graph from displays the same problem, just that the original format was "YYYY:mm:dd hh:mm". Why do the scripts "remember" their original format, but do not let them selves be changed?

My own graph is practically the same as the example graph I've pasted here. Only that I get my unixtimestamp from a database, but it does not work even if I pass a number like in the example, so my own code is not the problem.

I am using chrome, the page is hosted by my raspberrypi via apache, if you need that information.

Thanks to everyone who might try to help me in advance!

Solution

You need to use valueFormatString to define how values must be formatted before they appear on axisX whereas xValueFormatString defines how x values must be formatted before they appear on the indexLabel or toolTip.

Adding below option should work fine in your case.

axisX: {
    valueFormatString: "HH:mm"
},