timelines-chart icon indicating copy to clipboard operation
timelines-chart copied to clipboard

How to set initial zoom to date range?

Open alexbfree opened this issue 6 years ago • 5 comments

Thanks for this excellent module.

I'm trying to set the initial date range to just the last two years of data.

I tried setting overviewDomain and zoomX but the chart sets the maximum axis limits to those values - what I want to do is to still allow the user to be able to zoom out to a longer date period, but just "pre zoom in on" the last two years....

      var today = new Date();
      var y = today.getFullYear();
      var m = today.getMonth();
      var d = today.getDate();
      var twoYearsAgo = new Date(y-2,m,d);

      this.chart = TimelinesChart()(timelineEl)
        .zoomX([twoYearsAgo,today])
        .overviewDomain([twoYearsAgo,today])
        .zQualitative(true)
        .data(this.processedData);

Please could you advise, or else provide a working example of programmatically zooming that I could adapt?

Thanks!

alexbfree avatar Jan 30 '19 09:01 alexbfree

Updated my above comment as I made a mistake in what I said about existing behaviour.

alexbfree avatar Jan 30 '19 09:01 alexbfree

@alexbfree just make sure that you call zoomX(...) and overviewDomain(...) after data(...), otherwise your settings are overridden when rendering the data.

vasturiano avatar Jan 31 '19 10:01 vasturiano

Hi @vasturiano Thanks for your reply.

Sorry i don't think I've explained my problem very clearly.

What I would like to do is to programmatically do the equivalent of dragging the blue bar inwards to only cover the last two years. So that part of the bar is still grey and the user can still drag the blue bar edge back to the left reveal more.

With zoomX and overviewDomain (even if I put them after .data call) the blue bar ends up being "full" so the user's only way to zoom out is to press "Reset Zoom".

Is there any way to do what I am trying to do? Based on your response to #34, that sort of implies there is? Otherwise it wouldn't be possible to replicate the bar control....?

alexbfree avatar Feb 04 '19 11:02 alexbfree

@alexbfree zoomX controls the blue section (the selected time range visible in the main chart). overviewDomain controls the grey full extent of the overview bar.

vasturiano avatar Feb 05 '19 00:02 vasturiano

In that case I must have the syntax wrong. Can you provide a working example?

On Tue, 5 Feb 2019, 00:43 Vasco Asturiano <[email protected] wrote:

@alexbfree https://github.com/alexbfree zoomX controls the blue section (the selected time range visible in the main chart). overviewDomain controls the grey full extent of the overview bar.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vasturiano/timelines-chart/issues/32#issuecomment-460471052, or mute the thread https://github.com/notifications/unsubscribe-auth/ABZ63OnRLdInrKVtXmRk2j0tAjtDEBoBks5vKNOagaJpZM4aZxdY .

alexbfree avatar Feb 05 '19 07:02 alexbfree