CODEWITHSUNDEEP
amcharts
boisterouslobster
boisterouslobster

Reputation: 1293

Keeping scrollbar in same position live chart

When creating a live chart in AmCharts (example: http://jsfiddle.net/amcharts/ATQUm/) it seems that when one triggers this.state.chart.validateData() the scope of the scrollbar is being reset to the full-scope unless the user clicks and holds down the scrollbar in the same position.

Is there any way to keep that scope as the data is being updated, without holding the button down?

Upvotes: 1

Views: 559

Answers (1)

xorspark
xorspark

Reputation: 16012

Assuming you want the date selection to persist between updates, you can set zoomOutOnDataUpdate to false in the chart object and the scrollbar will stay on the selected date range; for example, if you're zoomed on 2017-07-01 through 2017-08-01, that date range will still be in view between updates.

Demo

If you're sliding old points off the chart like in that demo, then zoomOutOnDataUpdate doesn't quite work out, UI-wise, since the date range will eventually fall off as the points are removed, as you'll likely notice in the above demo (the right scrollbar handle is slowly moving left). In this instance, you'll want to maintain the chart's current startIndex and endIndex and call zoomToIndexes after you update, i.e.

    var startIndex = chart.startIndex;
    var endIndex = chart.endIndex;
    chart.validateData();
    chart.zoomToIndexes(startIndex, endIndex);

Demo

FYI, the fiddle you linked uses an older version of AmCharts (v2). My fiddles are using the latest v3 release.

Upvotes: 1

Related Questions