Html Grid

Set the filterable property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='chartContainer' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<div id='rangeSelector' style="width:500px; height:100px;">
        </div>
        
        
<button id="setSelection">setSelection</button>
<button id="getSelection">getSelection</button>

JavaScript

/* input data */
var source = {
  datatype: "csv",
  datafields: [{
    name: 'Time'
  },
               {
                 name: '4/1/2018'
               },
               {
                 name: '4/2/2018'
               },
               {
                 name: '4/3/2018'
               },
               {
                 name: '4/4/2018'
               },
              ],
  url: 'data/Data2.csv',
};

/* data adapter settings */
var dataAdapter = new $.jqx.dataAdapter(
  source, {
    async: false,
    autoBind: true,
    loadError: function(xhr, status, error) {
      console.log('Error loading "' + source.url + '" : ' + error);
      //alert('Error loading "' + source.url + '" : ' + error);
    }
  });

// create jqxRangeSelector.
$("#rangeSelector").jqxRangeSelector({
  width: 750,
  height: 100,
  min: 0,
  max: 100,
  range: {
    from: 10,
    to: 30
  },
  majorTicksInterval: 10,
  minorTicksInterval: 1
});
// create Set Range and Get Range buttons.
$("#setSelection").jqxButton();
$("#getSelection").jqxButton();

$("#setSelection").click(function() {
  // Set Range.
  $("#rangeSelector").jqxRangeSelector("setRange", 10, 30);
});
$("#getSelection").click(function() {
  // Get Range.
  var range = $("#rangeSelector").jqxRangeSelector("getRange");
  //alert("The selected range is from " + range.from + " to " + range.to + '. chartmin = ' + $chartmin + ' and chartmax = ' + $chartmax);
  console.log(range);

  $('#chartContainer').jqxChart(chartSettings);
});

var range = $('#rangeSelector').jqxRangeSelector('getRange');
$chartmin = range.from;
$chartmax = range.to;

/* chart settings */
var bands = [
  {
    minValue: $chartmin,
    maxValue: $chartmax,
    color: '#FF0000',
    opacity: 0.5
  }
];
var chartSettings = {
  source: dataAdapter,
  title: "Energy Demand (kW)",
  description: "Day-by-Day Energy Demand",
  padding: {
    left: 5,
    top: 5,
    right: 5,
    bottom: 5
  },
  titlePadding: {
    left: 5,
    top: 5,
    right: 5,
    bottom:...