Highchart multiaxis timeliine chart without rangeselector - highcharts

Question

I have a dataset like so where each layer is a chart in itself (example dataset below), below chart only plots the first layer Week 1.
I would like to add a timeline axis to it (date picker and timeSelector(instead of rangeSelector))which lets me show the different layers upon interaction
var dataSequence = [{
name: 'Week 1',
data: [1, 2, 2, 1, 1, 2, 2]
}, {
name: 'Week 2',
data: [6, 12, 2, 3, 3, 2, 2]
}, {
name: 'Week 3',
data: [4, 5, 6, 5, 5, 4, 9]
}, {
name: 'Week 4',
data: [5, 5, 6, 6, 5, 6, 6]
}, {
name: 'Week 5',
data: [6, 7, 7, 6, 6, 6, 7]
}, {
name: 'Week 6',
data: [8, 9, 9, 8, 8, 8, 9]
}, {
name: 'Week 7',
data: [9, 10, 4, 10, 9, 9, 9]
}, {
name: 'Week 8',
data: [1, 10, 10, 10, 10, 11, 11]
}, {
name: 'Week 9',
data: [11, 11, 12, 12, 12, 11, 11]
}];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Highcharts with time control - weeks'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'By week',
data: dataSequence[0].data.slice()
}, {
name: 'Average week',
data: [6, 8, 6, 7, 7, 7, 6]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I am aware of this motion plugin https://www.highcharts.com/blog/tutorials/176-charts-in-motion/ but I am looking for an inbuilt highchart solution.
I can imagine something can be cooked up with drilldown functionality? basically a chart which shows drill down series all the time and a timeline to interact.
What do you suggest? Is anyone aware of a solution here?
Thanks in advance.

Answer 1

You can add some custom buttons and on click use setData method to change the current data set:
document.getElementById('week3').addEventListener('click', function() {
chart.series[0].setData(dataSequence[2].data);
});
document.getElementById('week7').addEventListener('click', function() {
chart.series[0].setData(dataSequence[6].data);
});
Live demo: http://jsfiddle.net/BlackLabel/st12m4hn/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData