make graphs hideable
This commit is contained in:
Dominik Heidler
parent
8bb4c8ce82
commit
3e4debab4a
|
|
@ -0,0 +1,229 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/*
|
||||
* Plugin to hide series in flot graphs.
|
||||
*
|
||||
* To activate, set legend.hideable to true in the flot options object.
|
||||
* To hide one or more series by default, set legend.hidden to an array of
|
||||
* label strings.
|
||||
*
|
||||
* At the moment, this only works with line and point graphs.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* var plotdata = [
|
||||
* {
|
||||
* data: [[1, 1], [2, 1], [3, 3], [4, 2], [5, 5]],
|
||||
* label: "graph 1"
|
||||
* },
|
||||
* {
|
||||
* data: [[1, 0], [2, 1], [3, 0], [4, 4], [5, 3]],
|
||||
* label: "graph 2"
|
||||
* }
|
||||
* ];
|
||||
*
|
||||
* plot = $.plot($("#placeholder"), plotdata, {
|
||||
* series: {
|
||||
* points: { show: true },
|
||||
* lines: { show: true }
|
||||
* },
|
||||
* legend: {
|
||||
* hideable: true,
|
||||
* hidden: ["graph 1", "graph 2"]
|
||||
* }
|
||||
* });
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
var options = { };
|
||||
|
||||
function init(plot) {
|
||||
var drawnOnce = false;
|
||||
|
||||
function findPlotSeries(label) {
|
||||
var plotdata = plot.getData();
|
||||
for (var i = 0; i < plotdata.length; i++) {
|
||||
if (plotdata[i].label == label) {
|
||||
return plotdata[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function plotLabelClicked(label, mouseOut) {
|
||||
var series = findPlotSeries(label);
|
||||
if (!series) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = plot.getOptions();
|
||||
var switchedOff = false;
|
||||
|
||||
if (typeof series.points.oldShow === "undefined") {
|
||||
series.points.oldShow = false;
|
||||
}
|
||||
if (typeof series.lines.oldShow === "undefined") {
|
||||
series.lines.oldShow = false;
|
||||
}
|
||||
|
||||
if (series.points.show && !series.points.oldShow) {
|
||||
series.points.show = false;
|
||||
series.points.oldShow = true;
|
||||
switchedOff = true;
|
||||
}
|
||||
if (series.lines.show && !series.lines.oldShow) {
|
||||
series.lines.show = false;
|
||||
series.lines.oldShow = true;
|
||||
switchedOff = true;
|
||||
}
|
||||
|
||||
if (switchedOff) {
|
||||
series.oldColor = series.color;
|
||||
series.color = "#fff";
|
||||
setHidden(options, label, true);
|
||||
} else {
|
||||
var switchedOn = false;
|
||||
|
||||
if (!series.points.show && series.points.oldShow) {
|
||||
series.points.show = true;
|
||||
series.points.oldShow = false;
|
||||
switchedOn = true;
|
||||
}
|
||||
if (!series.lines.show && series.lines.oldShow) {
|
||||
series.lines.show = true;
|
||||
series.lines.oldShow = false;
|
||||
switchedOn = true;
|
||||
}
|
||||
|
||||
if (switchedOn) {
|
||||
series.color = series.oldColor;
|
||||
setHidden(options, label, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setSetupRedraw () {
|
||||
// HACK: Reset the data, triggering recalculation of graph bounds
|
||||
plot.setData(plot.getData());
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
}
|
||||
|
||||
function setHidden(options, label, hide) {
|
||||
// Record state to a new variable in the legend option object.
|
||||
if (!options.legend.hidden) {
|
||||
options.legend.hidden = [];
|
||||
}
|
||||
|
||||
var pos = options.legend.hidden.indexOf(label);
|
||||
|
||||
if (hide) {
|
||||
if (pos < 0) {
|
||||
options.legend.hidden.push(label);
|
||||
}
|
||||
} else {
|
||||
if (pos > -1) {
|
||||
options.legend.hidden.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setHideAction(elem) {
|
||||
elem.mouseenter(function() { $(this).css("cursor", "pointer"); })
|
||||
.mouseleave(function() { $(this).css("cursor", "default"); })
|
||||
.unbind("click").click(function() {
|
||||
if ($(this).is(".legendColorBox")) {
|
||||
plotLabelClicked($(this).next('.legendLabel').text());
|
||||
} else {
|
||||
plotLabelClicked($(this).parent().text());
|
||||
}
|
||||
setSetupRedraw();
|
||||
});
|
||||
}
|
||||
|
||||
function plotLabelHandlers(plot) {
|
||||
var options = plot.getOptions();
|
||||
|
||||
if (!options.legend.hideable) {
|
||||
return;
|
||||
}
|
||||
|
||||
var p = plot.getPlaceholder();
|
||||
|
||||
setHideAction(p.find(".graphlabel"));
|
||||
setHideAction(p.find(".legendColorBox"));
|
||||
|
||||
if (!drawnOnce) {
|
||||
drawnOnce = true;
|
||||
if (options.legend.hidden) {
|
||||
for (var i = 0; i < options.legend.hidden.length; i++) {
|
||||
plotLabelClicked(options.legend.hidden[i], true);
|
||||
}
|
||||
setSetupRedraw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkOptions(plot, options) {
|
||||
if (!options.legend.hideable) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.legend.labelFormatter = function(label, series) {
|
||||
return '<span class="graphlabel">' + label + '</span>';
|
||||
};
|
||||
}
|
||||
|
||||
function hideDatapointsIfNecessary(plot, s, datapoints) {
|
||||
var options = plot.getOptions();
|
||||
|
||||
if (!options.legend.hideable) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.legend.hidden &&
|
||||
options.legend.hidden.indexOf(s.label) > -1) {
|
||||
var off = false;
|
||||
|
||||
if (s.points.show) {
|
||||
s.points.show = false;
|
||||
s.points.oldShow = true;
|
||||
off = true;
|
||||
}
|
||||
if (s.lines.show) {
|
||||
s.lines.show = false;
|
||||
s.lines.oldShow = true;
|
||||
off = true;
|
||||
}
|
||||
|
||||
if (off) {
|
||||
s.oldColor = s.color;
|
||||
s.color = "#fff";
|
||||
}
|
||||
}
|
||||
|
||||
if (!s.points.show && !s.lines.show) {
|
||||
s.datapoints.format = [ null, null ];
|
||||
}
|
||||
}
|
||||
|
||||
plot.hooks.processOptions.push(checkOptions);
|
||||
|
||||
plot.hooks.draw.push(function (plot, ctx) {
|
||||
plotLabelHandlers(plot);
|
||||
});
|
||||
|
||||
plot.hooks.processDatapoints.push(hideDatapointsIfNecessary);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'hiddenGraphs',
|
||||
version: '1.1'
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
<script src="{{ url_for('static', filename='js/graph/jquery.flot.selection.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/graph/jquery.flot.downsample.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/graph/jquery.flot.resize.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/graph/jquery.flot.hiddengraphs.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
|
|
|
|||
Loading…
Reference in New Issue