How can I populate a jqGrid cell with a sparkline graph

Question

I'm having trouble figure out the proper way to get a sparkline graph rendering in a jqgrid cell and can't for the life of me find any relevant samples anywhere.

Anyway, after some research I decided the thing to do was try injecting the sparkline graph into the cell on afterRowInsert. Unfortunately I am doing it wrong. Here is what I am doing:

        afterInsertRow: function(rowid, rowdata, rowelem) {
            var cell = jQuery('#datapointlist').getCell(rowid, 'Graph');
            $(cell).sparkline([1,34,3,2,1])
        },

The contents of the cell on insertion is 'Loading' and after the event it remains unchanged. I'm not really even sure if this is the best way to try to get this working so if anyone can help me out it would be much appreciated.

Answer 1

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:

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},
        {name:'sl',index:'sl',width:50,align:'center',sortable:false}
    ],
    rowNum:10,
    rowList:[5,10,20],
    pager: '#pager',
    gridview:true,
    rownumbers:true,
    sortname: 'invdate',
    viewrecords: true,
    sortorder: 'desc',
    caption:'Example of usage of jQuery Sparklines',
    height: '100%',
    loadComplete: function () {
        var index = getColumnIndexByName('sl');
        $('tr.jqgrow td:nth-child('+(index+1)+')').each(function(index, value) {
            var ar;
            try {
                ar = $.parseJSON($(this).text());
                if (ar && ar.length>0) {
                    $(this).sparkline(ar);
                }
            } catch(e) {}
        });
    }
});