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.
Related
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.
I was using these multipliers to display months and it actually works fine if I have less points but once I have a more points its just messed up the whole chart..Here is what happened I have 2 X-Axis 1) to display just dates while the other one which is opposite to that x-axis displays Month with Year. This is their requirement so I cant change.
Days wise I use to every other 3 days using (3*24*3600*1000) interval so it work but when I use (30 * 24 * 3600 * 1000) to display months it creates a mess. So let say I have March data point if I see bottom xaxis it looks fine but the month one is way off
I have tried almost all the possible solutions but nothing works out. Any Quick Help will be highly appreciable
My weather station collects every 15 minutes the current temperature. With Highcharts I created a chart to display the last 24h. So I pass all the 96 quarter-hourly values to the chart. This looks not so pretty. Instead I would just display the average of each hour.
Is it possible to display the average value for each hour based on a series of quarter-hourly values and leaving the calculation to Highcharts and not doing it myself?
You can use highstock which allows to use datagrouping.
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
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