Dojo DataGrid Test

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>

About henry416
I am a computer technology explorer and an university student based on Toronto. If you have any question, please feel free to discuss and comment here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s