Sorting Tables that contain jQuery sparklines

[NA]

I have a table that has a column of type 'string'.  That column has a span element that is used to construct a jQuery sparkline.  It's contents look something like:

  <span class='hitsChart' values='1,2,3,4,5,6,7' ></span>

When the chart is first rendered, the sparklines render as well.  But when I sort the table (on any of the columns), the sparklines disappear. 

Anyone know why?  I've also tried calling jQuery.sparkline_display_visible() after sorting but that didn't help.  The only fix was to re-draw the sparklines, which is rather slow.

Any ideas?

 

[asgallant]

If I understand what is going on in the background correctly, the table actually refreshes the contents every time you sort, so unless the sparklines HTML/CSS/SVG code (whatever actually renders them) exists within the DataTable, it will get wiped out on every refresh.

[NA]

Ok, based on what I've seen, that sounds right. 

I could put the jQuery code inside each the datatable cell, so that each cell contains its own jQuery code that renders only its own contents.  I'm pretty sure that would work, but I don't think it would be any more efficient than the workaround I'm currently using. 

thanks very much for the assistance,

[asgallant]

It would probably be less efficient.  What you *may* be able to get to work is something like this:

1) draw the table

2) create sparklines

3) copy the contents of the sparkline cells back into the DataTable *before* any sorting occurs

ie, if the sparklines are in the second column, you could try this:

// nth-child is 1-indexed, so second cell is 2, not 1
var cells = $('#table').find('td.google-visualization-table-td:nth-child(2)');
for (var i = 0; i < cells.length; i++) {
    data.setFormattedValue(i, 1, $(cells[i]).html());
}​ 

You will probably need to have the allowHTML option set to true to make it work.

[NA]

That's an interesting idea.  I have a workaround (below), but I'll probably try that the next time I do something like this.

I ended up redrawing each sparkline separately in its own setTimeout function that fires at some random interval (interval length depends on how many charts I have, so I aim for 100 charts in 1 second). 

This prevents the browser from hanging when I redraw all the sparklines at once (or even very close together in time).  It's also somewhat pleasing to see the sparklines appear after the sort.  And it's fast enough to still be functional.

Thanks for the advice, though, really appreciate it.

Code snippet below:


            google.visualization.events.addListener(tableWrap.getChart(),'sort',UpdateSparklines);

    function UpdateSparklines() {
            var sparkCharts = jQuery('.hitsChart');
            var listLength = myList.length
            jQuery.each(sparkCharts,
                    function(idx,item){
                        setTimeout(function(){
                        jQuery(item).sparkline('html', {enableTagOptions: true, type:'bar', barColor:'#2562ae',height:15});
                        },Math.random()*10*listLength);
                    }
            );