I am having a problem with a time series highchart where if the chart contains more than 300 values (starting at 301), if you zoom in, all data disappears. It doesn't matter where or how you zoom in, it always disappears. If the chart is configured exactly the same but with 300 or fewer values, this problem does not occur.
Here are 2 fiddles:
This works:
http://jsfiddle.net/briandemilia/LCYVv/18/
This does not work: (my problem)
http://jsfiddle.net/briandemilia/LCYVv/16/
(the only difference is the drop from 301 values to 300 values)
I thought this solution might work for me:
Highcharts chart going blank on zoomType: 'x' area range zoom?
But it does not solve the problem.
However the solution referenced there (quoted below) might provide some insight as I doubt it is a coincidence that this setting has a default of 300. I don't know what is different about my configuration to make this solution not work though.
area: {
cropThreshold: 500 <- //Vary this. I display 500 points on my chart in
//total and so a value of 500 allows zooming to
//work at all levels. This will vary for you
//depending on how many points you plot.
}
Solution was to set this in the series not in plotoptions, like this:
http://jsfiddle.net/briandemilia/LCYVv/19/
series: [
{ cropThreshold: 9999,
name: 'Unique Employees',
data: [ ......... ]
.........
Related
I am facing a strange problem with highcharts(highstock) datagrouping. I want to show grouped data in week or month and at the same time zoom the chart to a specific period (I am using chart.yAxis[0].min = ). When the width of the overall chart is high and when I set the the zoom level to a short period (say a few months), data is not grouped to the period I specify.
Refer to the fiddle link below. I have specified datagrouping as 'month' ({units:[['month',[1]]], enabled:true}) and yAxis[0].min as 29 Jul 2010. You will observe that data is not grouped in months.
Now try to reduce the width jsfiddle result panel by dragging the divider. When the size of the result area (or the chart) is reduced, datagrouping starts working.
http://jsfiddle.net/amit657/of1mv8yv/2/
Any idea how can I force datagrouping and at the same zoom the chart to show data for a specific period?
To force data grouping set forced in dataGrouping to true.
Example: http://jsfiddle.net/of1mv8yv/4/
...
dataGrouping: {
units: [
['month', [1]]
],
enabled: true,
forced: true
}
...
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
I have a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
I am have noticed an issue with some of our highstock charts, though not all, where when the range selector at the bottom is altered it causes some of the data values to be change and displayed incorrectly.
For example a value of 4 becomes 2, 2 becomes 1, 1 becomes 0.5 etc.
I can use the tooltip value decimals option to make it display the values as only whole numbers as seen below however it still means the data is incorrect as the drawn line does not match the value, my jsfiddle example contains the area spline chart that has the issue where values change from incorrect values to correct values when the initial range is shortened.
http://jsfiddle.net/WNhmn/1/
tooltip: {
valueDecimals : 0
},
Has anyone else run into this problem? Or have any idea as to why it is happening and how it can be stopped?
This is caused by dataGrouping, set enabled: false, to prevent this, see: http://jsfiddle.net/WNhmn/2/
This works just fine:
data: [{x:-90,y:-30,name:'1: blah blah'}]
However I want to change the radius of individual data points based on the amount of votes an item receives, so i do this:
data: [{x:-90,y:-30,name:'1: blah blah',marker:{radius: 5}}]
and the data point disappears? Any idea what's going on here?
So this isn't necessarily solving the problem, but it is a work around.
I changed my y values to all be positive numbers, so instead of going -50 to 50, i'm going 0 to 100 and I will ultimately get the effect on the chart that I desire.