I am using highstock control and I want to set a custom highlighted date range for a control via js. Example of task: load data for a week to control and highlight only data for last day since 16:00
I tried using this code when initializing chart control:
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}],
selected: 0
}
But this code highlights whole timespan for last 24 hours, while I need to highlight last day from 16:00. How can I set this custom date?
Instead of using rangeSelector, use min and max for xAxis, for example:
xAxis: {
min: Date.UTC(2013, 6, 17, 16, 00), //previous day at 16.00
max: new Date().getTime() //get actual time
}
Related
I am currently working on a specific type of chart and I am trying to achieve the following behavior for example :
As you can see there's a gap between the series last point and the xAxis max value and the reason for this is i wanna have a fix max value and load the daily values of a specific currency as the day passes by. So for example in the morning this chart would be empty and by 18:30 it would be filled.
In my mock example i have the current chart:
and when I try to set a new xAxis max value ( i also tried softMax) to a future day (using epoch converter for unixtimestamp) i am getting this:
and i set the max by doing :
return {
endOnTick: false,
max:1631962355,
tickLength: 2,
gridLineColor: '#b9b9b9',
gridLineWidth: 0,
tickColor: '#808080',
labels: {
style: {
color: '#b9b9b9',
},
x: 0,
y: 12,
format: '{value:%d.%b}',
},
visible: true,
};
}
UPDATE
After implementing your response I get an even weirder behavior. I get the same initial start I had before (no difference) but now if i click and drag it to the right I go from this :
to this:
and If i click and drag it to the left, into this:
The transformation happens without animation, neither by wathching the drag and move motion happen. It just instantly transforms after i drag my cursor pointer for a while towards the sides i mentioned above
You need to use milliseconds instead of seconds:
xAxis: {
max: 1631962355000,
...
}
Live demo: https://jsfiddle.net/BlackLabel/herncjL5/
API Reference: https://api.highcharts.com/highstock/xAxis.max
I want to set Xaxis value to start from midnight i.e 00:00 on selecting any range selector button in highcharts i.e 1D/1W/3M/6M/ALL. The leftmost point of xaxis should start from last one month/week/.. date plus 00:00 time for any button but by default it shows last one month/week/.. date plus time which starts from current time i.e 18:30 (for example).
series: [
{
'name': '', 'data': [[]], 'type': 'line',
pointStart: Date.UTC(this.curDate.getUTCFullYear(), this.curDate.getUTCMonth(), this.curDate.getUTCDate()),
}
],
I've implemented a Gantt chart that contains some Gantt long bars and their time period is usually more than a couple of months, moreover, the xAxis of the chart shows years and months as you can see below gif. XAxis's tick-interval should change automatically when I change the range of the Gantt period, but it doesn't!
The desired way is that if I change the time range to a month or smaller, xAxis's tick-interval should change to month/week or month/day.
xAxis: {
maxPadding: 0,
max: Date.UTC(2024, 07, 16),
plotLines: [
// some lines
]
}
Ticks on the xAxis are calculated based on the provided data.
When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the afterSetExtremes function with the use of the update method.
Inside you might specify some conditions like for example visible range.
events: {
afterSetExtremes: function(e) {
if (this.chart.xAxis[1].max - this.chart.xAxis[1].min < 36e8) {
this.update({
tickInterval: 36e7
})
} else {
this.update({
tickInterval: undefined
})
this.chart.xAxis[1].update({
tickInterval: undefined
})
}
}
}
API:
https://api.highcharts.com/gantt/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Live demo: https://jsfiddle.net/BlackLabel/9poc65fn/
We are working on creating a stock chart showing several items even counts and their relative per cent change over time. The data is monthly and we have a range selector set up to allow for 6 months, 9 months, 1 year, and all data. On initial load we are selecting the 6 month range. We are noticing some strange effects. Here is a sample jsFiddle representing the issues:
http://jsfiddle.net/wergeld/wq7eavq4/
The rangeSelector code:
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: false,
buttons: [{
type: 'month',
count: 6,
text: '6 Months'
}, {
type: 'month',
count: 9,
text: '9 Months'
}, {
type: 'year',
count: 1,
text: 'Year'
}, {
type: 'all',
text: 'All'
}],
buttonTheme: {
width: 60
},
selected: 0
},
1) On initial load the 0% "start" occurs in the October 2014 data points and the relative per cent change is calculated from this point. However, the first point shown in the chart is actually September 2014. This has some per cent change from (I am guessing) October 2014.
2) When we change the selection to the 9 month range selector we see that the first point for June 2014 is the 0% value. Then if we click back to the 6 month range selector value you can see that now we have September 2014 as the 0% and the per cent differences for the later times are all different than on initial load.
My questions are:
a. Why are there 7 months shown when I set the count for that rangeSelector to 6 and why are there 10 months shown when I have it set to 9 months for the other range selector? Essentially for a given rangeSelector.count I am getting 1 more than I expect.
b. Why is the 0% point different on initial load than it is when I click out of that range and back into that range?
This is related to two bugs:
#966
#4147
And it's caused by setting extremes in core before chart is fully rendered. Possible workaround is to abandon selected option and create your own option to handle this: http://jsfiddle.net/wq7eavq4/6/
chart: {
events: {
load: function () {
var selected = this.options.rangeSelector.selectedAfter,
undefined;
if (selected !== undefined) this.rangeSelector.clickButton(selected, true); //set when defined
}
}
},
rangeSelector: {
selectedAfter: 1 // custom param
},
The only downside is missing initial animation.
First, for some reason I can't seem to get the yAxis to tickInterval on the 1st and 15th of each month.
Second, none of the data is correct. If you check out the series data and where the bars are on the graph there is some kind of monthly padding going on. Even the tooltip has the wrong dates.
ref: http://jsfiddle.net/no1uknow/5hnBP/12/
yAxis: {
title: '',
type: 'datetime',
min: Date.UTC(2014, 9, 1),
max: Date.UTC(2014, 12, 31),
tickInterval: 1000 * 60 * 60 * 24 * 14, // two weeks
//ticks: ['2014-10-01','2014-10-15','2014-11-01','2014-11-15','2014-12-01','2014-12-15','2015-01-01'],
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b-%Y', this.value);
}
}
}
1) There is no one interval that will give you the 1st and 15th of every month, as the months are all different lengths, and the distance from 1->15 and that from 15->1 are not the same.
In order to have ticks at those specific dates, you will need to use the tickPositions setting, and provide an array with the epoch time stamp (in millisecods) of each date at which you want a tick (or the Date.UTC object).
tickPositions reference: http://api.highcharts.com/highcharts#xAxis.tickPositions
epoch time reference: http://www.epochconverter.com/
2) The bars and tooltips are displaying exactly correctly. Remember that in javascript, months start at 0 - so 10 is November, not October.
Thank jlbriggs you got me going the right direction.
If anyone is interested here is the solution I needed.
http://jsfiddle.net/5hnBP/15/
yAxis: {
title: '',
type: 'datetime',
min: 1409544000000, // Date.UTC(2014, 9, 1),
max: 1418619600000, // Date.UTC(2014, 1, 31),
tickPositions:
[1409544000000,1410753600000,1412136000000,1413345600000,1414814400000,1416027600000,1417410000000,1418619600000,1420088400000],
labels: {
format: '{value:%d-%b-%Y}'
}
}