diff options
| author | Richard Wall <richard@aziz> | 2010-07-20 06:10:04 +0100 |
|---|---|---|
| committer | Richard Wall <richard@aziz> | 2010-07-20 06:10:04 +0100 |
| commit | 74b6b37ef2890e716998a66b91e65b247aedec72 (patch) | |
| tree | 228c8d18e8e5fa2e4724e11630ecceb3d6ecc2e8 | |
| parent | f619f6f2974ffa59822dcb57baaf061d8986ff97 (diff) | |
Move the legend beneath the graph where there is more room for a large number of labels
| -rw-r--r-- | assets/css/style.css | 30 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | jarmon.js | 49 |
3 files changed, 61 insertions, 22 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 8f5798e..f1c21ef 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -13,6 +13,11 @@ h2 { margin: 20px auto 5px auto; font-size: 14px; text-align: left; + clear: both; +} + +p, li, dt, dd, td, th, div { + font-size: 12px; } .loading { @@ -33,22 +38,37 @@ h2 { margin: 0 auto 0 auto; } -.chart canvas { -} - .tickLabel { width:50px; overflow:hidden; } -.legendLabel { +.graph-legend { + width: 790px; + padding: 5px 0 5px 0; + margin: 10px auto 0 auto; + background-color: #f7f7f7; + position: relative; + left: 25px; +} + +.graph-legend .legendItem { + float: left; cursor: pointer; + margin-right: 20px; + margin-top: 5px; + margin-left: 5px; } -.legend .disabled { +.graph-legend .disabled { text-decoration: line-through; } +.graph-legend .legendColorBox { + float: left; + margin-right: 5px; +} + input[type=checkbox] { margin: 0; padding: 0; @@ -1,4 +1,4 @@ - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> @@ -17,6 +17,7 @@ <script type="text/javascript" src="docs/jarmon_example_recipes.js"></script> <script type="text/javascript"> // Recipes for the charts on this page + var application_recipes = [ { title: 'Jarmon Webserver TCP Stats', @@ -231,6 +232,7 @@ <div class="chart-container"> <h2 class="title"></h2> <div class="chart"></div> + <div class="graph-legend"></div> </div> </div> </body> @@ -350,6 +350,7 @@ jarmon.RrdQueryDsProxy.prototype.getData = function(startTime, endTime) { jarmon.Chart = function(template, options) { this.template = template; this.options = jQuery.extend(true, {yaxis: {}}, options); + this.data = []; var self = this; @@ -357,7 +358,7 @@ jarmon.Chart = function(template, options) { // Listen for clicks on the legend items - onclick enable / disable the // corresponding data source. - $('.legend .legendLabel', this.template[0]).live('click', function(e) { + $('.graph-legend .legendItem', this.template[0]).live('click', function(e) { self.switchDataEnabled($(this).text()); self.draw(); }); @@ -521,26 +522,38 @@ jarmon.Chart.prototype.draw = function() { } } - $.plot(self.template, data, self.options); + $.plot(self.template.find('.chart'), data, self.options); - // Highlight any disabled data sources in the legend - self.template.find('.legendLabel') - .attr('title', 'Data series switch - click to turn this data series on or off') - .each( - function(i, el) { - var labelCell = $(el); - if( $.inArray(labelCell.text(), disabled) > -1 ) { - labelCell.addClass('disabled'); - } - } - ); var yaxisUnitLabel = $('<div>').text(self.siPrefix + unit) .css({width: '100px', position: 'absolute', top: '80px', left: '-90px', 'text-align': 'right'}); - self.template.append(yaxisUnitLabel); + self.template.find('.chart').append(yaxisUnitLabel); + + var legend = self.template.find('.graph-legend'); + legend.empty(); + self.template.find('.legendLabel') + .each(function(i, el) { + var orig = $(el); + var label = orig.text(); + var newEl = $('<div />') + .attr('class', 'legendItem') + .attr('title', 'Data series switch - click to turn this data series on or off') + .width(orig.width()+20) + .text(label) + .prepend(orig.prev().find('div div').clone().addClass('legendColorBox')) + .appendTo(legend); + + if( $.inArray(label, disabled) > -1 ) { + newEl.addClass('disabled'); + } + }) + .remove(); + legend.append($('<div />').css('clear', 'both')); + self.template.find('.legend').remove(); + yaxisUnitLabel.position(self.template.position()); return data; }, this) @@ -598,7 +611,7 @@ jarmon.Chart.fromRecipe = function(rrdUrlList, recipes, templateFactory, downloa if(chartData.length > 0) { template = templateFactory(); template.find('.title').text(recipe['title']); - c = new jarmon.Chart(template.find('.chart'), recipe['options']); + c = new jarmon.Chart(template, recipe['options']); for(j=0; j<chartData.length; j++) { c.addData.apply(c, chartData[j]); } @@ -621,7 +634,7 @@ jarmon.Chart.BASE_OPTIONS = { }, legend: { position: 'nw', - noColumns: 2 + noColumns: 1 }, selection: { mode: 'x' @@ -817,6 +830,7 @@ jarmon.ChartCoordinator.prototype.update = function() { } return MochiKit.Async.gatherResults(chartsLoading).addCallback( function(self, startTime, endTime, chartData) { + var firstUpdate = new Date().getTime(); var lastUpdate = 0; @@ -866,6 +880,9 @@ jarmon.ChartCoordinator.prototype.update = function() { self.rangePreviewOptions); self.rangePreview.setSelection(ranges, true); + for(var i=0; i<=self.charts.length; i++) { + self.charts[i].template.find('') + } }, this, startTime, endTime); }; |