render jquery.sparkline in grid cell

[smit171Participant]

Hi,

I want to display jquery.sparkline graph elements inside jqxGrid cells. Initially it works but as soon as the cells are re-rendered (for example when scrolled) the dom element is replaced with custom html from cellsrenderer method. Also I could not find any event that is fired every time a cell is redrawn.

Here is a sample code that I am using..

$(document).ready(function () {

var gridElement = $(‘#the-grid’)

var data = [
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ },
{ PORef: ‘ASN-SS-15-A86’ }
];

var source = {
localdata: data,
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);

gridElement.jqxGrid(
{
ready: function() {
$(‘.spark’).sparkline(‘html’, {
type: ‘bar’,
bgColor: ‘green’,
spotRadius: 1.5,
spotColor: ‘blue’,
tooltipFormat: $.spformat(‘{{value}}’, ‘tooltip-class’),
disabledHiddenCheck: true
})
},
rendered: function () {
$(‘.spark’).sparkline(‘html’, {
type: ‘bar’,
bgColor: ‘green’,
spotRadius: 1.5,
spotColor: ‘blue’,
tooltipFormat: $.spformat(‘{{value}}’, ‘tooltip-class’),
disabledHiddenCheck: true
})
},
source: dataAdapter,
columns: [
{ text: ‘PO Reference’, datafield: ‘PORef’, width: ‘30%’ },
{
text: ‘Graph’, width: ‘70%’,
cellsrenderer: function (row, column, value) {
dirty = true
return ‘<div class=”spark”>1,5,2,3,1,7,3,4</div>’;
}
}
],
width: ‘100%’,
height: ‘500px’,
rowsheight:50
});

})

[Peter StoevKeymaster]

Hi smit171,

You can use jqxDataTable and jqxChart for that purpose: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_datatable_sparklines.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts