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/
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
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: [ ......... ]
.........
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
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]]}]
});
});
We are facing issue in wind rose chart when displaying real data. The data values range from very small (100) to very large (1000000000). On rendering the data set in wind rose chart, as the max length has to be set according to the highest value, the smaller values are not visible.
As a workaround to this, we planned to restrict the length of the bars/ spikes in the chart to say 10px so that all the values are visible. But couldn't find a way to do so. In bar chart we can use minPointLength property.
Can anyone provide any help on how to restrict the length of bars or any other workaround for this?
Thanks in advance.
Use type: 'logarithmic' axis, see: http://jsfiddle.net/3pEbJ/
Thanks a lot. It worked in our case. Would like to add few points for the modifications required for using this property.
1. On using “type: 'logarithmic'” property, if the data series contains value 0 for any value, JavaScript will throw error #10 ‘Can't plot zero or subzero values on a logarithmic axis’. To avoid this error you need to change the zero value to some non-zero value. This scenario occurs for stacked series.
2. Providing non-zero value will render that value in tooltip also. So as a workaround, we can provide the non-zero value like 0.00001. This way it will display value 0 in the tooltip for that series and also the corresponding bar would be very small.