help with my timeline (controls and filters)

[LKK]

Hello there,

I'm trying to creat a timeline with some controls, but I'm far to unexperienced to get things running.

I have the following code so far:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {


    var container = document.getElementById('Cars');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Opel', 'Corsa', new Date(2019, 11, 1), new Date(2026, 6, 1) ],
      [ 'Opel', 'Astra', new Date(2019, 2, 4), new Date(2026, 2, 4) ],
      [ 'Opel', 'Insignia', new Date(2018, 2, 4), new Date(2025, 2, 4) ],
      [ 'Skoda', 'Fabia', new Date(2018, 3, 21), new Date(2025, 2, 4)],
      [ 'Skoda', 'Octavia', new Date(2016, 2, 4), new Date(2023, 2, 4)],
      [ 'Skoda', 'Superb', new Date(2017, 2, 4), new Date(2024, 2, 4)],
      [ 'Skoda', 'Kodiaq', new Date(2020, 2, 4), new Date(2027, 3, 20)]
    ]);


    chart.draw(dataTable);
  }
</script>


<div id="Cars" style="height: 800px;"></div>

but the whole timeline with all the controls shall look something like the attached picture at the end:

It would be very nice if the following controls would work:

1. Control: to choose the car brand

2. Control to choose the Modells of the before chosen Car brand (e.g. Skoda -> Octavia)

3. Control to choose the starting year (or a range of starting years)

4. Control to choose the ending year (or a range of ending years)

5. Control to have a full text search

6. a ChartRangeFilter

I hope somebody could help me with this!!

Sincerly

Lars K.