Highcharts / Highstock: x-axis dates appear as three dots - highcharts

Question

I have a Highstock Stock chart here:
http://www.intesasanpaololife.ie/it/prodotti/prospettiva-20/fondi/profilo-base
(it's at the top of the page).
If I select a short period (select April 1st, 2015 as a start date using the date picker), the dates on the x-axis appear as three dots, instead of the proper dates. If I scroll using the scrollbar at the bottom, the correct dates appear.
We used a custom function to select where the dates fall on the axis.
The three dots appear to me to be the effect of a function that changes the labels to dots if there is not enough space, but this is certainlynot the case.
The function that starts the chart is on this file:
http://www.intesasanpaololife.ie/jscript/fund.js, starting from line 27:
$.getJSON($('#fund-trend').data('source'), function (data) {
var tickerPositions = function(series){
var positions = [];
for(var i=0; i<series.length; i++){
positions.push(series[i][0]);
}
return positions;
}
var tP = tickerPositions(data.series[0].data);
// console.log(tP);
$('#fund-trend').highcharts('StockChart',{
chart: {
backgroundColor:'#e1ebf5',
plotBorderWidth: null,
plotShadow: false,
events: {
load: function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#fund-trend')).datepicker(
// $.datepicker.regional[ "it" ]
{
beforeShowDay: function(date){
if(date.getDay() == 3){
return [true];
} else {
return [false];
}
}
}
);
}, 0);
}
}
},
colors: [
'#1c578f', '#99b3cc'
],
title : {
text : ''
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' €',
valueDecimals: 2,
dateTimeLabelFormats:{
millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%d/%m/%Y",
week:"Settimana del %d/%m/%Y",
month:"%B %Y",
year:"%Y"
}
},
plotOptions: {
series: {
dataGrouping: {
dateTimeLabelFormats: {
millisecond: ['%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'],
second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
week: ['Settimana del %d/%m/%Y', 'dal %d/%m/%Y', 'al %d/%m/%Y'],
month: ['%B %Y', '%B', '-%B %Y'],
year: ['%Y', '%Y', '-%Y']
}
}
}
},
rangeSelector: {
enabled: true,
buttons: [],
//inputDateFormat: "%d %b %Y",
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: "%d/%m/%Y",
inputDateParser: function(value){
value = value.split("/");
var date = Date.UTC(
parseInt((value[2])),
parseInt((value[1]-1)),
parseInt(value[0])
);
return (date);
}
},
xAxis: {
tickInterval: 7 * 24 * 36e5,
labels: {
format: '{value:%d-%m-%Y}'
},
startOfWeek: 3,
// tickPositions: tP,
tickPositioner: function(min, max){
// console.log("positioning" + min + " " + max + " " + (max-min));
var selectCurrentPositions = function(min, max){
var positions = [];
var weeks = (max-min ) / (7 * 24 * 36e5);
var interval = Math.ceil(weeks/15);
//console.log ("weeks " + weeks + " interval " + interval);
var count = 0;
for(var i=tP.length-1; i>0; i--){
// console.log(tP[i]);
// console.log(count + " interval " + interval + " tp[i] " + tP[i] );
if(tP[i]>= min || tP[i] <= max) {
if(count%interval == 0 ) {
// console.log("pushing it i is "+ i);
positions.push(tP[i]);
}
}
count++;
}
// console.log(positions);
return positions;
}
return selectCurrentPositions(min,max);
},
endOnTick: false
},
navigator: {
enabled: false
},
series : data.series
});
});
Any ideas? Any help?

Answer 1

The problem is with your tickPositioner still. In this line: if(tP[i]>= min || tP[i] <= max).
There should be: if(tP[i]>= min && tP[i] <= max). I think you want ticks within the range.