I am trying to create an X axis with datetime type where every unique date is displayed along with time and subsequent date label displays just time instead of repeating the same date again.
For Ex: If the dates are like, 01/Jan/1970 10:00 AM, 01/Jan/1970 10:30 AM, 01/Jan/1970 11:00 AM etc, i would like to display the x-axis lables like:
01/Jan/1970 10:00 AM, 10:30 AM, 11:00 AM
How can i do that?
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d/%b/%Y %H:%M %p', this.value);
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}]
});
});
Sample
You can put if condition with start date in label formatter function :
labels: {
formatter: function () {
if (this.value == Date.UTC(2010, 0, 1))
return Highcharts.dateFormat('%d/%b/%Y %H:%M %p', this.value);
else
return Highcharts.dateFormat('%H:%M %p', this.value);
}
}
Check the updated jsFiddle
Related
Here is an example: http://jsfiddle.net/sxm38nsj/4/
When the xAxis is a string, I can get the index of click point.
But when the xAxis is datetime, how can I get the index? Or how can I trigger the point's click events?
eg:http://jsfiddle.net/sxm38nsj/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
click:function(e){
var column = Math.abs(Math.round(e.xAxis[0].value));
alert('bland:',column);
this.series[0].data[column].firePointEvent('click', event);
}
}
},
xAxis: {
type: 'datetime'
},
plotOptions: {
column: {
//pointPadding: 0.2,
//borderWidth: 0
point:{
events:{
click: function(){
alert(this.x);
console.log(this);
}
}
}
}
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
});
You can use built-in method series.searchPoint() to find closest point to the mouse (or rather event) position, for example: http://jsfiddle.net/sxm38nsj/6/
chart: {
type: 'column',
events: {
click: function(e) {
var chart = this;
point = chart.series[0].searchPoint(chart.pointer.normalize(e));
if (point) {
point.firePointEvent('click', event);
}
}
}
},
Another solution is to find closest point to your column value. You can search series.xData array, to get index of the closest point to the mouse event.
Is there a way to show all days at the X axis in this case? Even if i force the minTickInterval to one day highcharts dont show all days.
Fiddle example
$(function () {
$('#container').highcharts({
chart: {type: "column", inverted: true,
},
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointInterval: 24 * 3600 * 1000,
pointRange: 24 * 3600 * 1000
}
},
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]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
});
Datetime axes are based on milliseconds, so an interval of one hour is: 3600 * 1000.
The solution above does not work in charts of type: area.
So if your xAxis is in days you could use:
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000
}
What you need is tickInterval in xAxis:
xAxis: {
type: 'datetime',
tickInterval: 1
}
Updated your jsFiddle here: http://jsfiddle.net/NR8vG/1/
I'm using highstock/highcharts, and plotting a stacked (and grouped) column, based on the last 5 minutes.
I want to highlight the last minute (and have been using a plotband for that).
My problem is that the plotband will not cover the whole time range, as you can see in http://jsfiddle.net/duuuE/1/
What I want the plotband to cover is the last minute (up until the current timestamp), but using stacked/grouped columns makes it weird, because the columns are not drawn at the corresponding x-axis tick that corresponds to the timestamp.
Code is this:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var now = new Date().getTime();
var last10min = now - (10 * 60 * 1000);
var lastMin = now - (60 * 1000);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
minTickInterval: 60 * 1000,
tickMarkPlacement: 'on',
plotBands: [{ // highlight last minute
color: '#FCFFC5',
from: lastMin,
to: now
}],
},
plotOptions: {
series: {
pointStart: last10min,
pointInterval: 60 * 1000 // one minute
},
column: {
stacking: 'normal',
pointPlacement: 'between'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]
});
});
I think you need to remove pointPlacement from your options, see: http://jsfiddle.net/Fusher/duuuE/2/
Reported issue to bug tracker.
Possible workaround: http://jsfiddle.net/duuuE/7/
When I hover an scatter point in a scatter chart, the mouseOver callback receive a event object, but I cant find the current point nor clientX/clientY in that object.
How can I get it?
Im using version v2.3.5 of highcharts
chart = new Highcharts.Chart({
[...]
plotOptions: {
scatter: {
[...]
events: {
click: function(ev) {
[...]
scatterClick(ev);
},
mouseOver: function(ev) {
[...]
scatterHover(ev);
},
You are handling the wrong event. If you want the point information, set the the callback on the point mouseOver event.
Fiddle here.
series: [{
type: 'scatter',
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],
point: {
events: {
mouseOver: function() {
x = this;
alert ('x: '+ this.x +', y: '+ this.y);
}
}
}
}]
In the mouseOver event on the series.data callback, 'this' refers to the point, so you hold be able to use
this.x;
this.y;
E.g
chart = new Highcharts.Chart({
[...]
series: {
data: {
[...]
events: {
click: function(ev) {
alert (this.y);
},
mouseOver: function(ev) {
alert(this.x);
},
In this example JFiddle Link. I want to apply a colored area for a plotted/selected date period. For example, if I select points 1 to 10, the background of these points should be highlighted.
var $report = $('#report');
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
selection: function(event) {
if (event.xAxis) {
var min = Math.ceil( event.xAxis[0].min ),
max = Math.ceil( event.xAxis[0].max ),
data = this.series[0].data,
list = [];
$('#report').empty();
for(i=min; i<max; i++)
list.push('<li>x: '+data[i].x+', y: '+data[i].y+'</li>');
$('#report').append( list.join('') );
}
return false;
}
},
zoomType: 'x'
},
xAxis: {
},
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]
}]
});
All you need to do is to add the PlotBand in your selection event.
chart.xAxis[0].removePlotBand('plot-band-1');
chart.xAxis[0].addPlotBand({
from: min,
to: max,
color: '#FCFFC5',
id: 'plot-band-1'
});
Example here. API for your reference.
Hope this helps.