I need to add a slider to my line chart that will allow user to jump to the particular dates on the x-axis. I have a slider already added to the chart but it doesn't work properly for some reason and I can't figure out what is the issue. Can someone please help?
https://jsfiddle.net/samwhite/t5sabeyv/1/
afterSetExtremes: function(e) {
$("#slider-range").slider("values", 0, 1975 e.min);
$("#slider-range").slider("values", 1, 1975 e.max);
$("#year").val(Math.round(e.min 1975)
" - " Math.round(e.max 1975));
}
$("#slider-range").slider({
range: true,
min: 1975,
max: 2020,
values: [1975, 2020],
slide: function(event, ui) {
$("#year").val(ui.values[0] " - " ui.values[1]);
chart.xAxis[0].setExtremes(ui.values[0] - 1975, ui.values[1] - 1975)
}
});
$("#year").val($("#slider-range").slider("values", 0)
" - " $("#slider-range").slider("values", 1));
Here is an example of the same behavior that I am trying to achieve https://jsfiddle.net/uvat8u05/27/
Any help would be appreciate it.
CodePudding user response：
You need to use Date.UTC to set new interval inside your chart .So , you can update your code inside slider function i.e :
slide: function(event, ui) {
$("#amount").val(ui.values[0] " - " ui.values[1]);
chart.xAxis[0].setExtremes(Date.UTC(ui.values[0] ,0,1),Date.UTC(ui.values[1] ,0,1) )
}
Then , you where getting error chart is not defined so i have use this.axis.chart to access series and tooltip .
Working Code :
$(function() {
let result = {
"data": [
[31536000000.0, 63.4],
[34214400000.0, 63.6],
[36633600000.0, 62.0],
[39312000000.0, 60.8],
[41904000000.0, 60.2],
[44582400000.0, 63.0],
[47174400000.0, 59.6],
[49852800000.0, 51.3],
[52531200000.0, 46.5],
[55123200000.0, 44.4],
[57801600000.0, 43.2],
[60393600000.0, 50.2],
[63072000000.0, 48.9],
[65750400000.0, 48.0],
[68256000000.0, 48.9],
[70934400000.0, 49.9],
[73526400000.0, 51.1],
[76204800000.0, 50.7],
[78796800000.0, 51.7],
[81475200000.0, 51.4],
[84153600000.0, 55.4],
[86745600000.0, 50.7],
[89424000000.0, 52.2],
[92016000000.0, 66.0],
[94694400000.0, 63.2],
[97372800000.0, 64.7],
[99792000000.0, 62.6],
[102470400000.0, 66.0],
[105062400000.0, 81.9],
[128908800000.0, 121.3],
[131328000000.0, 119.9],
[134006400000.0, 105.8],
[136598400000.0, 107.6],
[139276800000.0, 115.0],
[141868800000.0, 126.9],
[144547200000.0, 150.0],
[147225600000.0, 139.3],
[149817600000.0, 150.5],
[152496000000.0, 142.2],
[155088000000.0, 142.8],
[157766400000.0, 132.3],
[160444800000.0, 123.6],
[162864000000.0, 116.4],
[165542400000.0, 113.3],
[233971200000.0, 88.3],
[236563200000.0, 81.6],
[239241600000.0, 73.2],
[241920000000.0, 73.0],
[244512000000.0, 71.8],
[247190400000.0, 84.3],
[249782400000.0, 87.3],
[252460800000.0, 87.3],
[255139200000.0, 87.7],
[257558400000.0, 93.5],
[260236800000.0, 102.0],
[262828800000.0, 100.6],
[265507200000.0, 99.9],
[268099200000.0, 92.7],
[270777600000.0, 88.3],
[273456000000.0, 85.3],
[276048000000.0, 87.5],
[278726400000.0, 90.1],
[281318400000.0, 88.9],
[283996800000.0, 90.1],
[286675200000.0, 92.9],
[289094400000.0, 94.5],
[291772800000.0, 100.2],
[294364800000.0, 104.2],
[297043200000.0, 106.6],
[299635200000.0, 121.3],
[302313600000.0, 113.0],
[304992000000.0, 109.3],
[307584000000.0, 111.4],
[336614400000.0, 138.1],
[339206400000.0, 137.6],
[341884800000.0, 132.8],
[344476800000.0, 136.8],
[347155200000.0, 142.8],
[349833600000.0, 137.9],
[352252800000.0, 136.7],
[354931200000.0, 138.0],
[357523200000.0, 135.9],
[360201600000.0, 136.7],
[362793600000.0, 139.6],
[365472000000.0, 127.0],
[368150400000.0, 110.2],
[370742400000.0, 106.8],
[373420800000.0, 102.2],
[376012800000.0, 96.3],
[378691200000.0, 104.8],
[381369600000.0, 103.9],
[383788800000.0, 104.7],
[386467200000.0, 106.8],
[389059200000.0, 110.2],
[391737600000.0, 108.9],
[394329600000.0, 106.8],
[397008000000.0, 97.2],
[399686400000.0, 83.7],
[402278400000.0, 82.9],
[404956800000.0, 94.1],
[407548800000.0, 95.9],
[410227200000.0, 98.7],
[412905600000.0, 111.7],
[415324800000.0, 115.8],
[418003200000.0, 127.1],
[420595200000.0, 128.6],
[423273600000.0, 130.9],
[425865600000.0, 130.6],
[428544000000.0, 141.8],
[431222400000.0, 141.1],
[578448000000.0, 81.3],
[581126400000.0, 102.4],
[583718400000.0, 115.5],
[586396800000.0, 113.4],
[589075200000.0, 112.8],
[591667200000.0, 114.4],
[594345600000.0, 104.2],
[596937600000.0, 106.4],
[599616000000.0, 113.0],
[602294400000.0, 108.7],
[604713600000.0, 111.6],
[607392000000.0, 106.9],
[609984000000.0, 111.1],
[612662400000.0, 103.1],
[615254400000.0, 102.4],
[617932800000.0, 94.8],
[620611200000.0, 94.7],
[623203200000.0, 91.8],
[625881600000.0, 95.9],
[628473600000.0, 94.2],
[631152000000.0, 93.9],
[633830400000.0, 96.9],
[636249600000.0, 99.2],
[638928000000.0, 108.8],
[641520000000.0, 113.5],
[644198400000.0, 116.4],
[646790400000.0, 112.6],
[649468800000.0, 100.2],
[652147200000.0, 94.9],
[654739200000.0, 90.8],
[873072000000.0, 106.2],
[875664000000.0, 109.5],
[878342400000.0, 106.7],
[880934400000.0, 107.9],
[883612800000.0, 106.3],
[886291200000.0, 106.7],
[888710400000.0, 109.2],
[891388800000.0, 98.4],
[893980800000.0, 96.7],
[896659200000.0, 92.4],
[899251200000.0, 89.8],
[901929600000.0, 80.2],
[904608000000.0, 72.5],
[907200000000.0, 80.5],
[909878400000.0, 84.1],
[912470400000.0, 83.6],
[915148800000.0, 83.7],
[917827200000.0, 84.5],
[920246400000.0, 84.7],
[922924800000.0, 83.2],
[925516800000.0, 85.5],
[928195200000.0, 81.7],
[930787200000.0, 67.3],
[933465600000.0, 79.2],
[936144000000.0, 72.7],
[938736000000.0, 68.7],
[941414400000.0, 74.4],
[944006400000.0, 73.2],
[946684800000.0, 77.1],
[949363200000.0, 82.8],
[951868800000.0, 87.8],
[954547200000.0, 83.6],
[957139200000.0, 87.7],
[959817600000.0, 76.1],
[962409600000.0, 65.3],
[965088000000.0, 61.7],
[967766400000.0, 65.5],
[970358400000.0, 71.9],
[973036800000.0, 78.3],
[975628800000.0, 78.9],
[978307200000.0, 83.8],
[980985600000.0, 77.2],
[983404800000.0, 81.6],
[986083200000.0, 78.6],
[988675200000.0, 74.3],
[991353600000.0, 72.4],
[993945600000.0, 79.2],
[996624000000.0, 83.0],
[999302400000.0, 80.8],
[1001894400000.0, 75.8],
[1004572800000.0, 77.5],
[1422748800000.0, 152.9],
[1425168000000.0, 152.8],
[1427846400000.0, 149.8],
[1430438400000.0, 145.1],
[1433116800000.0, 145.1],
[1435708800000.0, 165.5],
[1438387200000.0, 148.4],
[1441065600000.0, 149.5],
[1443657600000.0, 147.2],
[1446336000000.0, 141.0],
[1448928000000.0, 148.4],
[1451606400000.0, 140.3],
[1454284800000.0, 141.5],
[1456790400000.0, 143.9],
[1459468800000.0, 141.9],
[1462060800000.0, 145.9],
[1464739200000.0, 168.2],
[1467331200000.0, 135.0],
[1470009600000.0, 124.7],
[1472688000000.0, 122.1],
[1475280000000.0, 125.5],
[1477958400000.0, 128.8],
[1480550400000.0, 134.9],
[1483228800000.0, 136.5],
[1485907200000.0, 142.4],
[1488326400000.0, 140.0],
[1491004800000.0, 139.9],
[1493596800000.0, 140.8],
[1496275200000.0, 143.2],
[1498867200000.0, 149.9],
[1501545600000.0, 132.1],
[1504224000000.0, 127.7],
[1506816000000.0, 126.7],
[1509494400000.0, 125.2],
[1512086400000.0, 128.8],
[1514764800000.0, 132.7],
[1517443200000.0, 141.1],
[1519862400000.0, 148.2],
[1522540800000.0, 148.4],
[1525132800000.0, 154.2],
[1527811200000.0, 144.9],
[1530403200000.0, 132.2],
[1533081600000.0, 137.6],
[1535760000000.0, 133.6],
[1538352000000.0, 133.8],
[1541030400000.0, 139.5],
[1543622400000.0, 145.6],
[1546300800000.0, 140.9],
[1548979200000.0, 146.2],
[1551398400000.0, 140.3],
[1554076800000.0, 141.0],
[1593561600000.0, 127.2],
[1596240000000.0, 120.2],
[1598918400000.0, 140.5],
[1601510400000.0, 152.0],
[1604188800000.0, 166.6],
[1606780800000.0, 170.7],
[1609459200000.0, 209.0],
[1612137600000.0, 224.8],
[1614556800000.0, 222.8],
[1617235200000.0, 239.5]
]
};
var $report = $('#report');
var chart = $('#corn_container').highcharts({
chart: {
zoomType: 'x'
},
colors: ['#00429d'],
title: {
text: "Producer Price Index For Corn Products",
align: 'left',
style: {
color: '#2B2B2B',
fontSize: '20px',
fontWeight: 'bold',
}
},
subtitle: {
text: 'Source: U.S. Bureau of Labor Statistics',
style: {
color: '#2B2B2B'
},
align: 'left'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
min: Date.UTC(1970, 1, 1),
max: Date.UTC(2021, 12, 1),
tickInterval: 12 * 30 * 24 * 3600 * 1000 * 5,
labels: {
style: {
color: '#2B2B2B'
}
},
plotBands: [{
color: '#C7EA46',
from: Date.UTC(2020, 2, 1),
to: Date.UTC(2050, 1, 1)
},
{
color: '#DEE8E9',
from: Date.UTC(1973, 11, 1),
to: Date.UTC(1975, 2, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
//use it like this ..to access series and chart..
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from November 1973 to February 1975`)
},
mouseout: function(e) {
$report.html('')
}
},
},
{
color: '#DEE8E9',
from: Date.UTC(1980, 1, 1),
to: Date.UTC(1980, 7, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from January 1980 to July 1980`)
},
mouseout: function(e) {
$report.html('')
}
},
},
{
color: '#DEE8E9',
from: Date.UTC(1981, 8, 1),
to: Date.UTC(1982, 11, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from August 1981 to November 1982`)
},
mouseout: function(e) {
$report.html('')
}
},
}, ,
{
color: '#DEE8E9',
from: Date.UTC(1990, 7, 1),
to: Date.UTC(1991, 3, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from July 1990 to March 1991`)
},
mouseout: function(e) {
$report.html('')
}
},
},
{
color: '#DEE8E9',
from: Date.UTC(2001, 4, 1),
to: Date.UTC(2001, 11, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from April 2001 to November 2001`)
},
mouseout: function(e) {
$report.html('')
}
},
},
{
color: '#DEE8E9',
from: Date.UTC(2007, 12, 1),
to: Date.UTC(2009, 6, 1),
events: {
click: function(e) {
$report.html(e.type)
},
mouseover: function(e) {
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from December 2007 to June 2009`)
},
mouseout: function(e) {
$report.html('')
}
},
}
],
events: {
afterSetExtremes: function(e) {
//i don't thnk this needed
}
},
minRange: 1,
tickColor: '#2B2B2B',
lineColor: '#2B2B2B',
lineWidth: 1
},
yAxis: [{
title: {
text: 'Index 1982=100',
style: {
color: '#2B2B2B'
}
},
min: 40,
max: 320,
tickInterval: 40,
labels: {
style: {
color: '#2B2B2B'
}
},
showFirstLabel: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#2B2B2B',
lineWidth: 1
}],
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true,
outside: true,
backgroundColor: '#fff',
formatter: function() {
var date = new Date(this.x);
var formattedDate = moment(date).format('MMM YYYY');
return '<strong>' formattedDate ':</strong> ' this.y;
}
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
lineWidth: 1
}
}
},
series: [{
name: '',
data: result.data
},
{
name: "hiddenSeries",
visible: false,
color: '#4572A7',
data: [0, 0, 150, 0, 0, 0, 0, 0],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}
]
}, function(chart) {
$("#slider-range").slider({
range: true,
min: 1975,
max: 2020,
values: [1975, 2020],
slide: function(event, ui) {
$("#amount").val(ui.values[0] " - " ui.values[1]);
chart.xAxis[0].setExtremes(Date.UTC(ui.values[0], 0, 1), Date.UTC(ui.values[1], 0, 1)) ///use data.utc to set extreme
}
});
$("#amount").val($("#slider-range").slider("values", 0)
" - " $("#slider-range").slider("values", 1));
});
});<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<div class="charting_div">
<figure class="highcharts-figure">
<div id="corn_container"></div>
<div id="report"></div>
<div style="margin: 20px 0px 0px 60px">
<p>
<label for="amount">Year(s):</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</figure>
</div><iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>