Dojo DataGrid Test
May 25, 2012 Leave a comment
I am looking at representing the simulated streaming data in a more friendly representation on the web. Dojo DataGrid seems to be a choice. Thus, this is my first test on Dojo DataGrid. For full description on Dojo DataGrid , refer to http://dojotoolkit.org/documentation/tutorials/1.7/datagrid/
<!DOCTYPE html> <html> <head> <title>Linux System Activity Report</title> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/claroGrid.css" /> </head> <body class="claro"> <h1>Linux System Activity Report</h1> <div style="width: 840px; height: 200px"> <table id="sar" dojoType="dojox.grid.DataGrid"> <thead> <tr> <th field="time">Time</th> <th field="cpu">CPU</th> <th field="user">%user</th> <th field="nice">%nice</th> <th field="system">%system</th> <th field="iowait">%iowait</th> <th field="steal">%steal</th> <th field="idle">%idle</th> </tr> </thead> </table> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); </script> <script type="text/javascript"> dojo.ready(function() { var sarvar = { items: [ { "time":"10:30:16 AM", "cpu":"all", "user":"26.79", "nice":"0.00", "system":"7.66", "iowait":"0.00", "steal":"0.00", "idle":"65.55" }, { "time":"10:30:17 AM", "cpu":"all", "user":"32.79", "nice":"0.00", "system":"8.99", "iowait":"0.00", "steal":"0.00", "idle":"59.02" }, { "time":"10:30:18 AM", "cpu":"all", "user":"32.24", "nice":"0.00", "system":"6.78", "iowait":"0.00", "steal":"0.00", "idle":"62.43" }, { "time":"10:30:19 AM", "cpu":"all", "user":"32.79", "nice":"0.00", "system":"8.80", "iowait":"0.00", "steal":"0.00", "idle":"63.94" } ], identifier: "time" }; var dataStore = new dojo.data.ItemFileReadStore({ data:sarvar }); var grid = dijit.byId("sar"); grid.setStore(dataStore); }); </script> </body> </html>