Why isn't the xAxis showing the date?

Question

I have a question related to HighCharts. Below is my code for implementing a highchart with integer values on yaxis and date on x-axis. I am getting my data from database both date and values.

The x-axis date and time isn't displayed correctly. In my database it looks like that ,2015-04-27 15:26:41.463 .

var a = [];
$('#container').highcharts({
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                xAxis[0].setCategories(x);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        categories: a
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 1);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        data: series
    }]
});

UPDATE

This is what I have reached now

    .success(function (point) {

    for (i = 0; i < point.length; i++) {
        myDate[i] = point[i].date_time;
        value[i] = point[i].value_db;
    }

    for (j = 0; j < myDate.length; j++) {
        var temp = new Array(myDate[j], value[j]);
        mySeries[j] = temp;
    }
    DrawChart(mySeries, myDate, value);

})

function DrawChart(series, x, y) {
    //Fill chart
    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];

                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            //tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: series
        }]
    });
}

UPDATE2

Help Please.

Answer 1

You'll have to change myDate[i] = point[i].date_time; to:

myDate[i] = parseInt((point[i].date_time).substring(6, 19));

So that it will contain the UTC date format of the datetime.

Then you will have to use xAxis.labels.formatter like this:

xAxis: { 
    labels: { 
        formatter: function() { 
            var date = new Date(this.value); 
            return date.getFullYear() + "-" +
                   date.getMonth() + "-" +
                   date.getDate() + " " +
                   date.getHours() + ":" +
                   date.getMinutes() + ":" +
                   date.getSeconds(); 
        } 
    } 
}

to tell the chart how to show it's xAxis labels.

And for showing more labels in yAxis, you can use:

yAxis: { 
    tickInterval: 100 // if you want the labels to show every 100 values 
}