How to show dates in xAxis using Highcharts.js - highcharts

I'm feeding my Highcharts.js series object with data containing date and a number, for example: ["2017-1-22",262] which shows up correctly when hovering a point, but which is not displayed correctly in the xAxis. Below codes does not do much, probably because the date format is not what Highcharts expects? But what format is expected? Unixtime does not seem to work.
xAxis: {
type: 'datetime'
}
https://jsfiddle.net/80v2k0tv/

Highcharts expects time in the form of milliseconds since 1970.
See for example: https://api.highcharts.com/highcharts/series.line.data.x
The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.
Unixtime is in seconds, so using unixtime * 1000 will give the correct highcharts time.

Related

Convert string timestamp mm/dd/yy hh:mm:ss to a date/time type in google sheets

Row 1: cell A is a concat of the date in B and the time in C. I generate these with CTRL+: and CTRL+SHIFT+: respectively. Google sheets does not treat this like a timestamp on the x axis of charts
Row 2: I discovered CTRL+ALT+SHIFT+: to do a full timestamp, now it has a real timestamp
The issue is, I have many rows of recorded data of the type in Row 1 -- is there any way to convert this into a 'time' format that Google Sheets will respect on the x-axis of charts? Using VALUE() just gives the date portion of the timestamp.
Kind of crazy how much trouble this is causing me, is there really no date_parse(string_format) type function I can call?
EDIT:
this is ridiculous, just going to export and use python
instead VALUE use TIMEVALUE and then format it internally to time
or:
=TEXT(TIMEVALUE(A1); "hh:mm:ss")
for arrayformula:
=ARRAYFORMULA(IF(A1:A="",,TEXT(TIMEVALUE(A1:A); "hh:mm:ss")))
for timestamp > date use DATEVALUE

Format used for date in Highcharts - Line with markers chart type

What kind of format has the date been converted to in
https://www.highcharts.com/stock/demo/line-markers?
I am generating data but I need to convert the data into this format, strtotime doesn't seem to do the trick.
You just need to multiply by 1000 the PHP timestamp to have a javascript timestamp
var jsTimestamp = 1545055048 * 1000
Highcharts documentation:
For datetime axes, the X value is the timestamp in milliseconds since
1970.
datetime axes data format:
[
x value, - timestamp in milliseconds since 1970
y value
]

Converting Date to "/Date(631148400000+0100)/" string in Swift

I need to convert Swift Date object to date ticks string like "/Date(631148400000+0100)/".
The following link tells me how to convert date ticks string to Date object but not the vice-versa:
How to convert date like \/Date(1440156888750-0700)\/ to something that Swift can handle?
How can I do that?
Thanks in advance.
From Stand-Alone JSON Serialization:
DateTime values appear as JSON strings in the form of "/Date(700000+0500)/", where the first number (700000 in the example provided) is the number of milliseconds in the GMT time zone, regular (non-daylight savings) time since midnight, January 1, 1970. The number may be negative to represent earlier times. The part that consists of "+0500" in the example is optional and indicates that the time is of the Local kind - that is, should be converted to the local time zone on deserialization. If it is absent, the time is deserialized as Utc. The actual number ("0500" in this example) and its sign (+ or -) are ignored.
And from Use JSON.NET to parse json date of format Date(epochTime-offset)
... In this screwy format, the timestamp portion is still based solely on UTC. The offset is extra information. It doesn't change the timestamp. You can give a different offset, or omit it entirely and it's still the same moment in time.
So the number of ticks is the number of milliseconds since Januar 1, 1970 GMT. Adding a time zone specification would only change how the
date is presented locally in .NET, and one can simply omit that part
when generating a JSON date string:
extension Date {
var jsonDate: String {
let ticks = lround(timeIntervalSince1970 * 1000)
return "/Date(\(ticks))/"
}
}
Example:
print(Date().jsonDate) // /Date(1481446227993)/

Category chart with datetime y axis in highcharts

I am rendering a category chart with time on the y-axis. This chart will show the completed time for each ticket.
`` http://jsfiddle.net/6oz3075d/14/
However, I am unable to show the date and time in DD:MM:YY format. Also the interval is in years. I tried using dateTimeFormat,tickInterval etc. Nothing seems to help.
You can use formatter and Highcharts.dateFormat
labels:{
formatter:function(){
return Highcharts.dateFormat('%d:%m:%Y', this.value);
}
},
http://jsfiddle.net/6oz3075d/15/

highstock Plotbands to mark certain Daytimes on X Axis

Im trying to mark certain Day Times on my Chart - iE: 15:00 - 21:00
The Date information comes in form of a timestamp - "1365362890000" for example.
Is there any convenient way to say start from time X and go until time Y?
Else I would probs need to loop through all the times to find start/end points.
The timeframe can be anything from a day to a month.
(The plotBands themselves are working for me - just looking if there might be a better way then looping through all the data)
Edit: I meant something like you see in my picture here - its working like this and all is fine. Im just wondering if there was a simple way to say - "mark time x to time y with color z" instead of doing "by hand".
Yes, plotBands have a #from and #to property. Just use the #from and #to of the converted datetime (i.e. the unix time * 1000)
$('#container').highcharts('StockChart', {
xAxis: {
plotBands: [
{
from: 1374658200000,
to: 1374681600000,
color: "rgba(68, 170, 213, .2)"
}
]
}
});
In the xAxis you can set min value and tickInterval.
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.min (should be timestamp too)
Also you can define pointStart for serie: http://api.highcharts.com/highcharts#plotOptions.series.pointStart and pointInterval http://api.highcharts.com/highcharts#plotOptions.series.pointInterval

Resources