Restricting X axis range for vis timeline chart

Question

I am using below code to show timeline view of schedules in my project. Showing weeks in x-axis and services in the y-axis. I would like to know how can I restrict the user from moving after a particular range in the x-axis. probably user can view only 1 yr data in the x-axis. And is there any option to set default zooming for the chart

 var Id = 1;
var url = "/ScheduleManagement/ServiceManagement/GetMasterConfigurationForChart";
var data = { 'transitPlanId': Id };
$.ajax({
    url: url,
    data: data,
    cache: false,
    dataType: 'json',
    type: "POST",
    success: function (data) {
       // Graph2d.clear();
        var xAxis = [];
        var x = {};
        var yAxis = [];
        var y = {};
        var schedule = data.SeriviceList;
        for (var i = 0; i < schedule.length; i++) {

            var labelContent = schedule[i].MasterScheduleName + ' ' + 'Start Week: ' + schedule[i].FromWeek + ' End Week: ' + schedule[i].ToWeek;

            var sdata = _.find(xAxis, function (s) { return s.content == schedule[i].ServiceGroupeName });
            if (sdata == null) {
                x = { id: i, content: schedule[i].ServiceGroupeName, value: i + 1 };
                xAxis.push(x);

                y = { id: i, group: i, content: labelContent, start: schedule[i].FromDate, end: schedule[i].ToDate };
            }
            else {
                y = { id: i, group: sdata.id, content: labelContent, start: schedule[i].FromDate, end: schedule[i].ToDate };
            }
            yAxis.push(y);
        }
        var groups = new vis.DataSet(xAxis);
        var items = new vis.DataSet(yAxis);
        var container = document.getElementById('visualization');
        var options = {
            // option groupOrder can be a property name or a sort function
            // the sort function must compare two groups and return a value
            //     > 0 when a > b
            //     < 0 when a < b
            //       0 when a == b
            groupOrder: function (a, b) {
                return a.value - b.value;
            },
            editable: false,
            stack: true,
            verticalScroll: true,
            zoomKey: 'ctrlKey',
            maxHeight: '90%',
            timeAxis: { scale: 'week', step: 1 },
            zoomMin:100,
           
        };
        //dataAxis.customRange.left.max
        var timeline = new vis.Timeline(container);
        timeline.setOptions(options);
        timeline.setGroups(groups);
        timeline.setItems(items);
    },
    error: function (response) {
        alert("error : " + response);
    }
});
}

 <div id="visualization"></div>

Is there any option to clear the chart and draw it again with different values?

Answer 1

It's not in Jquery as I used Angular npm module for vis-timeline but I listen to the event rangeChanged and after the user has moved the timeline, if the date is later than yesterday (in my case it's my min limit, in your case is last year), you move the timeline to your min (again in my case I move it to today as it's where I want it to center). You should be able to do the same in Angularjs or jquery. Remember to check that the event is trigger by the user, otherwise you end up in a forever loop.

this.visTimelineService.rangechanged.subscribe((eventData: any[]) => {
      if (eventData[0] === this.visTimelineId) {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
        const eventRanged: { byUser: boolean; start: Date, end : Date } = eventData[1];
        if (
          eventRanged.byUser &&
          new Date(eventRanged.start) < UtilsTime.yesterday
        ) {
          this.visTimelineService.moveTo(this.visTimelineId, UtilsTime.today);
        }
      }
    });

BTW, in the angular lib you have to subscribe and unbsubscribe the event if you want to receive them

this.visTimelineService.on(this.visTimelineId, 'rangechanged');
this.visTimelineService.off(this.visTimelineId, 'rangechanged');

Here you have the info of the lib I used. As I said it's based on the jquery lib so you shouldn't have any problems implementing this solution. https://visjs.github.io/vis-timeline/docs/timeline/#Events

I end up in your question as I wanted to do the same and I came up with this solution so even if it's late, it's better than nothing (as the previous solution didn't work for me).

Cheers.

Answer 2

I have modified my chart options as given below.. its working fine for chart range limit and for zoom in features.

 var options = {
                    // option groupOrder can be a property name or a sort function
                    // the sort function must compare two groups and return a value
                    //     > 0 when a > b
                    //     < 0 when a < b
                    //       0 when a == b
                    groupOrder: function (a, b) {
                        return a.value - b.value;
                    },
                    editable: false,
                    stack: true,
                    verticalScroll: true,
                    horizontalScroll: true,
                    zoomKey: 'ctrlKey',
                    maxHeight: '90%',
                    timeAxis: { scale: 'week', step: 1 },
                    min: new Date(2017, 0, 1),                // lower limit of visible range
                    max: new Date(2018, 0, 1),
                    zoomMin: 1000 * 60 * 60 * 24 * 31,             // one day in milliseconds
                    zoomMax: 1000 * 60 * 60 * 24 * 31 * 3

                };