Highcharts mixed column/spline, wrong xaxis labels - highcharts

Question

I am trying to finalize a graph where I report the daily production within a month and a couple of other daily based series. The graph is always set at full scale, meaning that I always show all the days within a month, even if I do not have values for them, whichever is the reason why. On the first day of each month, I display the graph of the previous month, as a report.
This is the jfiddle I've set up so that you can have an idea. The problem I've been fighting against is that, whatever I try to do, Highcharts simply ignores me and displays wrong labels on x axis. So the days start from 2, go throughout the whole month to the last and they end with 1.
This is the code for my chart:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'tab-month-graph',
zoomType: 'xy'
},
title: {
text: 'Daily - August 2015'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
align: 'center',
text: 'Giorni',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
dateTimeLabelFormats: {
day: '%e'
}
},
yAxis: [{ // Primary yAxis
title: {
text: 'Produzione giornaliera',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Secondary yAxis
title: {
text: 'PR giornaliero',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
startOnTick: false,
opposite: true
}],
legend: {
enabled: false
},
series: [{
name: 'Prod.',
type: 'column',
data: [[1438466230000, 4603.36],[1438552630000, 4264.92],[1438639030000, 3108.05],[1438725430000, 2047.03],[1438811830000, 2270.39],[1438898230000, 2258.2],[1438984630000, 3971.95],[1439071030000, 3784.45],[1439157430000, 3674.53],[1439243830000, 3131.95],[1439330230000, 1963.13],[1439416630000, 3333.52],[1439503030000, 4161.8],[1439589430000, 4408.59],[1439675830000, 2968.83],[1439762230000, 2808.05],[1439848630000, 4439.77],[1439935020000, 3746.48],[1440021430000, 4980],[1440107830000, 3683.91],[1440194230000, 4480.78],[1440280630000, 4406.48],[1440367030000, 4518.98],[1440453430000, 4492.73],[1440539830000, 3924.14],[1440626230000, 4062.89],[1440712630000, 3225.47],[1440799030000, 3213.75],[1440885430000, 4631.95],[1440971830000, 4471.17],[1441058230000, 4223.91]],
color: '#89CE7F',
dataLabels: {
enabled: true,
rotation: -90,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
},
{
name: 'PR',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 6
},
data: [[1438466230000, 73.36],[1438552630000, 75.08],[1438639030000, 57.54],[1438725430000, 38.85],[1438811830000, 39.14],[1438898230000, 63.78],[1438984630000, 76.03],[1439071030000, 75.78],[1439157430000, 77.61],[1439243830000, 79.74],[1439330230000, 77.35],[1439416630000, 73.98],[1439503030000, 75.79]],
color: '#AA0000',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'PR Cont.',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 5,
symbol: 'circle'
},
data: [[1438466230000, 78.84],[1438552630000, 79.85],[1438639030000, 75.16],[1438725430000, 59.15],[1440971830000, 78.5],[1441058230000, 78.45]],
color: '#BBBB00',
tooltip: {
valueSuffix: ' %'
}
}
],
tooltip: {
xDateFormat: '%A, %d %B %Y',
valueSuffix: ' kW',
shared: true // LEGENDA CONDIVISA
},
plotOptions: {
series: {
pointStart: Date.UTC(2015, 7, 1),
pointRange: 24 * 3600 * 1000
}
}
});
});
I've read tons of posts on Stack Overflow, tried tons of suggestions, I've even tried this post tinyurl.com/psbzxeh on HighCharts official forum which is referred to a similar problem, but it did not solve my issue.
Could someone point me out to the right solution?

Answer 1

Just to clarify things: columns look like translated by one day, because of that time (21:57:10 UTC) - which is almost another day (without UTC it's 23:57:10 for GMT+2:00). In general, if you have daily data, then it's better to use 00:00:00 as this is when exactly date starts. Manipulating JSON shouldn't be that hard, see:
function modify(data) {
var time;
data.map(function(e) {
time = new Date(e[0]);
time.setUTCHours(0);
time.setUTCMinutes(0);
time.setUTCSeconds(0);
e[0] = time.getTime();
return e;
});
return data;
}
And:
series: [{
name: 'Prod.',
type: 'column',
data: modify([
[1438466230000, 4603.36],
...
])
}]
Demo: http://jsfiddle.net/p7vnqmt7/3/
Note: to remove extra tick at the last place on the axis, you can simply set xAxis.max.
And to answer question in the comment: no, pointInterval shouldn't be used when you have data as x-y pair.

Answer 2

try below function above your highchart function and set xAxis min and max.
Use very first timestamp(date) as min and last timestamp(date) as max value.
$( function () {
Highcharts.setOptions( {
lang : {
rangeSelectorZoom : ' '
},
global : {
useUTC : false
}
} );
} );