diff --git a/var/www/static/js/moduleTrending.js b/var/www/static/js/moduleTrending.js
index afb764c4..076a2e0b 100644
--- a/var/www/static/js/moduleTrending.js
+++ b/var/www/static/js/moduleTrending.js
@@ -5,31 +5,36 @@
*
*/
-var pie_threshold = 0.05
-var options = {
- series: { pie: { show: true,
- radius: 3/5,
- combine: {
- color: '#999',
- threshold: pie_threshold
- },
- label: {
- show: true,
- radius: 1,
- formatter: labelFormatter,
- background: {
- opacity: 0.5,
- color: '#000'
+
+/* VARIABLES */
+ var pie_threshold = 0.05
+ var options = {
+ series: { pie: { show: true,
+ radius: 3/5,
+ combine: {
+ color: '#999',
+ threshold: pie_threshold
+ },
+ label: {
+ show: true,
+ radius: 1,
+ formatter: labelFormatter,
+ background: {
+ opacity: 0.5,
+ color: '#000'
+ }
}
}
- }
- },
- grid: { hoverable: true, clickable: true },
- legend: { show: false },
- };
+ },
+ grid: { hoverable: true, clickable: true },
+ legend: { show: false },
+ };
+
+ /* Linked graph - remember the data */
+ var plot_data_old = []
+ var plot_old = []
-var plot_data_old = []
-var plot_old = []
+/* FUNCTIONS */
function labelFormatter(label, series) {
return "
"
@@ -37,6 +42,7 @@ function labelFormatter(label, series) {
}
+/* Plot, and bind chart listener */
function plot_top_graph(module_name, init){
/**** Pie Chart ****/
@@ -67,26 +73,31 @@ function plot_top_graph(module_name, init){
}
for(i=0; i
1){ // avoid adding plot_data for previous clicked pie part
plot_data_old = [];
plot_old = [];
- plot_data_old.push(plot.getData());
- plot_old.push(plot);
}
- if (can_bind){
+ plot_data_old.push(plot.getData());
+ plot_old.push(plot);
+
+ if (can_bind){ // avoid binding two listener for provider graphs
binder(module_name);
- if (module_name == "size")
+ if (module_name == "size") // bind the linked provider graph
binder("num");
else if (module_name == "num")
binder("size");
- }
+ }
});
@@ -195,80 +217,100 @@ function plot_top_graph(module_name, init){
data: temp_data_bar,
color: serie_color
};
- var plot = $.plot($(chartID), [barData], barOptions);
- if (plot_data_old.length<2){
- plot_data_old.push(plot.getData());
- plot_old.push(plot);
- } else {
+ plot = $.plot($(chartID), [barData], barOptions);
+
+ /* rememeber the data for the two graph */
+ if (plot_data_old.length>1){ // avoid adding plot_data for previous clicked pie part
plot_data_old = [];
plot_old = [];
- plot_data_old.push(plot.getData());
- plot_old.push(plot);
}
- if (can_bind){
- binder(module_name);
- if (module_name == "size")
- binder("num");
- else if (module_name == "num")
- binder("size");
- }
- });
- }
- };
-}
+ plot_data_old.push(plot.getData());
+ plot_old.push(plot);
+ if (can_bind){ // avoid binding two listener for provider graphs
+ $("#flot-bar-chart-"+module_name).unbind( "plothover.customHandler" );
+ binder(module_name);
+ if (module_name == "size"){ // bind the linked provider graph
+ $("#flot-bar-chart-"+"num").unbind( "plothover.customHandler" );
+ binder("num");
+ }
+ else if (module_name == "num"){
+ $("#flot-bar-chart-"+"size").unbind( "plothover.customHandler" );
+ binder("size");
+ }
+ }
+ });
+ }
+
+ }; // end update_bar_chart
+
+} // end plot_top_graph
+
+
+/* Bind a listener to the graph to display the value under the cursor in the approriate div */
function binder(module_name){
- $("#flot-bar-chart-"+module_name).bind("plothover", function (event, pos, item) {
- if (item) {
+ $("#flot-bar-chart-"+module_name).bind("plothover.customHandler", function (event, pos, item) {
+ if (item) { // a correct item is hovered
var x = item.datapoint[0]
var y = item.datapoint[1]
var date = new Date(parseInt(x));
var formated_date = date.getMonth()+'/'+date.getDate();
+ var color = item.series.color;
+ var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)";
+ // display the hovered value in the chart div
$("#tooltip_graph-"+module_name).html(item.series.label + " of " + formated_date + " = " + y+"")
- .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
+ .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})
.fadeIn(200);
- var plot_obj = plot_data_old[0]; //contain series
- for(serie=0; serie" + curr_data_other+"")
- .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
- .fadeIn(200);
- for(i=0; i" + curr_data_other+"")
- .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
+
+ $("#tooltip_graph-"+new_module_name).html(item.series.label + " of " + formated_date + " = " + curr_data_other+"")
+ .css({padding: "2px", width: 'auto', 'background': color_opac, 'border': "3px solid "+color})
.fadeIn(200);
+
+ // clean up other highlighted bar
+
for(i=0; i
@@ -67,7 +67,7 @@
Average paste size by provider
-
+
No bar hovered
@@ -76,7 +76,7 @@
Number of paste by provider
-
+
No bar hovered