jquery – jqGrid cell with a sparkline graph

jquery – How can I populate a jqGrid cell with a sparkline graph – Stack Overflow.

http://stackoverflow.com/a/5426957/1124352

 

2 down vote accepted

I did’t hear before about jQuery Sparkline, but simple search in Internet gives the answer. It seems to me the usage of the Plugin is very simple.

The first problem is from where we would get the data which we will show as sparkline. I placed the array like [1,34,3,2,1] which we will use to initialize the sparkline as a string in the column which will contain the lines at the end. So I placed "[1,34,3,2,1]" in the corresponding cell. Then inside of loadComplete I get the cell contain convert it to the array with respect of jQuery.parseJSON and call sparkline. As the result I received the following grid: enter image description here

You can see the grid live here.

Below you can find the code which I used:

var mydata =[
        {id:"1", invdate:"2007-10-01",name:"Microsoft", sl:"[10,8,5,7,4,4,1]"},
        {id:"2", invdate:"2007-10-02",name:"Google", sl:"[1,34,3,2,1]"},
        {id:"3", invdate:"2007-09-01",name:"IBM", sl:"[10,8,5,7,4,4,1]"},
        {id:"4", invdate:"2007-10-04",name:"Baidu", sl:"[1,34,3,2,1]"},
        {id:"5", invdate:"2007-10-31",name:"Apple", sl:"[10,8,5,7,4,4,1]"},
        {id:"6", invdate:"2007-09-06",name:"Amazon.com", sl:"[1,34,3,2,1]"},
        {id:"7", invdate:"2007-10-04",name:"Nvidia", sl:"[10,8,5,7,4,4,1]"},
        {id:"8", invdate:"2007-10-03",name:"Ebay", sl:"[1,34,3,2,1]"},
        {id:"9", invdate:"2007-09-01",name:"Adobe", sl:"[10,8,5,7,4,4,1]"},
        {id:"10",invdate:"2007-09-08",name:"Yahoo",sl:"[1,34,3,2,1]"},
        {id:"11",invdate:"2007-09-08",name:"BMW",sl:"[1,34,3,2,1]"},
        {id:"12",invdate:"2007-09-10",name:"Mercedes",sl:"[10,8,5,7,4,4,1]"}
    ],
    grid = $("#list"),
    getColumnIndexByName =function(columnName){
        var cm = grid.jqGrid('getGridParam','colModel');
        for(var i=0,l=cm.length; i<l; i++){
            if(cm[i].name===columnName){
                return i;// return the index
            }
        }
        return-1;
    };

grid.jqGrid({
    datatype:'local',
    data: mydata,
    colNames:['Inv No','Date','Share',''],
    colModel:[
        {name:'id',index:'id',width:70,align:'center',sorttype:'int'},
        {name:'invdate',index:'invdate',width:100, align:'center', sorttype:'date',
         formatter:'date', formatoptions:{newformat:'d-M-Y'}, datefmt:'d-M-Y'},
        {name:'name',index:'name', width:200},
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s