Develop Reference

How to change format of the upper xAxis Label?

How can I change the format of the "upper" xAxis Label as shown in the picture?
I have already figured out how to change the weekday labels below (T, W, T, etc.) with the following snippet (for weeks, code placed within the xAxis):
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
}
},
Existing example to play around:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/resource-management

You have 2 xAxis. So you should provide dateTimeLabelFormats array.
axis with the lower index will be placed lower.
So, your xAxis should be
xAxis: [{
currentDateIndicator: true,
dateTimeLabelFormats: {
day: {
list: ['%A, %e. %B', '%a, %e. %b', '%E']
}
}
},
{
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
},
month: {
list: ['Monat%W', 'KW%W']
}
}
}
],

According to this page, the way to do it is to set the x-axis to be an array of objects, with each representing a level of the x-axis (day, week, month, etc.). In this case: https://jsfiddle.net/vm5t78j3/
xAxis: [{
currentDateIndicator: true,
}, {
labels: {
format: '{value:%W}'
},
}],

Using hours value with HighCharts

I have some trouble with HighCharts, i can't figure out how to use hours. For now i manage to use day hours (00 to 24) but it stop at 24 and restart at 0 because HighCharts consider that a day is pass. I just want to have an hour value like 1h30 or 55h10 for example.
Here is my chart :
$('#chart2').highcharts({
chart: {
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: 0,
borderWidth: 2,
borderRadius: 7,
borderColor: '#D8D8D8',
width:dialogWidth/2,
height:dialogWidth/2+50
},
title: {
text: 'Time Worked per Day'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%d %H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'
},
title: {
text: 'Hours'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
},
series: [{
name: 'Hours',
colorByPoint: true,
data: datas
}]
});
Hope you can help.

You don't need to use datetime for figuring this out. Since what you want to know is the number of hours per day, based on a value in milliseconds from your JSON data, you need to treat that value as a number, not a date.
Here's how I solved this problem:
First, I changed how you described the labels in your y-axis. I dropped the datetime type and used the formatter function to show the labels as whole hours. I also defined a tickInterval to show the labels one hour apart from one another.
yAxis: {
labels: {
formatter: function() {
// show the labels as whole hours (3600000 milliseconds = 1 hour)
return Highcharts.numberFormat(this.value/3600000,0);
}
},
title: {
text: 'Hours'
},
tickInterval: 3600000 // number of milliseconds in one hour
},
Next, I updated the code in your tooltip. We're taking your y values and making them whole hours. I set the second parameter in Highcharts.numberFormat to "2" so your toolip values show up with two decimal places (such as "2.50" for two-and-one-half hours).
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.numberFormat(this.y/3600000,2);
}
},
You can see a working fiddle, based off the sample data you provided, here: http://jsfiddle.net/brightmatrix/kk7odqez/
Here's a screenshot I took of the chart in this fiddle, showing how both the labels and tooltip now appear:
Thank you for the additional information you provided in your comments. That really helped me puzzle this out and get you what I hope is a useful solution.

Correctly plot time series in Highcharts/Highstock

I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.

What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);

Highcharts show days of month dates in X axis (from JSON file). tickInterval: not work?

I have another issue with Highcharts graphs. A PHP file returns a JSON whith many elements, compounds of two fields (name: date,int:). I need Highcharts draw all dates of the month in the X axis. The elements on JSON chain are all the same month.
I try whith many sintaxis of tickInterval (put 1, or put 24 * 3600 * 1000,...), but not works!
Thank you in advance!!!
NOTE: I tried to copy the code in jsFiddle, but does not work ... neither use jsFiddle :( ... sorry!
JSFiddle
Thanks wergeld!!
JSFiddle
JSON chain returned from PHP file:
[{"name":"Sant Iscle 60","data":[[1398902400000,4],[1399939200000,1]]},{"name":"Sant Iscle 62","data":[[1399939200000,2]]},{"name":"Laboratorio Comp.","data":[[1400025600000,2]]}]
Javascript file:
chart = new Highcharts.Chart({
chart: {
renderTo: 'divStatsGrupo',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column'
},
title: {
text: tituloMes
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y',new Date(this.x)) + '<br/>' +'Alarmas: ' + this.y
}
},
xAxis: {
type: 'datetime',
tickInterval: 1, //<------NOT WORKING?¿
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
day: '%e. %b',
}
},
yAxis: {
tickInterval: 1,
title: {
text: 'Total alarmas'
},
allowDecimals: false,
min: 0
},
series : data,
});
});
Image explicative:
Thank you very much in advance!!!
EDIT & SOLVED! ...Thanks Jerko again! ...see below answers for the solution!

This is the common problem with columns and bars in Highcharts. You need to add pointRange under the plotOptions
Also tickInterval for one day is 24*3600*1000 not 1 (x-axis is in microseconds)
here is working fiddle
http://jsfiddle.net/nah67/3/
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000 // one day
}
}
P.S. I removed some comments from your code, because they were distracting me :)

Highstock xAxis datetime

I use Highstock to display a graph showing the number of visitors in column and I need the zoom to display the number of visitors per day, per month and per year
In my graph I can display a number of visitor per day, but I would like display a number of visitor per month and per year too.
But when I look my graph (per month) I don't have a graph with 12 column, I have a graph with 365 column (one per day).
I use the type datetime for xAxis, but it doesn't work...
x rangeSelector: {
inputDateFormat:'%d.%m.%Y',
inputEditDateFormat:'%d.%m.%Y',
buttonTheme: {
width: 80
},
buttons: [{
type: 'day',
count: 7,
text: 'day'
}, {
type: 'month',
count: 12,
text: 'month'
}, {
type: 'year',
count: 1,
text: 'years'
}],
selected: 0
},
Axis: {
minTickInterval: 24 * 3600 * 1000,
type: 'datetime',
title: {
text: 'Time'
},
dateTimeLabelFormats: {
day: '%d.%m<br/>%Y'
}
}
How can I have a graph with "a addition of the visitors per column" ?
Below is what I get now. The first graph is OK, but the second, it's not OK. I would 12 columns and not 365.
Per Days:
Per Years:

Range selector buttons affecting to the time span which should be displayed on a chart. If you want to display specific unit on a chart, you need to use forced dataGrouping, see:
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.forced
Example could be found here: http://www.highcharts.com/stock/demo/candlestick-and-volume