Html Grid

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

by txhi

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: 850px; height: 500px;"></div>

JavaScript

var data1 = [
    { counts: 1, date: "03/09/2018" },
    { counts: 1, date: "03/12/2018" },
    { counts: 1, date: "03/22/2018" },
    { counts: 1, date: "03/24/2018" }
];
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'counts', type: 'int' },
        { name: 'date', type: 'date' }
    ],
    localdata: data1
};

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

var data2 = [
    { countsTicketSolved: 1, date: "03/21/2018" },
    { countsTicketSolved: 1, date: "03/22/2018" },
    { countsTicketSolved: 2, date: "03/26/2018" },
    { countsTicketSolved: 6, date: "03/27/2018" },
    { countsTicketSolved: 2, date: "03/28/2018" },
    { countsTicketSolved: 1, date: "03/30/2018" },
];
var source2 =
{
    dataType: "json",
    dataFields: [
        { name: 'countsTicketSolved', type: 'int' },
        { name: 'date', type: 'date' }
    ],
    localdata: data2
};

var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source2.url + '" : ' + error); } });
console.log(dataAdapter2);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            
// prepare jqxChart settings
var settings = {
    title: "Ticket created vs ticket solved",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 10, right: 15, bottom: 10 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter2,
    colorScheme: 'scheme13',
    xAxis: {
        dataField: 'date',
        type: 'date',
        baseUnit: 'day',
        description: 'Day',
        minValue: '03/09/2018',
        maxValue: '03/30/2018',
        valuesOnTicks: false,
        labels:
        {
            formatFunction: function (value)
            {
         ...