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
Related
Is there a way to create an empty point for the dates which are not included in the data?
Tried to use pointInterval: 24*3600*1000, but doesn't have any result.
In this example we have a gap between 31th July and 7th August which I would like to fill with empty points.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/candlestick/
You need to set ordinal: false as an option on the xAxis. Like this:
xAxis: {
ordinal: false
}
API on xAxis.ordinal: https://api.highcharts.com/highstock/xAxis.ordinal
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Defaults to true.
Working example: http://jsfiddle.net/phLz68r9/
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.
My case: Plot a stockchart with stock data for 5 days without weekends displaying, each day should have equal space even though data can be irregular.
What i need to do is plot an xAxis with static intervals of one day, however i cant display weekends and the data can be very irregular between the days. I've tried tinkering with tickInterval, tickPositioner but so far no luck.
I can hide weekends with:
ordinal: true,
My current fiddle:
http://jsfiddle.net/svedino/h9448fk0/1/
Setting the ordinal to false gives me correct interval but with the weekends included.
An example of this kind of graph seems to be working can be found here:
https://www.avanza.se/aktier/om-aktien.html/229675/jays
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.