title: vis.js redraw and changing data
body: <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>