<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Memory Usage Statistics" scrolling="true" height="300">
        <Require feature="dynamic-height"/>
        <Require feature="wso2.vis"/>
    </ModulePrefs>
    <Content type="html" view="default">
        <![CDATA[
        <script language="javascript" type="text/javascript">

            var dataProvider = new wso2vis.p.ProviderGET("carbon/statistics/gadget/system_stats_xml_ajaxprocessor.jsp");
            var dataFilter = new wso2vis.f.BasicFilter(["stats","statistic"], ["@name"]);

            var timer = new wso2vis.u.Timer(20000);

            function globalTick() {
            dataProvider.pullData();
            }

            function areaTooltip(data) {
            return data["@name"];
            }

            function areaOnClick(data) {
            alert("clicked: " + data["@name"]);
            }

            window.onload = function () {

            var areaChart = new wso2vis.s.chart.protovis.AreaChart("chart", "Memory Usage", "");

            areaChart.dataField(["stats","statistic"])
            .dataValue(["value"])
            .dataLabel(["@name"])
            .width(260)
            .height(300)
            .band(20)
            .legend(false)
            .marks(true)
            .xSuffix("s")
            .dirFromLeft(true);

            areaChart.onTooltip = areaTooltip;
            areaChart.onClick = areaOnClick;
            areaChart.load(); // width, height, band - (optional)

            dataProvider.addDataReceiver(dataFilter);
            dataFilter.addDataReceiver(areaChart);

            dataProvider.initialize();

            timer.tick = globalTick;
            timer.startTimer();

            gadgets.window.adjustHeight();

            }

        </script>
        <style>
            div#qTip {
            padding: 3px;
            border: 1px solid #666;
            border-right-width: 2px;
            border-bottom-width: 2px;
            display: none;
            background: #999;
            color: #FFF;
            font: bold 10px Verdana, Arial, sans-serif;
            text-align: left;
            position: absolute;
            z-index: 1000;
            }
        </style>

    </head>
    <body>
        <div id="chart"></div>
    </body>
  ]]>
    </Content>

    <Content type="html" view="canvas">
        <![CDATA[
        <script language="javascript" type="text/javascript">

            var dataProvider = new wso2vis.p.ProviderGET("carbon/statistics/gadget/system_stats_xml_ajaxprocessor.jsp");
            var dataFilter = new wso2vis.f.BasicFilter(["stats","statistic"], ["@name"]);

            var timer = new wso2vis.u.Timer(10000);

            function globalTick() {
            dataProvider.pullData();
            }

            function areaTooltip(data) {
            return data["@name"];
            }

            function areaOnClick(data) {
            alert("clicked: " + data["@name"]);
            }

            window.onload = function () {

            var areaChart = new wso2vis.s.chart.protovis.AreaChart("chart", "Memory Usage", "");

            areaChart.dataField(["stats","statistic"])
            .dataValue(["value"])
            .dataLabel(["@name"])
            .width(1000)
            .height(300)
            .band(10)
            .legend(false)
            .marks(true)
            .xSuffix("s")
            .dirFromLeft(true);

            areaChart.onTooltip = areaTooltip;
            areaChart.onClick = areaOnClick;
            areaChart.load(); // width, height, band - (optional)

            dataProvider.addDataReceiver(dataFilter);
            dataFilter.addDataReceiver(areaChart);

            dataProvider.initialize();

            timer.tick = globalTick;
            timer.startTimer();

            gadgets.window.adjustHeight();

            }

        </script>
        <style>
            div#qTip {
            padding: 3px;
            border: 1px solid #666;
            border-right-width: 2px;
            border-bottom-width: 2px;
            display: none;
            background: #999;
            color: #FFF;
            font: bold 10px Verdana, Arial, sans-serif;
            text-align: left;
            position: absolute;
            z-index: 1000;
            }
        </style>

    </head>
    <body>
        <div id="chart"></div>
    </body>
  ]]>
    </Content>
</Module>