Jquery Sparkline In Cgridview [Solved]

I’m trying to include jquery sparklines in a gridview to show trends. I’m using inline sparklines like this to generate the graphs:

<span class="inlinesparkline">1,4,4,7,5,9,10</span>

It works and looks great when the page is first rendered, but when you sort the table or use the pagination links the graph is lost and the raw numbers show.

I believe calling the $.sparkline_display_visible() function just after a sort or page change will fix this, my problem is I don’t know where to put the call to the function to make it work…

Any help is appreciated!


Try to put it in the ‘afterAjaxUpdate’ property of your CGridView call

Thanks for the fast reply bennouna, I added:

'afterAjaxUpdate'=>"js:function () { sparkline_display_visible(); }",

And it did not work, any other thoughts?


OK, I figured it out, rather than calling sparkline_display_visible() I just recalled the initial inlinesparkline function and it works great.

'afterAjaxUpdate'=>"js:function () { $('.inlinesparkline').sparkline('html', { enableTagOptions: true }); }",

Here is what they look like, still need to modify the css, but I think the sparklines are a great addition to show trends in data.

Thanks again for your help bennouna!