Highcharts xAxis doesn't get the right time format - php

Question

I created a chart combined with datepicker. that gets data out of a SQL database with datetime, open, high, low, close for the selected date.
I tested every single way to format the xAxis so that the unzoomed tickinterval is 1 hour like 7:00 8:00 9:00...
And I want to be able to zoom in so that the smallest interval is 1 minute like 7:00 7:01 7:02...
First problem is, that the format always keeps looking like yyyy-mm-dd hh:mm:ss for every single point. After changing the tickInvterval it looked better but still wrong and the zoom function for an 1 minute interval was not possible.
After splitting database into single date and time columns I solved the date problem, but obviously highchart still doesn't realize that it is a timeaxis, because xAxis settings look like this: (should display hh:mm but the chart displays hh:mm:ss)
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'},
tickInterval: 60},
At least it's not the intention to split the database, because there should be a way that i can use to change the sql datetime into a javatime format during the query process.
I searched for days now, but didn't find the right answer... maybe because I'm too new to this stuff... :)
This is the code to generate the chart:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart:{
zoomType: 'x',
renderTo: 'container'
},
title: {
text: 'Charts',
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold'
}
},
subtitle: {
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
},
tickInterval: 60
},
yAxis: [{
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, {
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
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,
shared: true,
useHTML: true,
dateTimeLabelFormats: {
minute: '%H:%M'},
style: {
padding: 10,
fontWeight: 'bold'
},
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ this.x +'</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
},
shared: true
},
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: [{
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
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'];
options.xAxis.categories = json['datetime'];
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'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
}
});
});
and here is the php:
<?php
session_start();
?>
<?php
define('DB_SERVER',"localhost");
define('DB_NAME',"db");
define('DB_USER',"");
define('DB_PASSWORD',"");
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);
if (isset($_GET["dateParam"])) {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE datetime LIKE '".$_GET["dateParam"]."%'");
} else {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE DATE(datetime) = CURDATE()");
}
while($r = mysql_fetch_array($sql)) {
$result['datetime'][] = $r['datetime'];
$result['data1'][] = $r['open'];
$result['data2'][] = $r['close'];
$result['data3'][] = $r['high'];
}
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>

Answer 1

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

Answer 2

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

Answer 3

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);
});
}
});
});