Timeline - changing visible range on the browser too

Vaadin 6 / 7 / 8 Framework UI
1

Hello!

I’m developing a monitoring dashboard leveraging the power of the Vaadin Charts and the Timeline, and I’m very impressed by the two.

I know it could sound a little strange, but I need to be able to change/reset the visible time range of the entire timeline, including the bottom browser. I analyzed the API and to my understanding it only permits to alter the visible range of the graph only and not the browser. In particular, I would like to be able to shrink the displayed timespan the browser is showing.
I noticed it dinamically expands if you add data points to your datasource, but once it has grown, I found no way of resetting/shrinking it.

Think for example a Timeline with two datasources, one which spans a one year timespan, the other covers a two years one.
If the user removes from the timeline the two years datasource, I would be able to shrink the entire timeline/browser to only display a one year interval.

I am investigating what could be the best way to do this, if feasible. I’m thinking of extending the widget to implement custom behaviour but it would be my first time on the client side, so it would be quite an hard job.
I also wonder if this is a requested feature / is on the roadmap yet.

As a side note, if you are curious, what I’m doing is using a Timeline ( in fact only the timeline browser, the graph is hidden ) as a master controller on the page, to control the timespan displayed on all other charts dinamically added to the page. This is working pretty good.

Cheers,
Federico

2

Hi,

If you have a Timeline with a one year graph and a two year graph and you remove the latter the Timeline should refresh the browser bar to the one year timespan.

How are you removing the larger one? Timeline.removeGraphDataSource()?

Just hiding the graph with Timeline.setGraphVisibility() will not change the browser graph as the graph still is there, just hidden.

3

Hi John,

strange it’s not behaving like that.

What I’m doing is this:
I initialize the timeline as such

        mainTimelineContainer = createMainTimeLineContainer(start, end);
        mainTimeline.addGraphDataSource(mainTimelineContainer, Timeline.PropertyId.TIMESTAMP, Timeline.PropertyId.VALUE);
        mainTimeline.setVisibleDateRange(start, end);

the createMainTimelineContainer reads like this:

    private IndexedContainer createMainTimeLineContainer(Date start, Date end){

        IndexedContainer idxContainer = createIndexedContainer();
        idxContainer.addContainerProperty(Timeline.PropertyId.TIMESTAMP, Date.class, null);

        idxContainer.addContainerProperty(Timeline.PropertyId.VALUE, Float.class, null);

         Item item = idxContainer.addItem(start);
         item.getItemProperty(Timeline.PropertyId.TIMESTAMP).setValue(start);            
         item.getItemProperty(Timeline.PropertyId.VALUE).setValue(0.00f);
     
         item = idxContainer.addItem(end);
         item.getItemProperty(Timeline.PropertyId.TIMESTAMP).setValue(end);            
         item.getItemProperty(Timeline.PropertyId.VALUE).setValue(0.00f);

         return idxContainer;

    }

so it basically creates a new container with two dummy datapoints at the edges of the timespan.

Then I attach a DateRangeListener in which I remove all the datasources and create a new one with the new boundaries (in fact it is only one and gets replaced by the new one):

mainTimeline.removeAllGraphDataSources();                
mainTimelineContainer = createMainTimeLineContainer(startDate, endDate);
mainTimeline.addGraphDataSource(mainTimelineContainer, Timeline.PropertyId.TIMESTAMP, Timeline.PropertyId.VALUE);

However even if the new datasource spans a smaller timespan, the browser does not change.

Do you think it could be caused by the fact that I operate in the listener during the handling of the event?

I may try to reproduce the behaviour in a test case without this peculiarity.

thanks,
Federico