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>
Henry Chen 