[Source Code]-Highcharts xAxis doesn't get the right time format-Highcharts

Your tickInterval is very small. It is set to 60 milliseconds. If you want the tickInterval to be one minute you need to set it to multiply by 10k:

tickInterval: 60 * 10000

That should solve it because even though you are saying to use '%H:%M' your resolution is much smaller.

Edit: So, a few things. See this jsFiddle. You need to set a start time (always good practice) and you need to tell it how much time between data points if you do not provide data as {x, y}. To do this you do:

series: [{
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 60000, //every minute there is data.
    name: 'Realtime',
    type: 'area',
    data: [8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500]
}]

The important parts are pointStart and pointInterval. I also set the max zoom level to be one minute up in the chart: {} options:

maxZoom: 60000

You can use tickPositioner which allows to calculate ticks, dynamically http://api.highcharts.com/highstock#xAxis.tickPositioner

Thank you so much, finally I got most functions and the problem was

options.xAxis.categories = json['datetime'];

BUT... :) I'm recieving market data where some minute data are missing every single day, e.g. 7:00, 7:01, 7:03 and so on. and with an xAxis datetime format Highchart doesn't realize this and only counts up the time so that the last shown tick for example is 21:40 and not 22:00 as it should be. That's why I wanted to recieve the x-values from the database datetime, which I obviously was not able to do. Does anybody have an idea?

This is the code so far, working pretty fine:

$(document).ready(function() {
Highcharts.setOptions({

});

    options = {
      chart: 
  {
    backgroundColor: {
     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
     stops: [
        [0, 'rgb(51, 51, 51)'],
        [1, 'rgb(16, 16, 16)']
     ]
  },
    borderColor: '#666666',
    borderWidth: 1,
    borderRadius: 0,
    zoomType: 'x',
    maxZoom: 60000,
    renderTo: 'container'
  },

  title: 
  {
    text: 'Realtime',
    margin: 50,
    style: {
        fontFamily: 'Verdana',
        fontSize: '20px',
        fontWeight: 'bold',
        color: '#cccccc'
        }
  },
        subtitle: 
  {
    text: 'Chart 1',
    style: {
        fontFamily: 'Verdana',
        fontSize: '15px',
        fontWeight: 'bold',
        color: '#CCCCCC'
        }
  },

         xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            minute: '%H:%M'
        }
    },
        yAxis: [{ // first yAxis
            labels: {
                format: '{value}',
                style: {
                    color: '#eeeeee'
                }
            },
            title: {
                text: 'Realtime',
                style: {
                    color: '#eeeeee'
                }
            }
        }, { // Second yAxis
            title: {
                enabled: false,
                text: 'Graph1',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                enabled: false,
                format: '',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        },{ // Third yAxis
            title: {
                enabled: false,
                text: 'Graph2',
                style: {
                    color: '#89A54E'
                }
            },
            reversed: true,
            labels: {
                enabled: false,
                format: '',
                style: {
                    color: '#89A54E'
                }
            },
            opposite: true
        }],
        tooltip: {
        xDateFormat: '%H:%M',
        shared: true,
        backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                [0, 'rgba(96, 96, 96, .8)'],
                [1, 'rgba(16, 16, 16, .8)']
                ]
            },
            borderWidth: 1,
            borderColor: '#666666',
            crosshairs: true,        
            useHTML: true,
            formatter: function() {
            var s = '<b><span style="font-size: 12px; color: #cccccc">'+ Highcharts.dateFormat('%H:%M', this.x) +' Uhr</span></b>';
            $.each(this.points, function(i, point) {
                s += '<br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
            });

            return s;
        }
    },

  legend: 
  {
    enabled: true,
    itemStyle: {
        color: '#eeeeee',
        }
  },
  credits:
  {
    enabled: false
  },
  plotOptions: {
  spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },

                },
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, 'rgb(204, 204, 204)'],
                        [1, 'rgba(204, 204, 204,0)']
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Realtime',
       type: 'area',
       color: '#cccccc',
       data: []
   }, {
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Graph1',
       type: 'spline',
       yAxis: 1,
       color: '#0077cc',
       enableMouseTracking: false,

       data: []
    }, {
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Graph2',
       type: 'spline',
       yAxis: 2,
       color: '#89A54E',
       enableMouseTracking: false,

       data: []
    }]
    }
    $.getJSON('data.php', function(json) {

    val1 = [];
    val2 = [];
    val3 = [];
    $.each(json, function(key,value) {
    val1.push([value[0], value[1]]);
    val2.push([value[0], value[2]]);
    val3.push([value[0], value[3]]);
   });

    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];
    chart = new Highcharts.Chart(options);
 });


});

$(function() {
    $( "#datepicker" ).datepicker({
      beforeShowDay: $.datepicker.noWeekends,
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText, inst) { 
        $.getJSON("data.php?dateParam="+dateText, function(json){
            val1 = [];
            val2 = [];
            val3 = [];
            $.each(json, function(key,value) {
            val1.push([value[0], value[1]]);
            val2.push([value[0], value[2]]);
            val3.push([value[0], value[3]]);

    });
    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];

    chart = new Highcharts.Chart(options);
        });
      }
    });
});