Jqgrid Demo

Jqgrid sparkline charts

by Aditya Shrivastava

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js"></script>
 <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>http://jsfiddle.net/adishri22/98yxbjgc/#update

JavaScript

var mydata = [
                    {id:"1", invdate:"2007-10-01",name:"Microsoft" , sl:"[10,8,5,7,4,4,1]", parent: "null",level: "0",isLeaf: false, 
expanded: false, loaded: true},
                    {id:"2", invdate:"2007-10-02",name:"Google", sl:"[1,34,3,2,1]",parent: "1",level: "1",isLeaf: false, 
expanded: false, loaded: true },
                    {id:"3", invdate:"2007-09-01",name:"IBM", sl:"[10,8,5,7,4,4,1]",parent: "2",level: "2",isLeaf:true, 
expanded: false, loaded: true},
                    {id:"4", invdate:"2007-10-04",name:"Baidu", sl:"[1,34,3,2,1]", parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
                    {id:"5", invdate:"2007-10-31",name:"Apple", sl:"[10,8,5,7,4,4,1]",parent: "4",level: "1",isLeaf: false, expanded: false, loaded: true },
                    {id:"6", invdate:"2007-09-06",name:"Amazon.com", sl:"[1,34,3,2,1]",parent: "5",level: "2",isLeaf:true, expanded: false, loaded: true},
                    {id:"7", invdate:"2007-10-04",name:"Nvidia", sl:"[10,8,5,7,4,4,1]",parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
                    {id:"8", invdate:"2007-10-03",name:"Ebay", sl:"[1,34,3,2,1]",parent: "7",level: "1",isLeaf: false, expanded: false, loaded: true},
                    {id:"9", invdate:"2007-09-01",name:"Adobe", sl:"[10,8,5,7,4,4,1]",parent: "8",level: "2",isLeaf:true, expanded: false, loaded: true},
                    {id:"10",invdate:"2007-09-08",name:"Yahoo",sl:"[1,34,3,2,1]",parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
                    {id:"11",invdate:"2007-09-08",name:"BMW",sl:"[1,34,3,2,1]",parent: "10",level: "1",isLeaf: false, expanded: false, loaded: true},
                    {id:"12",invdate:"2007-09-10",name:"Mercedes",sl:"[10,8,5,7,4,4,1]",parent: "8",level: "2",isLeaf:true, expanded: false, loaded: true}
                ],
                grid = $("#list"),
                getColumnIndexByName = function(columnName) {
...