Arunmozhi P avatar Arunmozhi P committed 74bf051

hbargraph rendering done

Comments (0)

Files changed (2)

data/viewer/viewer.html

         <title>Site Tracker - Visualization Window</title>
     </head>
     <body>
-        <div id="container">
+        <div id="container" style="height:600px; width:800px;">
         </div>
-        <canvas id="graph" width="800" height="600"></canvas>
     </body>
 </html>
 

data/viewer/viewer.js

     latest.data.sort(sortTime);
     var today = latest.data.slice(0,9);
     $('#container').empty();
+    /**
+     *  The following lines were used for Bluff library and has been kept for
+     *  historical reference. Should be deleted once confirmed not required.
+     **/
+    /*
     var dom = '<table id="data" style="display:none;" ><caption>10 most '+
               'visited websites</caption><thead><tr><th >Domain'+
               '</th><th scope="row">Time in sec</th></thead><tbody>';
     dom += "</tbody></table>";
 
     //$('#container').append(dom);
+    */
+    var minViewed = [];
+    var sitesViewed = [];
+    $.each(today, function(i,ele){
+        var site = ele.site.split('.');
+        if(site[0] === 'www'){
+            site = site.slice(1);
+        }
+        site = site.join('.');
 
+        minViewed.push(ele.time.toFixed(2));
+        sitesViewed.push(site);
+    });
     var r = Raphael("container"),
         fin = function () {
             this.flag = r.g.popup(this.bar.x, this.bar.y, this.bar.value || "0")
                             .insertBefore(this);
-            this.bar.attr({fill: "#300"});
+            this.bar.attr({opacity: 0.6});
         },
         fout = function () {
             this.flag.animate({opacity: 0}, 300, function () {this.remove();});
+            this.bar.attr({opacity: 1});
         },
         fin2 = function () {
             var y = [], res = [];
             this.flag.animate({opacity: 0}, 300, function () {this.remove();});
         };
 
-    r.g.hbarchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).hover(fin, fout);
+    r.g.hbarchart(90, 10, 700, 560, minViewed).hover(fin, fout);
+    // axis( x, y, length, from, to, steps, orientation, labels, type, dashsize)
+    if (minViewed[0] != undefined){
+    r.g.axis(90,570, 700, 0,Math.round(minViewed[0]), 15, 0);
+    
+    axis = r.g.axis(80,560,560,null,null,sitesViewed.length,1,
+            sitesViewed.reverse(), "|", 0);
+    axis.text.attr({font:"12px Arial", "font-weight": "regular",
+        "fill": "#333333" });
+    }
+
+   var titleText =  r.g.text(400,10, "Top 10 Sites Viewed Today");
+   titleText.attr({ font: "16px Arial", "font-weigth" : "bold" });
+
 });
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.