diff --git a/frontend/index.html b/frontend/index.html index 9acb654..eb5add9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -38,7 +38,10 @@
-
+
+
+
Test
+
diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js index e60d5d0..b16c720 100644 --- a/frontend/javascripts/frontend.js +++ b/frontend/javascripts/frontend.js @@ -42,7 +42,11 @@ vz.wui.init = function() { }).next().hide(); // make buttons fancy - $('button, input[type=button]').button(); + $('button, input[type=button],[type=image]').button(); + + // bind plot actions + $('#controls button').click(this.handleControls); + $('#controls').buttonset(); // tuple resolution var tup = $('#tuples'); @@ -127,11 +131,6 @@ vz.wui.dialogs.init = function() { * Bind events to handle plot zooming & panning */ vz.wui.initEvents = function() { - // bind plot actions - $('#controls button').button().click(vz.wui.handleControls); - $('#controls').buttonset(); - - $('#plot') .bind("plotselected", function (event, ranges) { vz.options.plot.xaxis.min = ranges.xaxis.from; @@ -361,7 +360,7 @@ vz.entities.each = function(cb) { * Load json data from the backend */ vz.entities.loadData = function() { - //$('#plot').html('
loading...

Loading...

'); + $('#overlay').html('loading...

Loading...

'); this.each(function(entity, parent) { if (entity.active && entity.type != 'group') { // TODO add group data aggregation vz.load('data', entity.uuid, @@ -404,12 +403,15 @@ vz.drawPlot = function () { } }); - if (data.length > 0) { - vz.plot = $.plot($('#plot'), data, vz.options.plot); + if (data.length == 0) { + $('#overlay').html('no data...

Nothing to plot...

'); + data.push({}); // add empty dataset to show axis } else { - $('#plot').html('
no data...

Nothing to plot...

'); + $('#overlay').empty(); } + + vz.plot = $.plot($('#flot'), data, vz.options.plot); }; /** diff --git a/frontend/stylesheets/style.css b/frontend/stylesheets/style.css index 324ddf7..14476ed 100644 --- a/frontend/stylesheets/style.css +++ b/frontend/stylesheets/style.css @@ -34,9 +34,26 @@ tbody tr td { } #plot { + position: relative; +} + +#flot { height: 400px; } +#overlay { + position: absolute; + width: 800px; + top: 0; + z-index: 1; + + display: block; + margin: auto; + padding-top: 150px; + text-align: center; + color: grey; +} + #footer { text-align: center; font-size: 0.7em; @@ -129,14 +146,6 @@ tbody tr td { width: 20px; } -.plotcenter { - display: block; - margin: auto; - padding-top: 150px; - text-align: center; - color: grey; -} - /* additional theming for user interface */ .ui-error .ui-widget-header { background-image: url("../images/ui-bg_gloss-wave_35_red_500x100.png");