Ext.ux.Sparkline + Grid Plugin

[ttbgwt]

bump

Any updates on the 4.1 version of this cool extension?

[samgauti88]

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]

Any direct implementation in current version of Extjs ??

[Tim Vasil]

I've written a column subclass to render Sparklines with Ext JS 4.

sparkline.png

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