Render the legend ourselves, thus removing it from the chart.
This commit is contained in:
		
							parent
							
								
									cbb334c042
								
							
						
					
					
						commit
						b34771f52f
					
				| 
						 | 
				
			
			@ -136,6 +136,8 @@ p.status-error, p.warning { margin: 20px; padding: 15px; border-radius: 10px; -m
 | 
			
		|||
.chart-medium { width: 600px; height: 200px; }
 | 
			
		||||
.chart-large  { width: 800px; height: 300px; }
 | 
			
		||||
 | 
			
		||||
.chart-legend { float: left; }
 | 
			
		||||
 | 
			
		||||
.mini-highlight { font-size: 150%; padding:10px; background-color: #ddd; color: #888; border-radius: 10px; -moz-border-radius: 10px; line-height: 300%; }
 | 
			
		||||
 | 
			
		||||
.micro-highlight { min-width: 120px; font-size: 100%; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 0 0; color: #888; border-radius: 10px; -moz-border-radius: 10px; }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -4,6 +4,8 @@ function render_charts() {
 | 
			
		|||
    });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
var chart_colors = ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed'];
 | 
			
		||||
 | 
			
		||||
function render_chart(div) {
 | 
			
		||||
    var id = div.attr('id').substring('chart-'.length);
 | 
			
		||||
    var rate_mode = div.hasClass('chart-rates');
 | 
			
		||||
| 
						 | 
				
			
			@ -13,23 +15,24 @@ function render_chart(div) {
 | 
			
		|||
        grid:   { borderWidth: 2, borderColor: "#aaa" },
 | 
			
		||||
        xaxis:  { tickColor: "#fff", mode: "time" },
 | 
			
		||||
        yaxis:  { tickColor: "#eee", min: 0 },
 | 
			
		||||
        legend: { position: 'se', backgroundOpacity: 0.5 }
 | 
			
		||||
        legend: { show: false }
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    var out_data = [];
 | 
			
		||||
    var i = 0;
 | 
			
		||||
    for (var name in chart_data[id]) {
 | 
			
		||||
        var data = chart_data[id][name];
 | 
			
		||||
        var samples = data.samples;
 | 
			
		||||
        var d = [];
 | 
			
		||||
        for (var i = 1; i < samples.length; i++) {
 | 
			
		||||
            var x = samples[i].timestamp;
 | 
			
		||||
        for (var j = 1; j < samples.length; j++) {
 | 
			
		||||
            var x = samples[j].timestamp;
 | 
			
		||||
            var y;
 | 
			
		||||
            if (rate_mode) {
 | 
			
		||||
                y = (samples[i - 1].sample - samples[i].sample) * 1000 /
 | 
			
		||||
                    (samples[i - 1].timestamp - samples[i].timestamp);
 | 
			
		||||
                y = (samples[j - 1].sample - samples[j].sample) * 1000 /
 | 
			
		||||
                    (samples[j - 1].timestamp - samples[j].timestamp);
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
                y = samples[i].sample;
 | 
			
		||||
                y = samples[j].sample;
 | 
			
		||||
            }
 | 
			
		||||
            d.push([x, y]);
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -40,7 +43,8 @@ function render_chart(div) {
 | 
			
		|||
        else {
 | 
			
		||||
            suffix = " (" + samples[0].sample + " msg)";
 | 
			
		||||
        }
 | 
			
		||||
        out_data.push({label: name + suffix, data: d});
 | 
			
		||||
        out_data.push({data: d, color: chart_colors[i]});
 | 
			
		||||
        i++;
 | 
			
		||||
    }
 | 
			
		||||
    chart_data[id] = {};
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -591,18 +591,31 @@ function rates_chart_or_text(id, stats, items, rates_counts) {
 | 
			
		|||
 | 
			
		||||
function rates_chart(id, items, stats, rates_counts) {
 | 
			
		||||
    var size = get_pref('chart-size-' + id);
 | 
			
		||||
    var show = false;
 | 
			
		||||
    var show = [];
 | 
			
		||||
    chart_data[id] = {};
 | 
			
		||||
    for (var i in items) {
 | 
			
		||||
        var name = items[i][0];
 | 
			
		||||
        var key = items[i][1] + '_details';
 | 
			
		||||
        if (key in stats) {
 | 
			
		||||
            chart_data[id][name] = stats[key];
 | 
			
		||||
            show = true;
 | 
			
		||||
            if (rates_counts == 'rates') {
 | 
			
		||||
                show.push([name, stats[key].rate + " msg/s"]);
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
                show.push([name, stats[key].samples[0].sample + " msg"]);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    return show ? '<div id="chart-' + id + '" class="chart chart-' + size +
 | 
			
		||||
        ' chart-' + rates_counts + '"></div>' : '';
 | 
			
		||||
    }
 | 
			
		||||
    var html = '<div id="chart-' + id + '" class="chart chart-' + size +
 | 
			
		||||
        ' chart-' + rates_counts + '"></div>';
 | 
			
		||||
    html += '<table class="facts">';
 | 
			
		||||
    for (var i = 0; i < show.length; i++) {
 | 
			
		||||
        html += '<tr><th>' + show[i][0] + '</th><td>';
 | 
			
		||||
        html += '<div class="memory-key" style="background: ' + chart_colors[i];
 | 
			
		||||
        html += ';"></div>' + show[i][1] + '</td></tr>'
 | 
			
		||||
    }
 | 
			
		||||
    html += '</table>';
 | 
			
		||||
    return show.length > 0 ? html : '';
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function rates_text(items, stats, mode, rates_counts) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue