Reputation: 1100
Highcharts xAxis
I am using a Highcharts for some charting specifically the Spline with plot bands. The associated jsfiddle can be found here.
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
I need the chart to show time not to time - 50min (at minute intervals). That is to say the right most point of data is time = now and the left most is time - 50 min.
Adding the spline data is not a problem but I am having trouble adding he correct data for the xAxis.
The date data I have is in milliseconds (1456783080016000) but what is the best way to get this into the chart bearing in mind that this chart updates ever minute as must the xAxis.
Code that i have seen shows you can update it like so:
Highcharts.charts[0].xAxis[0].update({categories:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']}, true);
How do I add the date date to this update ?
My second part of this question is what is the role of the pointInterval & pointStart.
I am assuming the pointInterval is one minute or (60000ms) and the point pointStart: Math.abs(new Date().getTime() - 3000000) which is time now minus 50 minutes (3000000ms).
This doesn't seem to be working so any advice appreciated.
Upvotes: 1
Views: 609
Answers (2)
Reputation: 45079
I would use xAxis.tickPositioner and xAxis.labels.formatter to get the desired result. Snippet:
xAxis: {
type: 'datetime',
tickInterval: 600000, // get every 10th tick
tickPositioner: function (min, max) {
var ticks = [],
interval = this.tickInterval;
while (max >= min) {
ticks.push(max);
max -= interval;
}
return ticks.reverse();
},
labels: {
formatter: function() {
var max = this.axis.max,
diff = max - this.value;
if (diff === 0) {
return 'Now';
}
return '-' + Highcharts.dateFormat('%M', diff) + 'mins';
}
}
},
And live demo: http://jsfiddle.net/tdmjm9pn/1/
Let me know if something is not clear.
Upvotes: 1
Reputation: 6565
you can try something similar to the following
$(function() {
$('#container').highcharts({
xAxis: {
categories: [1373155200000, 1373241600000, 1373328000000, 1373414400000, 1373500800000, 1373587200000, 1373673600000, 1373760000000, 1373846400000, 1373932800000, 1374019200000, 1374105600000],
type: 'datetime',
labels: {
formatter: function() {
var d = new Date(this.value);
return d.toDateString();
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Upvotes: 0