Question

Is it possible to add graphs using the Google Chart API or any other graph to one column of jqGrid? If it is possible, how? I need to filter each row of jqGrid and show a graph of that particular row in the last column of jqGrid.

Answer 1

You could use a custom formatter:

<script type="text/javascript">
    $(function () {
        $('#myGrid').jqGrid({
            url: '@Url.Action("Data")',
            datatype: 'json',
            colNames: [ 'Foo', 'Bar', 'Chart' ],
            colModel: [
                { name: 'foo', index: 'foo' },
                { name: 'bar', index: 'bar' },
                { name: 'chart', index: 'chart', formatter: chartFormatter },
            ]
        });
    });

    function chartFormatter(el, cval, opts) {
        return '<img src="' + el + '" alt="chart" title="" />';
    }
</script>

<div style="height: 500px;">
    <table id="myGrid"></table>
</div>

and your controller would return the corresponding Google Chart URLs:

public ActionResult Data()
{
    return Json(new
    {
        rows = new[]
        {
            new { id = 1, cell = new[] { "foo 1", "bar 1", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
            new { id = 2, cell = new[] { "foo 2", "bar 2", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
        }
    }, JsonRequestBehavior.AllowGet);
}

which gives: