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
Related
Current implementation:
Desired implementation:
If you look carefully there is a vertical line connecting threshold with the first point of my displayed chart. Any ideas how to implement it ? What I thought was to get the threshold price (got it)and find a way to insert it a starting point, but I struggle a bit (since i use unix timestamp).Thanks in advance !
I parse the data from Monday to Friday, but I only display Intraday's data (let's say I am o Friday now). So the threshold will be the closing price from Thursday.
You are right. Inserting a starting point seems to be the best solution for that. You can do it as below:
const threshold = 10;
const data = [
[20, 11],
...
];
data.unshift([data[0][0], threshold]);
Highcharts.chart('container', {
series: [{
type: 'area',
threshold,
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/7ynzhmuv/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
I want to use https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.dateTimeLabelFormats
to specify the tooltips for my datagroupings. But when I group a timeseries of 1-minute data in 15 minutes, I have data points of 00:00, 00:01, ..., 00:14 that will be grouped.
My label is now 00:00-00:14, but it makes more sense to display this as 00:00-00:15. How can I achieve this customization of the format of these timegroups?
Thank you for more information and clarification for the case. It is impossible to change it from the API options because in the core code this 1 minute is subtracted from the end value.
if (xDateFormatEnd) {
formattedKey += time.dateFormat(xDateFormatEnd, labelConfig.key + currentDataGrouping.totalRange - 1);
}
Reassigning this method without this subtracting works as you expect: https://jsfiddle.net/BlackLabel/ba6qe9o4/
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.
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/
I have this fiddle which enables you to get the selected period of time using the afterSetExtremes() event.
My problem is figuring out how to get a sum of the y-axis data for selected period.
I see that in the event object via target > series > data you can get the currently selected points and then loop through them getting a sum of the total, however it seems a bit of an unwieldy method and I was wondering if there was a quick simple API function which would give you this data a little more cleanly?
Edit - found an example of how to do this by the original author so presume there is no other way.
Thanks,
http://jsfiddle.net/L3rych99/1/
xAxis:{
events: {
afterSetExtremes:function(event){
var start_date = new Date(event.min);
var end_date = new Date(event.max);
//console.log(event)
//console.log(start_date + ' ' + end_date);
//how to get sum of y-axis data between start and end data?
},
},
},