25 May 2012

Showing Memory status using Dojo Pie chart


Widget Tree strucuture

.
|-- dijit
|   |-- _base
|    ...
|-- dojo
|   |-- _base
|   ...
|-- dojox
|   |-- analytics
|    ...
`-- widgets
    `-- admin
        |-- MemoryStatus.js
        `-- memoryStatus.tmpl


1. Source code for MemoryStatus.js

require(
    [
        "dojo/_base/declare", "dojo/parser", "dojo/ready",
        "dijit/_WidgetBase",  "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin", "dojo/html",


        // Require the theme of our choosing
        "dojox/charting/themes/Claro",

        "dojox/charting/Chart",
        //     We want to plot a Pie chart
        "dojox/charting/plot2d/Pie",
                   
        // Retrieve the Legend, Tooltip, and MoveSlice classes
        "dojox/charting/action2d/Tooltip",
        "dojox/charting/action2d/MoveSlice",

        //    We want to use Markers
        "dojox/charting/plot2d/Markers",

        //    We'll use default x/y axes
        "dojox/charting/axis2d/Default",
       
        "dojox/charting/widget/Legend"
    ],
      
    function(declare, parser, ready, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, html){

        declare("widgets.admin.MemoryStatus", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
            templatePath: "js/dojo/widgets/admin/memoryStatus.tmpl",
            widgetsInTemplate : true,
            memsize: 3851124,
            used : 2375716,
            shared : 0,
            buffers : 268604,
            cached: 619712,

            postCreate : function (args, farg)
            {
                this._set();
            },

            getData : function()
            {
                var free = this.memsize-this.used;
                return [
                    { "x": "1", "y": this.used, text : "Memory used" ,  tooltip : "Memory used : " + this.bytesToSize(this.used)},
                    { "x": "2", "y": free,      text : "Free memory" , tooltip: "Free Memory: " + this.bytesToSize(free) }
                ];
            },

            _set : function()
            {
                if (this.loaded == true ) {
                    return;
                }
                this.loaded = true;
                var chart = new dojox.charting.Chart(this.graphicalNode);
                chart.setTheme(dojox.charting.themes.Claro);
                chart.addPlot("default", {type: 'Pie', markers: true, labelOffset: -20});
                chart.addSeries("Memory", this.getData());

                // Create the tooltip
                var tip = new dojox.charting.action2d.Tooltip(chart, "default");

                // Create the slice mover
                var mag = new dojox.charting.action2d.MoveSlice(chart,"default");

                chart.render();

                var legend = new dojox.charting.widget.Legend({ chart: chart }, this.legendsNode);
               
            },

            bytesToSize: function (kbytes) {
                    var bytes = kbytes * 1024;
                    var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                    var i = +Math.floor(Math.log(bytes) / Math.log(1024));
                    return  (bytes / Math.pow(1024, i)).toFixed( i ? 1 : 0 ) + ' ' + sizes[ isNaN( bytes ) ? 0 : i+1 ];
            }

        });

        ready(function(){
            // Call the parser manually so it runs after our widget is defined, and page has finished loading
            parser.parse();
        });

    }
);

2. Source code for memoryStatus.tmpl

<div id="${id}">
    <div data-dojo-attach-point='graphicalNode'></div>
    <div data-dojo-attach-point='legendsNode'></div>
</div>


3. Using widget in HTML sample code

<html>
<head>
    <title> Memory status: </title>

    <link rel="stylesheet" type="text/css" href="/test1/js/dojo/dojo/resources/dojo.css"/>
    <link rel='stylesheet' type="text/css" hfre='text1/js/dojo/dijit/themes/tundra/ProgressBar.css'/>
    <link rel="stylesheet" href="/test1/js/dojo/dijit/themes/tundra/tundra.css"></link>
    <script src="/test1/js/dojo/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>

    <script type='text/javascript'>
        require(["dijit/registry", "dojo/parser", "widgets/admin/MemoryStatus",
                "dojo/domReady!"], function(registry, parser) {
                    // Explicitly parse the page
                    //parser.parse();

                });
    </script>
    
</head>
    <body class='tundra'>

        <br>
        <h1> Memory usage: </h1>
        <br>
        <div data-dojo-type="widgets.admin.MemoryStatus" memsize=3851124 used=2396496 style="width:400px:margin:50px"></div>

        <br><br>
        <div data-dojo-type="widgets.admin.MemoryStatus" memsize=3851124 used=3680680 style="width:400px"></div>
    </body>
</html>


4. Sample output


No comments:

Post a Comment