PDA

View Full Version : Ext.ux.Sparkline + Grid Plugin



dgaspar
10 Oct 2010, 3:33 PM
Hi,

Here's my quick "port" of jquery.sparkline.js to ExtJS + Grids plugin:

http://blog.dgaspar.com/sparkline/sparklinegrid.png

Download: http://github.com/dgaspar/Ext.ux.Sparkline

Live demo: http://blog.dgaspar.com/sparkline/

Examples:


// Example of a simple sparkline (extends BoxComponent)
// default type is 'line'
new Ext.ux.Sparkline({renderTo:Ext.getBody(),values:[1,2,3,234,345,56,563,34,134,45,456,542]});

// A Grid with sparkline plugin
new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
autoHeight:true,
width:250,
title:'Sparklines',
view : new Ext.grid.GridView({forceFit : true}),
columns: [{
header: 'Name',
dataIndex: 'name'
},{
header: 'Stats',
xtype:'sparklinecolumn',
dataIndex: 'stats',
sparkline:{ type:'bar', barColor:"green" } // default sparkline config for the column
}],
plugins:[new Ext.ux.Sparkline.GridPlugin()],
store:new Ext.data.SimpleStore({
fields:['name', 'stats'],
data: [
['bar (default cfg)', {values:[10,-2,30,10,100,40,6,78,23]}],
['line', {
// the record can override the default cell config:
values:[10,-2,30,10,100,40,6,78,23],
type:'line',
maxSpotColor:'red'
}],
['box', {values:[1,2,3,10,1,4,6,78,23],type:'box'}],
['tristate', {values:[100,50,-13,0,1,4,6,0,-345,345,34,-43,56,7,23],type:'tristate'}],
['discrete', {values:[100,-50,13,345,345,345,34,23,12,56,7,23],type:'discrete'}],
['pie', {values:[10,50,40],type:'pie'}],
['bullet', {values:[10,12,12,9,7],type:'bullet'}]
]
})
});


Known issues:
composite functionality (superposed graphs) is broken
sparkline_display_visible is broken
I "guessed" how plugins, columnmodels and boxcomponents should work when I was extending them.. lol

joeri
10 Oct 2010, 11:36 PM
I really like this. I've been looking for a good excuse to use sparklines. I guess I'm just going to have to look a little harder so I can start using this plugin :)

netnutmike
4 Feb 2011, 1:38 PM
Hello,

I downloaded this plugin and it is exactly what I was looking for. But I am having a problem using the data in the store to have the graph draw. If I force the data it works fine so I know it is something with reading the data from the store.

The data in the store is loaded from a JSON. I have tried different formats for the data. Here are snippets what I have tried:


"PowerHistory":"{values:[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]}"

"PowerHistory":"values:[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]"

"PowerHistory":"[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]"

"PowerHistory":"1,10,14,13,17,52,39,43,40,35,30,29,28,27,26"

Here is how I have the column configured:


{header: "Performance", width: 120, sortable: true, dataIndex: 'PowerHistory', xtype: 'sparklinecolumn', sparkline:{type:'line', barColor:"green" } }
I am guessing it is how I am sending the data because if I put values:[1,2,3,4,5] in the sparkline: config I get the graph.

Thanks!

Mike

greenst
28 Apr 2011, 2:42 PM
I'm having the same problem. As soon as you load the data via an asynchronous call (e.g. jsonstore) the graphs don't display. Must be a timing issue with the sparkRefresh. Anyone have any ideas how to fix this?

I would love to get this to work within an extjs gridpanel that's loaded via jsonstore.

Cyberluke
19 Dec 2011, 2:25 PM
I fixed two bugs under Ext JS 3:

1) loading dynamic JSON data in Sparkline
2) rendering Sparkline inside GridPanel, which is inside Window component


1) https://github.com/dgaspar/Ext.ux.Sparkline/blob/master/Ext.ux.Sparkline.js
Line: 1093


var celllen = this.getStore().getTotalCount();

Change to:

var celllen = this.getStore().getCount();

Because it returned ZERO counts and that's why it wasn't updated on store change!!!

This works with my local JSON store (which I update manually through json rpc):

myGridPanel = new Ext.grid.GridPanel({

autoHeight:true,
width:250,
title:'My stats',

view : new Ext.grid.GridView({forceFit : true}),
columns: [{
header: 'Name',
dataIndex: 'name'
},{
header: 'Stats',
xtype:'sparklinecolumn',
dataIndex: 'stats',
sparkline:{ type:'line', maxSpotColor: "red", barColor:"green" } // default sparkline config for the column
}],
plugins:[new Ext.ux.Sparkline.GridPlugin()],
store:new Ext.data.Store(),
mode: 'local'
});


TODAY IS YOUR LUCKY DAY AS I INCLUDE A BONUS CODE ON HOW TO UPDATE THIS LOCAL JSON STORE:

fillGridPanel : function(result) {

var store = this.myGridPanel.getStore();

store.removeAll();
var record = Ext.data.Record.create([ 'name' ], ['stats']);
Ext.iterate(result.myObjects, function(myObject) {

store.add(new record({
name : myObject.name,

stats : {values:[1,2,3,10,1,4,6,78,23]}
}));
});
// ExtJS GridPanel render fix
Ext.ux.Sparkline.refreshGrid(this.myGridPanel);

}




2)
When GridPanel is inside Window, the sparklines are not drawn on load. You must call some event to redraw gridpanel, when window is loaded. Just add this event in your Ext JS window class (config):

listeners:

{ show: { fn:function(windowComponent)
{
// ExtJS GridPanel render fix Ext.ux.Sparkline.refreshGrid(windowComponent.myGridPanel);

}
}
}

myGridPanel is GridPanel with Sparklines your created from the demo:


new Ext.grid.GridPanel


Ext.ux.Sparkline.refreshGrid is my public function, which is the same as


original sparkRefresh (with my fixes):


Ext.ux.Sparkline.refreshGrid = function(grid) {
var cm = grid.getColumnModel();
var cmlen = cm.getColumnCount();
for (i = 0; i < cmlen; i++) {
var col = cm.getColumnAt(i);
if(cm.config[i].xtype=='sparklinecolumn'){
var celllen = grid.getStore().getCount();
for (j = 0; j < celllen; j++) {
var cell = grid.view.getCell(j, i);
cell.innerHTML = '';
var cfg = {};
Ext.apply(cfg, grid.store.getAt(j).data[col.dataIndex], {
renderTo:cell,
width: grid.view.cm.getColumnWidth(i)
});
Ext.applyIf(cfg,cm.config[i].sparkline||{});
new Ext.ux.Sparkline(cfg);
}
}
}
}




Now you can add support for additional Sparklines from original jQuery and port it to Ext JS 4 too!!! :-D

teddyk
9 Feb 2012, 12:23 AM
I'm having trouble using the sparklines in my grid. The grid is displayed in a tab. The store is loaded via PHP from a MySQL-Database. I tried several things to get the sparklines displayed. They should show a little history of some values. The format of the field in the store looks like this


"stats":"{values:[117,0,4,10,1,1,1,3,29,1,2,2,0,1000,0,2,1,0,1,1,1,1,0,1000,1000,1000,1,2,0]}"

The column in the columnModel looks like this

{
header: 'Stats',
xtype: 'sparklinecolumn',
dataIndex: 'stats',
sparkline: {
type: 'line',
barColor: "green"
}
}
What am I doing wrong? If I paste the values directly like the following, it works.
header: 'Stats',
xtype: 'sparklinecolumn',
sparkline: {
type: 'line',
barColor: "green",
values: [1,4,6,3,67,73,424,7,33,5,5]
}

But I don't know how I get the values out of my store.

Any help?

EDIT: I'm using ExtJS-version 3.3.1

Cyberluke
9 Feb 2012, 2:38 AM
Hi,

Please follow my steps above and it will work. You have to use the store only. Here is code copied from my older response, which gets the store and updates it with new values. You do it right, but there's a bug, which you have to fix. I'm now working on Ext Js 4 conversion of this plugin...



var store = this.myGridPanel.getStore(); store.removeAll(); var record = Ext.data.Record.create([ 'name' ], ['stats']); Ext.iterate(result.myObjects, function(myObject) { store.add(new record({ name : myObject.name, stats : {values:[1,2,3,10,1,4,6,78,23]} })); }); // ExtJS GridPanel render fix Ext.ux.Sparkline.refreshGrid(this.myGridPanel);

teddyk
9 Feb 2012, 3:45 AM
Could you please explain to me where to fill the code in, you posted? I have some experience with ExtJS but not enough to find that out on my own. Maybe a little example relevant to my problem. The store gets its data from a PHP-script, grid in tab-panel, columns defined in a columnmodel. It would be great ...

Cyberluke
9 Feb 2012, 3:57 AM
From my steps above:

1) https://github.com/dgaspar/Ext.ux.Sparkline/blob/master/Ext.ux.Sparkline.js
Line: 1075



Ext.ux.Sparkline.refreshGrid = function(grid) { var cm = grid.getColumnModel(); var cmlen = cm.getColumnCount(); for (i = 0; i < cmlen; i++) { var col = cm.getColumnAt(i); if(cm.config[i].xtype=='sparklinecolumn'){ var celllen = grid.getStore().getCount(); for (j = 0; j < celllen; j++) { var cell = grid.view.getCell(j, i); cell.innerHTML = ''; var cfg = {}; Ext.apply(cfg, grid.store.getAt(j).data[col.dataIndex], { renderTo:cell, width: grid.view.cm.getColumnWidth(i) }); Ext.applyIf(cfg,cm.config[i].sparkline||{}); new Ext.ux.Sparkline(cfg); } } } }

It does not matter if you use PHP or any other server-side language. ExtJs is a client-side language. You don't pass variables from PHP to ExtJs. If you want to pass the variable like this from server to the client, you use JSON RPC (AJAX), right?? You can print the initial values in PHP in the source, but you can't update it then and that's what you're asking...

So you create your GridPanel with sparkline and define a store like this:


myGridPanel = new Ext.grid.GridPanel({ autoHeight:true, width:250, title:'My stats', view : new Ext.grid.GridView({forceFit : true}), columns: [{ header: 'Name', dataIndex: 'name' },{ header: 'Stats', xtype:'sparklinecolumn', dataIndex: 'stats', sparkline:{ type:'line', maxSpotColor: "red", barColor:"green" } // default sparkline config for the column }], plugins:[new Ext.ux.Sparkline.GridPlugin()], store:new Ext.data.Store(), mode: 'local' });

Then you have another JS function (ExtJs), which will update your store periodically like this:
Browser with ExtJs ---> JSON RPC request ---> Server with PHP



fillGridPanel : function(result) { var store = this.myGridPanel.getStore(); store.removeAll(); var record = Ext.data.Record.create([ 'name' ], ['stats']); Ext.iterate(result.myObjects, function(myObject) { store.add(new record({ name : myObject.name, stats : {values:[1,2,3,10,1,4,6,78,23]} })); }); // ExtJS GridPanel render fix Ext.ux.Sparkline.refreshGrid(this.myGridPanel); }

The code here is real working example, I'm using, so it MUST work.

Hope it helps...
Luke

PS: sorry for the code without new lines, copying here on the forum is ugly. Use the code from my first response for better readibility - it's the SAME!

ttbgwt
14 Apr 2012, 12:27 PM
Any updates on the 4.1 version of this cool extension?

ttbgwt
21 Apr 2012, 7:31 AM
bump

Any updates on the 4.1 version of this cool extension?

samgauti88
5 Jun 2012, 11:09 PM
1.Use this store in your JS-------------------------

var sparkPanelStore = new Ext.data.Store({
url : sparkPanaleGridStoreUrl,
autoLoad : false,
reader : new Ext.data.JsonReader({
root : 'root'
}, [{name : 'name'},
{name : 'value'},
{name : 'stats'}
]),
listeners : {loadexception : function()
{Ext.MessageBox.show({icon : Ext.MessageBox.ERROR,buttons : Ext.MessageBox.OK,msg : "Error.",title : 'Error'});
}}
});

2.The correponding Java code will be -----
protected Object handleGetSparkPanelGridData()
{
JSONObject object = null;
JSONObject tempObject = null;
JSONArray arr2 = new JSONArray();
JSONArray arr = new JSONArray();
Object num[] = {10,-2,39,49,35,78,20};
arr2.addAll(Arrays.asList(num));
object = new JSONObject();
object.put("name", "Memory: ");
object.put("value", "82.3%");

tempObject = new JSONObject();
tempObject.put("values",array2);
tempObject.put("type","line" );
tempObject.put("maxSpotColor","red" );
object.put("stats", tempObject);
array.add(object);

object = new JSONObject();
object.put("root", array);
return object;
}

murali3
3 Sep 2012, 1:47 AM
Any direct implementation in current version of Extjs ??

Tim Vasil
17 Mar 2013, 9:10 PM
I've written a column subclass to render Sparklines with Ext JS 4.

42459

You can grab the code here: https://github.com/timvasil/Sparkline
You can see a demo here: http://jsfiddle.net/timvasil/2gVUh/1/

Unlike the original code, I didn't embed the jQuery Sparkline code into the implementation. You'll need to download jQuery and Sparklines separately.

Enjoy!
Tim