I am using highcharts to draw a stock graph. It start with zero data, then add one data point per minute. after whole day, it fill with 240 data points.
The x axis is fix length, and designed for the whole 240 data points. When the data points have not grow to 240 yet, we want the corresponding part of chart of the missed data to be empty.
I've check the highcharts API, and cannot find options to do that. It looks like all the highcharts demo are filled the chart with data available.
thanks!
In short, you set xAxis.min and xAxis.max.
For example if you have two points in your data:
// January 1st 2015, 00:00 and 00:01
data : [[1420070400000, 3], [1420070460000, 7]]
Then you'd set the min and max to allow space for all the points that will eventually be added:
xAxis: {
min: 1420070400000,
max: 1420070400000 + 86400000 // 60 * 60 * 24 * 1000 added
}
As in this demonstration, which has two points and space for the entire day.
Related
I would like to be set a fixed interval of 2 hours between every tick on the X axis, but also limit the number of ticks on the whole axis to 5, cropping out the extra data if necessary.
Currently I can achieve one or the other, but not both, using the following config :
tickInterval: 2 * 3600 * 1000 // sets the interval between each tick to 2 hours
tickPixelInterval: 100 // sets the number max number of ticks (for the current graph width) to 5
JSFiddle here
Is there a way to achieve both ?
You can set desired range using max or maxPadding properties.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
http://api.highcharts.com/highcharts/xAxis.maxPadding
Examples:
https://jsfiddle.net/vwrpwcq0/ - setting max
https://jsfiddle.net/ztqL9j3g/ - setting maxPadding
I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1
I have a highcharts column chart with an x-axis for an entire year. Its type is datetime and its min/max is from 2014-01-01 to 2014-12-31.
Why is the tick/label for Jan 2015 displayed?
Full source at http://jsfiddle.net/nkjm2691/1/
I tried a number of things like setting the end date to Date.UTC(2014, 11, 31, 23, 59, 59) and experimenting with tickInterval. What I need eventually is a monthly tick (i.e. irregular interval) and the labels centered between the ticks. Using some voodoo logic to calculate the offset only ever works if the chart has a fixed width.
Quite surprisingly doing more or less the same with a chart of type areaspline works fine: http://jsfiddle.net/fm86v8fe/
I also checked a number of related SO questions like Is there a reliable way to have a 1 month auto generated tick interval with high charts? and HighCharts xAxis - tickInterval for month but they don't solve my problem.
You posted this JSFiddle. Just changing from type: 'column' to type: 'line' removes he label. Why?
That is because any chart type that is "column like" has a pointRange. This is defined differently depending on context, but for your datetime x-axis it is (API):
On linear and datetime axes, the range will be computed as the distance between the two closest data points.
It is this pointRange that causes your column to have their specific width. They have a span across the x-axis. As you can see on your chart each column has a range of a week, not just a single millisecond (which is the case for line-charts, and similar).
From my understanding this causes Highcharts to take some extra space to somehow better suit the point range of the chart points.
There are several things you can do. You can manually override the pointRange like this:
series: { pointRange: 1, data: ... }
This will make each column only 1 millisecond thick, and removes the label. You can fix the width with pointWidth:
series: { pointRange: 1, pointWidth: 10, data: ... }
Note however that this is static, so if columns suddenly get too close they'll start overlapping. Here's a JSFiddle demonstration.
Also you could do nothing and just set the max to be far enough back in time for pointRange not to include too much extra space, like this:
xAxis: { min : Date.UTC(2014, 0, 1), max : Date.UTC(2014, 11, 28) }
Note here that Highcharts seems to add more space once you go over to the 29th of December. Unfortunately I'm not exactly sure how this spacing is chosen (the 29th is a Monday..?).
Sebastian suggested some solutions that don't involve this type of manipulation at all. The chosen "solution" depends on the other requirements and desired behavior of the chart.
Set a max date as 1.12, remove time and set maxPadding as 0 value. In case when you use a tiem (23:59:59) tick Interval cannot be calculated properly. Second solution is using tickPositioner
https://jsfiddle.net/nkjm2691/50/
I want my chart to have a "fixed zoom" on y-axis on certain interval. I don't know if that's a right way to describe it, but I'll give you an example.
This is how my chart looks like right now:
While I'm fine with my x-axis (hours) generating automatically, I want my y-axis not based on series (now it's 8k, 10k. 12k etc - so thats 2k interval), but on fixed value, for example 5k (5k, 10k, ... up to 50k)
Found the solution! It's yAxis.tickInterval.
chart = new Highcharts.Chart
yAxis:
tickInterval: 5000
Coffeescript Above.
I have a chart that I would like to display based on a date range from the user. This particular chart has a data point for every 15 minutes. So there can be a lot of data points for each series if a users selects a large date range. Here is a couple of examples:
623 data points in a series
1470 data points in a series
In the first example the chart does display. In the second example the chart does not display. There is a Highstock demo (52,000 points with data grouping) that works with a lot of data points. I have tried to change the above charts to a highstock chart and still have the same results.
What can I do to fix this?
This is due to the turbo threshold option:
"When a series contains a data array that is longer than this, only one
dimensional arrays of numbers, or two dimensional arrays with x and y
values are allowed. Also, only the first point is tested, and the rest
are assumed to be the same format. This saves expensive data checking
and indexing in long series."
It is set to 1000 points by default. Your chart is not rendering because each point in your series is an object and their number is greater than the threshold.
Here's a jfFiddle demonstrating your plot working with the threshold set to 2000.
Here's the modified section of code:
plotOptions: {
spline: {
turboThreshold: 2000,
...
Another solution would be to encode your series data in a 2-d array instead of having each point represented by and object with x-y properties.
a workaround for turboThreshhold is something like this if you generation your response with PHP:
if(count($responseObj) > 1000){
$modolo = round(count($responseObj) / 1000);
for($i = count($responseObj)-1; $i >= 0 ; $i--){
if(($i % $modolo) != 0){
unset ($responseObj[$i]);
}
}
$responseObj = array_merge($responseObj);
}