Highcharts issues with date

Highcharts issues with date - highcharts

I have a spline chart where in I am trying to achieve passrate starting today going 30 days back. Basically trying to see growth over period of last 30 days.
However I am seeing the dates mesing up in the x axis and they are going to october /months are added by 1 which means 26th Sep some how shown as 26th OCT.
Here is the JS fiddle: http://jsfiddle.net/Mn6sB/1/
Here is the code for the high chart -
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'spline'
},
title: {
text: 'Pass rate statistics'
},
subtitle: {
text: 'Pass count per'
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'PassCount'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +
'</b><br/> Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/> Pass Count: '+ this.y;
}
},
series: [{name: 'development', data:[[Date.UTC(2013,8,27),10],[Date.UTC(2013,8,28),5],[Date.UTC(2013,8,29),12],[Date.UTC(2013,8,30),12],[Date.UTC(2013,8,31),7],[Date.UTC(2013,9,2),13],[Date.UTC(2013,9,3),22],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,9),7],[Date.UTC(2013,9,10),16],[Date.UTC(2013,9,11),20],[Date.UTC(2013,9,12),11],[Date.UTC(2013,9,13),25],[Date.UTC(2013,9,14),4],[Date.UTC(2013,9,15),11],[Date.UTC(2013,9,16),16],[Date.UTC(2013,9,17),12],[Date.UTC(2013,9,18),22],[Date.UTC(2013,9,19),10],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),40],[Date.UTC(2013,9,25),14],[Date.UTC(2013,9,26),6],]},{name: 'topbr', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,31),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,14),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,26),1],]},{name: 'xxsomething', data:[[Date.UTC(2013,8,28),10],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,1),3],[Date.UTC(2013,9,6),10],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),3],[Date.UTC(2013,9,11),3],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),3],[Date.UTC(2013,9,14),3],[Date.UTC(2013,9,15),3],[Date.UTC(2013,9,16),3],[Date.UTC(2013,9,17),4],[Date.UTC(2013,9,18),42],[Date.UTC(2013,9,19),42],[Date.UTC(2013,9,20),41],[Date.UTC(2013,9,21),16],[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,25),45],[Date.UTC(2013,9,26),2],]},{name: 'xxabcxos', data:[[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,25),1],]},{name: 'xxpqrs', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,29),2],[Date.UTC(2013,8,30),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,15),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,21),2],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,25),1],]},{name: 'xxsomething_th', data:[[Date.UTC(2013,9,1),3],[Date.UTC(2013,9,24),4],]},{name: 'xxpqrs_dev', data:[[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,21),1],]},{name: 'xxrel', data:[[Date.UTC(2013,9,15),1],]},{name: 'xxfun', data:[[Date.UTC(2013,8,28),2],[Date.UTC(2013,9,5),1],]},]
});
});

Month start with 0, not 1 when using Date.
From a js console:
new Date( Date.UTC(2013,1,27) )
Tue Feb 26 2013 19:00:00 GMT-0500 (Eastern Standard Time)
new Date( Date.UTC(2013,0,27) )
Sat Jan 26 2013 19:00:00 GMT-0500 (Eastern Standard Time)

Related

How to control tickInterval of datetime in Highcharts

I'm creating a simple spline chart using highcharts, here xAxis is of type 'datetime' and yAxis has random values between (0 - 100), the timeinterval is exactly one minute between each and every object of series data, i have set minTickInterval as 60000, but whenever the page is loaded the chart has correctly 5 ticks but i'm not able to see tick label
Highcharts.chart('container', {
chart: {
type: 'spline',
zoomType: 'x',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
}
},
time: {
useUTC: false
},
title: {
text: 'usage'
},
xAxis: {
type: 'datetime',
tickInterval: 60000
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#003366'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions:{
series:{
turboThreshold:0
}
},
series: [{
data: [
{x: new Date("Mon Apr 27 2020 11:41:59 GMT+0530 (India Standard Time)"),y: 42},
{x: new Date("Mon Apr 27 2020 11:42:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:43:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:44:59 GMT+0530 (India Standard Time)"),y: 4},
{x: new Date("Mon Apr 27 2020 11:45:59 GMT+0530 (India Standard Time)"),y: 4}
]
}]
});
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Thanks in advance

Highchart ,display time in regular interval

Im trying to display a simple graph with x axis as time and y axis as points.
But, the time values seems to be off a little bit. The distance between 2017-10-06 &&= 2017-10-07 is smaller than 2017-10-10 & 2017-10-11 even though they are at same 1 day gap. How do I fix this?
Here is my code
function generatepointgraph(data) {
// Create the chart
Highcharts.setOptions({
global: {
useUTC: true
}
});
Highcharts.chart('points-container', {
chart: {
type: 'spline'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: 'Weighted pts'
}
},
scrollbar: {
showFull: true
},
rangeSelector: {
enabled: false
},
title: {
text: 'Pts vs time',
},
series: [{
name: 'Points',
data: data,
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
}

Highcharts x axis date format issues

I am trying to build a stacked bar with highcharts. I have some issues regarding the date time format on x axis. see here: http://jsfiddle.net/9y2gnnLy/
I want to add to the x axis an interval of 6 months - which begins with the smallest date and ends with the highest. In addition I want to calculate the duration in tooltip. For example the difference between tow dates: current expiring date - retired date = duration. How can I access the retired date on x axis?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Microsoft Office 2010', 'Microsoft Office 2013', 'Microsoft Office 365']
},
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%b %Y', this.value);
},
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' + '<b>' + this.x +': </b><br/>'+
Highcharts.dateFormat('%b %Y',
new Date(this.y)) + " - "
+ Highcharts.dateFormat('%b %Y',
new Date("Retired Date - How to access the retired date on x axis")) + '<br/><br/><b>Duration: </b>';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Retired',
color: 'rgba(223, 83, 83, .5)',
data: [Date.parse("1/2/2013"), Date.parse("2/3/2014"), Date.parse("3/4/2015")],
dataLabels: {
enabled: true,
format: '{series.name}'
}
}, {
name: 'Expiring',
data: [Date.parse("1/2/2012"), Date.parse("6/3/2013"), Date.parse("8/4/2014")],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: 'Standard',
data: [Date.parse("1/2/2011"), Date.parse("5/3/2012"), Date.parse("4/4/2013")],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: 'Planning',
color: 'rgba(119, 152, 191, .5)',
data: [Date.parse("1/2/2010"), Date.parse("9/3/2011"), Date.parse("5/4/2012")],
dataLabels: {
enabled: true,
format: '{series.name}'
}
}]
});
});
Is it possible to group like this?

You can use columnrange type of your series. With this type of series it will be much simpler to make the chart that you want to have.
You can set ranges in your bars, so they will look like they are stacked. You can use grouped categories plugin for adding more category levels
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
series: [{
name: '1',
data: [
[Date.UTC(2011, 01, 01), Date.UTC(2011, 02, 01)],
[Date.UTC(2011, 01, 02), Date.UTC(2011, 03, 01)],
[Date.UTC(2011, 01, 01), Date.UTC(2011, 06, 01)]
],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}, {
name: '2',
data: [
[Date.UTC(2011, 02, 01), Date.UTC(2011, 03, 01)],
[Date.UTC(2011, 03, 01), Date.UTC(2011, 10, 01)],
[Date.UTC(2011, 06, 01), Date.UTC(2011, 08, 01)]
],
dataLabels: {
enabled: true,
format: "{series.name}"
}
}]
You can move your dataLabels to center of your bar using align: 'center' paramter:
dataLabels: {
enabled: true,
align: 'center',
formatter: function() {
return this.series.name;
}
}
Here you can see an example how it can work:
http://jsfiddle.net/ttrtb6xt/1/

High charts tooltip location issues

I have developed a high chart but having issues with the tooltip location.
It seems it does not refresh properly. When I take mouse it's either stuck or shows the tool tip for the earlier point where I had put the mouse. I am not sure if I am doing something wrong.
Here is a fiddle for you to playaround.
http://jsfiddle.net/Mn6sB/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'spline'
},
title: {
text: 'Pass rate statistics'
},
subtitle: {
text: 'Pass count per xxx'
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'PassCount'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/> Pass Count: '+ this.y;
}
},
series: [{name: 'dev', data:[[Date.UTC(2013,9,25),12],[Date.UTC(2013,9,24),41],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),10],[Date.UTC(2013,9,18),22],[Date.UTC(2013,9,17),12],[Date.UTC(2013,9,16),16],[Date.UTC(2013,9,15),11],[Date.UTC(2013,9,14),4],[Date.UTC(2013,9,13),25],[Date.UTC(2013,9,12),11],[Date.UTC(2013,9,11),20],[Date.UTC(2013,9,10),16],[Date.UTC(2013,9,9),7],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),22],[Date.UTC(2013,9,2),13],[Date.UTC(2013,8,31),7],[Date.UTC(2013,8,30),12],[Date.UTC(2013,8,29),12],[Date.UTC(2013,8,28),5],[Date.UTC(2013,8,27),23],[Date.UTC(2013,8,26),2],]},{name: 'test', data:[[Date.UTC(2013,9,25),24],[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,21),16],[Date.UTC(2013,9,20),41],[Date.UTC(2013,9,19),42],[Date.UTC(2013,9,18),42],[Date.UTC(2013,9,17),4],[Date.UTC(2013,9,16),3],[Date.UTC(2013,9,15),3],[Date.UTC(2013,9,14),3],[Date.UTC(2013,9,13),3],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),3],[Date.UTC(2013,9,9),3],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,6),10],[Date.UTC(2013,9,1),3],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,28),10],]},{name: 'intermediate', data:[[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,21),2],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,15),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),2],[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,27),2],]},{name: 'main', data:[[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,14),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,8,31),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,27),2],]},{name: 'test_th', data:[[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,1),3],]},{name: 'intermediate_dev', data:[[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,13),1],]},{name: 'rel', data:[[Date.UTC(2013,9,15),1],]},{name: 'staging', data:[[Date.UTC(2013,9,6),1],[Date.UTC(2013,8,30),1],]},{name: 'fun', data:[[Date.UTC(2013,9,5),1],[Date.UTC(2013,8,28),2],]},]
});
});

I think that all you need to do is sort your data in ascending x value order. This should sort it out.

Highcharts Date/Time and X-Axis

I am looking for a simple example of how to make the time display in one hour increments for a 24 hour period, a la: 8 AM, 9 AM, etc... along the x-axis. The data to be charted will be as follows [time, meter-reading]. All of my attempts to date have not worked.
Please advise if further details need to be provided.

After playing with an official example and the documentation, I found a way to get intervals every two hours but you can get easily intervals every hour.
Here are the options you have to define in your Highcharts creation:
$(function () {
$('#container').highcharts({
chart: { ... },
title: { ... },
subtitle: { ... },
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
...
},
yAxis: { ... },
tooltip: { ... },
legend: { ... },
plotOptions: { ... },
series: [{
...
pointInterval: 3600 * 1000,
pointStart: Date.UTC(2006, 0, 01, 0, 0, 0, 0),
data: [
...
]
}]
});
});
Playing with the tickInterval, pointInterval and pointStart options, you can obtain what you want.
Here is a live example of what I am talking about: http://jsfiddle.net/FxD58/1/
It works very well if you have 24 values in series (like the 24 hours in a day...)

Develop Reference

ios ruby-on-rails asp.net-mvc docker delphi jenkins grails google-sheets machine-learning dart

Highcharts issues with date - highcharts

Month start with 0, not 1 when using Date. From a js console: new Date( Date.UTC(2013,1,27) ) Tue Feb 26 2013 19:00:00 GMT-0500 (Eastern Standard Time) new Date( Date.UTC(2013,0,27) ) Sat Jan 26 2013 19:00:00 GMT-0500 (Eastern Standard Time)

Related

How to control tickInterval of datetime in Highcharts

Highchart ,display time in regular interval

Highcharts x axis date format issues

High charts tooltip location issues

Highcharts Date/Time and X-Axis

Categories

Resources