Date label doesn't show on the Canvasjs chart when using JSON data

Question

I am trying to use Canvasjs to draw a graph representing blood test results. My JSON data appears to be fine, and when I run it it creates the graph with the y values only. Nothing on the x .

Here is my JSON data:

[
    {
        "legend": "t3",
        "x": "2004-07-05",
        "y": 6.8
    },
    {
        "legend": "t4",
        "x": "2004-07-05",
        "y": 29
    },
    {
        "legend": "tsh",
        "x": "2004-07-05",
        "y": 0.01
    },
    {
        "legend": "thyroglobulin level",
        "x": "2004-07-05",
        "y": 0.5
    },
    {
        "legend": "t3",
        "x": "2005-06-15",
        "y": 5.2
    },
    {
        "legend": "t4",
        "x": "2005-06-15",
        "y": 30
    },
    {
        "legend": "tsh",
        "x": "2005-06-15",
        "y": 0.02
    },
    {
        "legend": "thyroglobulin level",
        "x": "2005-06-15",
        "y": 0.5
    }
]

Here is my page code:

$(document).ready(function(){ 

        $("#find").click(function(e){

            e.preventDefault();

            $.ajax({
                // the URL for the request
                url: "bloodTest.php",
                // the data to send (will be converted to a query string)
                data: {pnhsno: "1001001002"},
                // whether this is a POST or GET request
                type: "GET",
                // the type of data we expect back
                dataType : "json",
                // code to run if the request succeeds;
                // the response is passed to the function
                success: function(json){

                    $("#chart").CanvasJSChart({ //Pass chart options
                         title:{text:"Blood Test Results"},
                         //axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},
                        data: [{
                        type: "line", //change it to column, spline, line, pie, etc
                        xValueType:"date",
                        dataPoints:json}]
                    });
                //chart.render();
                }

            }); 
        });
});

Answer 1

You need to convert values on your x-axis to javascript Date objects like this:

[
  {
    "legend": "t3",
    "x": new Date(2004, 7, 5),
    "y": 6.8
  },
  {
    "legend": "t4",
    "x": new Date(2004, 7, 5),
    "y": 29
  },
  {
    "legend": "tsh",
    "x": new Date(2004, 7, 5),
    "y": 0.01
  },
  .....
];

More examples can be found here .

Answer 2

You need to transform your x data points to Date before passing them to the chart:

// To use the jQuery version
//var dataPoints = $.map(data, function (p) {
var dataPoints = json.map(function (p) {
    p.x = new Date(p.x);
    return p;
});
$("#chart").CanvasJSChart({ //Pass chart options
    title:{text:"Blood Test Results"},
    //axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},
    data: [{
      type: "line", //change it to column, spline, line, pie, etc
      //xValueType:"date",
      dataPoints: dataPoints
    }]
});