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

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

                };