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?
},
},
},
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/
Chart not show due to change over the frequency time of one every second. Display - shows a timeline display error start date more than end date & date overlapping.
reg = error , green&yellow = normal
Image: http://i.stack.imgur.com/eDkRq.jpg
In your fiddle, you are getting this error "Error: Highcharts error #17: www.highcharts.com/errors/17" which means that "The requested series type does not exist". Can you check your series data.
You should define the minPointLength parameter
plotOptions:{
series:{
minPointLength: 10
}
}
fiddle - http://jsfiddle.net/z8fw7/
When I hover over the column I can see this weird big number, where is it coming from.
If I add one more date entry. e.g
[Date.UTC(2010,2,31), 28.84],
[Date.UTC(2011,2,31), 28.84],
[Date.UTC(2012,2,31), 32.65]
The tooltip then displays the proper year value as expected. It works flawlessly with 3 data values while it does not work with 2 data values. How can I make sure that it works with even 2 data values.
Looks like a bug in Highcharts with 2 data points when using the pointFormat. I suggest using the more customizable formatter function.
So in your option for configuring the tooltip, use this:
tooltip: {
formatter: function() {
var date = new Date(this.x);
var year = date.getFullYear();
return year + '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y + '%';
},
}
Works fine with the 2 data points or 3, etc. See: http://jsfiddle.net/UqbKQ/
the value you are seeing is the timestamp of the data point from the x axis.
This formatting (or lack thereof) seems like a bug to me...
I don't see an obvious answer except to use the formatter function to fully customize the tooltip display.
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