Ext.ux.Sparkline + Grid Plugin

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:

Code:

---

// 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

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 :)

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:

Code:

---

"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:

Code:

---

{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

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.

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.Sp...x.Sparkline.js
Line: 1093

Code:

---

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

---

Change to:

Code:

---

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):

Code:

---

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:

Code:

---

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):

Code:

---

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):

Code:

---

  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

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

Code:

---


"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

Code:

---

{
            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.

Code:

---

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

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...

Code:

---

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);

---

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 ...

From my steps above:

1) https://github.com/dgaspar/Ext.ux.Sp...x.Sparkline.js
Line: 1075

Code:

---

  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:

Code:

---

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

Code:

---

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!

Any updates on the 4.1 version of this cool extension?