vis.js redraw and changing data
<p>I'm using vis.js timeline to display events and got all items displaying from an ajax call.</p>

<p>currently I have a working filters on the page so the timeline goes to a specific range and this works fine.</p>

<p>What I am trying to do is narrow down the information displayed. My initial thoughts on how to do this was to change the ajax call so it returns a json of just the information I need.</p>

<p>An example:</p>

<ol>
<li>Select region:

<ul>
<li>Northern England</li>
<li>Southern England</li>
</ul></li>
<li>The Ajax called would filter on the database so it would only display items that have that property in a particular column</li>
<li>I would then redraw the timeline utilising the new json from the ajax call</li>
</ol>

<p>Where I am coming unstuck is part 1 and 2, does anyone know how I would specify a different Ajax url and then how to redraw the table?</p>

<p>I've tried timeline.redraw(): with no luck, so I destroyed the table first but still no dice (timeline.destroy(); timeline.redraw();) the destroy comman works but not the redraw.</p>

<p>Here is my code (note the date filters work fine)
HTML</p>

<pre><code>&lt;!-- this is just the filter section --&gt;
&lt;div id="filters" style="margin: 10px; background-color: RGB(229,229,229); border-radius: 10px; padding: 5px"&gt;
        &lt;div id="filterscontainer" style="display: inline-block"&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        &lt;div style="float: left; font-size: 1.25em"&gt;Filters&lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;
                    &lt;div id="expandcollapseFilters" class="chevron bottom" title="Click to expand the filter menu" style="float: left"&gt;&lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;div id="filtercontent" style="display: none"&gt;
        &lt;table&gt;
            &lt;tr&gt;&lt;td colspan="2"&gt;&lt;button id="reset"&gt;Reset all filters&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;table&gt;
                        &lt;tr&gt;
                            &lt;td style="text-align: right"&gt;Date from:&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input id="dateFrom" class="date"/&gt;&lt;/td&gt;
                            &lt;td style="text-align: right"&gt;Date to:&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input id="dateTo" class="date"/&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;button id="dateRangeFilter"&gt;Apply Filter&lt;/button&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="currentlyShowing"&gt;&lt;h3&gt;Currently showing: &lt;span class="currentlyShowing"&gt;All items&lt;/span&gt;&lt;/h3&gt;&lt;/div&gt;
&lt;div id="mytimeline"&gt;&lt;/div&gt;
&lt;div id="loading"&gt;loading...&lt;/div&gt;
</code></pre>

<p>Javascript/jquery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $("#filterscontainer").on("click", function () {
        $('#currentlyShowing').slideToggle('slow');
        $('#filtercontent').slideToggle('slow');
        if ($("#expandcollapseFilters").prop("class") === "chevron top") {
            $('#expandcollapseFilters').prop('collapseFilters', "Click here to collapse the filter menu");
            $('#expandcollapseFilters').addClass('bottom').removeClass('top');
        } else {
            $('#expandcollapseFilters').prop('collapseFilters', "Click to expand the filter menu");
            $('#expandcollapseFilters').addClass('top').removeClass('bottom');
        }
    });
    $.ajax({
        type: "POST",
        url: 'Ajax.asp?RT=RoadMap', data: {},
        success: function (data) {
            var result = JSON.parse(JSON.parse(JSON.stringify(data)));
            document.getElementById('loading').style.display = 'none';
            var items = new vis.DataSet(result);
            var options = {
                orientation: 'top',
                groupOrder: 'order',
                showCurrentTime: false,
                align: 'left',
                editable: false,
                minHeight: '300px',
                min: new Date(2016, 0, 1),                // lower limit of visible range
                max: new Date(2018, 0, 1),                // upper limit of visible range
                zoomMin: 1000 * 60 * 60 * 24 * 7,         // one week in milliseconds
                zoomMax: 1000 * 60 * 60 * 24 * 365        // about a year
            };
            var container = document.getElementById('mytimeline');
            var timeline = new vis.Timeline(container, items, options);
            document.getElementById('dateRangeFilter').onclick = function () {
                var dateFrom = $("#dateFrom").val();
                var dateTo = $("#dateTo").val();
                if (dateFrom.length &lt; 1 || dateTo.length &lt; 1 || dateFrom &gt; dateTo) { //checking if the date to date is after the from date
                    alert("Please select a valid date range");
                } else { //converting the resturn results to a date format accepted by timeline
                var dateFromDay = dateFrom.substr(0, 2);
                var dateFromMonth = dateFrom.substr(3, 2);
                var dateFromYear = dateFrom.substr(6, 4);
                var dateToDay = dateTo.substr(0, 2);
                var dateToMonth = dateTo.substr(3, 2);
                var dateToYear = dateTo.substr(6, 4);
                timeline.setWindow(dateFromMonth + "-" + dateFromDay + "-" + dateToYear, dateToMonth + "-" + dateToDay + "-" + dateToYear);
                }
            };
        }
    });
    $().ready(function () {
        $("#reset").on("click", function () {
            $.datepicker._clearDate("#dateFrom");
            $.datepicker._clearDate("#dateTo");
        });
        $("#dateFrom").datepicker({
            beforeShowDay: $.datepicker.noWeekends,
            dateFormat: "dd/mm/yy"
        });
        $("#dateTo").datepicker({
            beforeShowDay: $.datepicker.noWeekends,
            dateFormat: "dd/mm/yy"
        });
    });
&lt;/script&gt;
</code></pre>