Highcharts : barchart - highcharts

Question

I have a barchart with many years in the x-axis. I want to select the years. Here we have the opportunity to do this in 2 ways: either with a click-and-drag, either with sliders.
I have two problems.
The first concerns the click-and-drag: When I select the extreme years, then appear two years, and not only those selected. For example, if I select "1960" then appears 1960 and 1961. Same if I select 2016 shows 2015 and 2016.
The second problem concerns the sliders. If both sliders are to the same value, then there is a problem. For example, if my two sliders are on 1998, the graph shows the years 2015 and 2016. If they are both on 1966, the graph displays the years 1994 and 1995.
Here is my code HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<div style="margin: 20px 0px 0px 60px">
<!--
The "oninput" attribute is automatically showing the value of the slider on load and whenever the user changes the value.
Since we are using a category x-axis, the values are between 0 and 12. For this example, I'm adding your base year (2004)
to the output value so it shows a label that's meaningful to the user. To expand this example to more years, set your max value
to the appropriate value and the base year to wherever you plan to start your chart's data.
-->
<form oninput="output1.value=parseInt(slider1.value)+1960;output2.value=parseInt(slider2.value)+1960">
<input type="range" name="slider1" class="mySlider" min="0" max="56" value="0" />
<output name="output1" id="output1" for="slider1" style="font-size:10px;padding-top:0px;text-align:left">1960</output>
<br />
<input type="range" name="slider2" class="mySlider" min="0" max="56" value="56" />
<output name="output2" id="output2" for="slider2" style="font-size:10px;padding-top:0px;text-align:right">2016</output>
</form>
</div>
Here is my code JavaScript :
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
enabled:false
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
Look at in : https://jsfiddle.net/uvat8u05/13/
How to solve these two problems please?
Thank you

Answer 1

Highcharts are expecting int values for setExtremes() method. So you should get the value of sliders;
$('input[name="slider1"]').val();
Then parse this value to int;
parseInt($('input[name="slider1"]').val());
Here I fixed it for you: jsFiddle