CODEWITHSUNDEEP
highcharts
user4772933
user4772933

Reputation: 321

Highchart multiaxis timeliine chart without rangeselector

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.

Upvotes: 0

Views: 40

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

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

Upvotes: 0

Related Questions