I have a highstock chart with it's navigator.
I want to restrict the navigator range and not letting the user to get the range smaller than a year.
I have a years scale.
How can I do that?
Finally I set the property tickInterval to one year in milliseconds - 1000*3600*24*356.
You could set minRange in xAxis to one year in milliseconds - 1000*3600*24*356.
Related
im using highcharts for reports the x-axis
type:datetime and tickinterval:23 * 24 * 3600 * 1000
, i have another dropdown where in
i can select the CurrentYear,Past 30 days,Previous Month, Current Month,Past 7 days, Previous week , CurrentWeek report the data comes
according to the selected value for CurrentYear the x-axis shows values jul'13,Aug'13,Sep'13...Mar'14 which is right since the tickinterval
is 1 month , but as soon as i select the one week report / current week report x-axis shows no point on it..i want atleast two point on
the x-axis. i thought of using min and max for the same but can't use since the values of min and max will change according to the
weeks.so is there any logic that will make my x-axis value constant to say 6 values or 5values of dates
In general, instead of setting tickInterval, try to set tickPixelInterval - Highcharts will try to fix tick positions to fit pixel interval between them. It won't be exactly the same distance as you set in tickPixelInterval but something really close.
You have also another solution, when you set new data from dropdown you can also call: chart.xAxis.update({ tickInterval: newvalue }) so for each dropdown value, you can set new interval, which workaround your issue.
I am populating a High Charts Stock chart. This chart shows both the data points on the y-axis as well as a zoom in/out view at bottom. The data points display fine.
My problem is with the x-axis: I cannot get the years in the x-axis or the zoom to correspond with the years in the data points, that is, 1831 - 2014; instead, the zoom feature and the x-axis only go up to the 1990s (as opposed to this year.)
I think the problem lies in how the pointinterval is calculated
pointInterval: 24 * 3600 * 1000000 // one day
Here is a fiddle:
http://jsfiddle.net/8HLCF/
Thanks for reading.
Highstock options reference for pointInterval:
pointInterval: Number
If no x values are given for the points in a series, pointInterval defines the interval of the x values in milliseconds. For example, if a series contains one value each day, set pointInterval to 24 * 3600 * 1000.
You have defined x values. There is no need to use pointInterval. And additionaly your comment is wrong, you defined 1000 days instead of 1 day.
Default buttons for rangeSelector are not much useful for your data. I defined new range selector for 1y, 5y and All.
And it seems that data format is wrong. I change years to returns primitive value of Date object. See MDN docs for Date
Updated jsfiddle example
Need to display area chart in with highstocks for 1 day,1 week,1 month,6 month,1year and 5 years providing the data at once for all the 5 years.But in case of day it is displaying date with time on x-axis which is not required.How can this date be removed as only time is to be displayed (Eg 9 10 11 ....4 5)
Many thanks in advance.
You can use tickPositioner which allows to set tick, dynamically, based on your data and function.
http://api.highcharts.com/highstock#xAxis.tickPositioner
I am trying to make a chart using Highcharts which shows no of days in the x-axis if the chart is for a week or month.
Now i want to split the x-axis by "hours" if the chart is for single day.
See the fiddle here
var checkin_failures_stats = {
xAxis: {
type: 'datetime'
},
You need to use tickPositioner and calculate your ticks dynamically.
http://api.highcharts.com/highcharts#xAxis.tickPositioner
It sounds like you just need to look at the tickInterval property:
http://api.highcharts.com/highcharts#xAxis.tickInterval
You'll need to know the time span of your chart - you can either specify this directly, or you can get the min and max values from the getExtremes function, and calculate the length of the time of the chart, and set your tickInterval accordingly.
http://api.highcharts.com/highcharts#Axis.getExtremes
I am trying to use the highstock graph. I want to update the xAxis labels according to the range which is selected from the rangeselector. eg. if it's a 1-year graph, i want the ticks to be at the end of each month with labels as Jan-12,Feb-12 etc.(by default it shows each month as the beginning of that month). And if it's a monthly graph i want the labels to be positioned at each friday ie. at an interval of 7 days.
Is there a way i can dynamically change which labels are displayed on the axis based on the extremes?
You can use tickPositioner (http://api.highcharts.com/highcharts#xAxis.tickPositioner) or formatter to change labels name http://api.highcharts.com/highcharts#xAxis.labels.formatter