summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/css/style.css30
-rw-r--r--index.html4
-rw-r--r--jarmon.js49
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;
diff --git a/index.html b/index.html
index 6018af7..913dfe4 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/jarmon.js b/jarmon.js
index 8df8dd6..73f9881 100644
--- a/jarmon.js
+++ b/jarmon.js
@@ -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);
};