Html Grid

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

by Hristo Hristov

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>

CSS

#testChart {
  color: red;
}

.jqx-chart-title-text
    {
        fill: Red;
    }

JavaScript

// prepare chart data
var sampleData = [
  { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
  { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
  { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
  { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
  { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
  { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
  { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];
// prepare jqxChart settings
var settings = {
  title: "Axis text rotation example",
  description: "",
  padding: { left: 5, top: 5, right: 20, bottom: 5 },
  titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
  source: sampleData,
  xAxis:
  {
    position: 'top',
    dataField: 'Day',
    labels:
    {
      angle: 55,
      horizontalAlignment: 'right',
      verticalAlignment: 'center',
      rotationPoint: 'right',
      offset: { x: 0, y: 0 }
    }
  },
  colorScheme: 'scheme04',
  showToolTips: true,
  enableAnimations: true,
  columnSeriesOverlap: true, // change to true if you want the columns in the two series groups to overlap
  seriesGroups:
  [
    {
      type: 'column',
      seriesGapPercent: 15,
      orientation: 'vertical',
      columnsGapPercent: 0,
      seriesGapPercent: 0,
      useGradient: false,
      valueAxis:
      {
        minValue: 0,
        maxValue: 100,
        unitInterval: 10,
        position: 'right'
      },
      series: [
        { 
          dataField: 'Keith', 
          displayText: 'Keith',
          showLabels: true,
          labels: { 
            visible: true,
            verticalAlignment: 'top',
            offset: { x: 0, y: -20 }
          },
        }
      ]
    },
    {
      type: 'column',
      seriesGapPercent: 15,
      orientation: 'vertical',
      columnsGapPercent: 0,
      seriesGapPercent: 0,
      useGradient: false,
          	formatFunction: function (value) {
            	
              return 'special: ' + (value + 10);
            },
      valueAxis:
 ...