Highchart - Set Time(Hour:Minute) on X axis - highcharts

I did not able to get labels like [12:00,12:15,12:30,12:45,01:00,01:15,..] on X axis.
I got only 00:00 on X axis.I was not able to display increasing time values on X axes.
I want to start default from 12:00.
I used following code.
xAxis: {
type: 'datetime',
tickInterval : 1.5 * 3600 * 1000,
dateTimeLabelFormats : {
day : '%H:%M'
}
}

This worked for me in Dynamic Highchart.
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Sensor Data Vs. Time'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Sensor Data',
data: []
}]
});
});
With this I am displaying Hours, Minutes and seconds as well.

You haven't shown us what data you are supplying. Something like this works:
series: [{
name: 'Temperatures',
pointStart: new Date().getTime(),
pointInterval: 24 * 3600 * 1000,
data: [1.5 * 60 * 1000,1.2 * 60 * 1000,2.5 * 60 * 1000,1.9 * 60 * 1000,],
}]
http://jsfiddle.net/Fusher/pQ5EC/12/

Related

Highcharts: Different tick interval in the same axis

I have a series that is composed of:
Daily values, until a certain date
6-monthly values, from that date
onward
I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.
I'm not sure if Highcharts allows this... I think there can be two different approaches:
Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.
Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.
This is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
animation: false
},
title: {
text: 'Some data'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
type : 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
},
yAxis: {
title: {
text: null
},
maxZoom: 0.1
},
series: jsonData
});
Here's a jsfiddle with a subset of my original data.
Which would be the best way to achieve this?
Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:
xAxis: [{
type: 'datetime',
endOnTick: false,
tickInterval: 30 * 24 * 3600 * 1000,
max: 1536278400000,
width: '65%',
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
}, {
min: 1536278400000,
startOnTick: false,
offset: 0,
type: 'datetime',
tickInterval: 180 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
width: '35%',
left: '65%'
}]
Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/

Highcharts: Hide/remove values (in a range) from y axis

How can I remove some values from a yAxis?
My chart is a columnrange (https://www.highcharts.com/demo/columnrange) with days on the x axis (actually y axis, rotated), and I don't want show values for some days.
More in general I want hide some values from domain, i.e. a discontinuous domain.
Example:
Highcharts.chart('container', {
chart: { type: 'columnrange', inverted: true },
xAxis: { categories: [ 'FirstTask' ] },
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () { return Highcharts.dateFormat('%e.%b', this.y); }
}
}
},
series: [{ data: [1497718538701, 1498150538701] }],
});
This code generates a chart with horizontal bar and days from 17 June to 22 June on x Axis (y, rotated).
I want remove days 19 and 20, i.e. all points in interval
[1497891338701, 1497977738701]
Is it possible?
You can use broken axis module to set breaks on an axis.
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5,
breaks: [{
from: Date.UTC(2017, 5, 19),
to: Date.UTC(2017, 5, 20),
breakSize: 0
}],
It seems that in your case some ticks are overlapping, but it might be fixed with axis.labels.formatter - you can check if the value is outside the break.
labels: {
formatter: function () {
const hide = Date.UTC(2017, 5, 19) <= this.value && this.value < Date.UTC(2017, 5, 20)
return !hide ? this.axis.defaultLabelFormatter.call(this) : null
}
example: http://jsfiddle.net/qhrd9wnw/

How to make Highstock work with two xAxis?

The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/

How to make highcharts scrollable vertically in column range

I want to make a column range charts vertically scrollable. scrollbar: {enabled: true} seems not to work.
My goal is to show min: 10 categories. The rest should be visible by scrolling down in the chart.
Here is my fiddle: http://jsfiddle.net/ttrtb6xt/2/
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
},
xAxis: {
categories: ["Bulk Order Submission","CAD","CiteAb","DDF Order Management","EB-eye","Enterprise Asset Manager","Enterprise Search","False EAMS - Enterprise Architecture Management System","Funnelback","GenieKnows","Giga EAMS - Enterprise Architecture Management System","Google Maps","Google SOAP Search","GoPubMed","Hieroglyphs EAMS - Enterprise Architecture Management System","I Y I","IAM - Identity & Access Management","in","de","Jumper 2.0","LANDesk Management","LIMS 2010","LIMS 2016","Master Data Management System","Monster.com","MuleSoft ESB","Nextbio","Office 365","Oracle Peoplesoft HR","Order Tracking Portfolio","Q-Sensei Enterprise Search","Quertle","salesforce.com","SAP Finance","SAP HR","SCM - Supply Chain Manager","ServiceNow","Strategic Information System","TeraText Suite","Test App 1","Test App 1","Test App 2","Test App","Testing L","UP","Academy","International"],
min: 5,
scrollbar: {
enabled: true
},
},
yAxis: {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30 * 6,
plotLines: [{
color: 'red', // Color value
dashStyle: 'Solid', // Style of the plot line. Default to solid
value: [1411344000000], // Value of where the line will appear
width: 3, // Width of the line
zIndex: 4,
label: {
text: 'Current Date',
},
}],
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.0,
allowPointSelect: true,
dataLabels: {
enabled: true,
align: 'center',
x: -10,
formatter: function() {
return this.series.name;
}
}
}
},
tooltip: {
formatter: function() {
var x = this.x,
low = this.point.low,
high = this.point.high,
duration = high - low;
return x + ':<br> start: ' + new Date(low).toDateString() + '<br> end: ' + new Date(high).toDateString() + '<br> duration: ' + duration / (1000 * 60 * 60 * 24) + ' days';
}
},
legend: {
enabled: false
},
series: [{"color":"#dedede","data":[[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000]],"name":"Planning"},{"color":"#34d440","data":[[1436918400000,1531612800000],[1436918400000,1475020800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000]],"name":"Standard"},{"color":"#ffd440","data":[[],[1475020800000,1474761600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Expiring"},{"color":"#ff34f4","data":[[],[1474761600000,1569369600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Exception"}]
});
});

Auto setting time axis range in highcharts

I have a column chart which showing wrong dates :
Here is the fiddle of my code
data: [1432883717000,1432883717000,1433916917000]
All my timestamps belong to October 5th 2015, however the axis starts from 1970. Is there setting for enabling auto determination of time axis range?Is it possible to set point interval etc for this graph?
Set the min for the yAxis:
$(function () {
var series1 = [1432883717000, 1432883717000, 1433916917000];
var series2 = [null, 1433221380470, null];
var min1 = Math.min.apply(null, series1);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [800, 801, 802]
},
yAxis: {
type: 'datetime',
min: min1
},
series: [{
name: 'due by time',
data: series1
}, {
name: 'completed time',
data: series2
}
]
});
});
http://jsfiddle.net/5ft61jkq/43/

Resources