iobroker.ebus 3.2.4 → 3.2.6

package/widgets/ebus/lib/js/flot/jquery.flot.legend.js

@@ -1,437 +1,437 @@
-/* Flot plugin for drawing legends.
-
-*/
-
-(function($) {
-    var defaultOptions = {
-        legend: {
-            show: false,
-            noColumns: 1,
-            labelFormatter: null, // fn: string -> string
-            container: null, // container (as jQuery object) to put legend in, null means default on top of graph
-            position: 'ne', // position of default legend container within plot
-            margin: 5, // distance from grid edge to default legend container within plot
-            sorted: null // default to no legend sorting
-        }
-    };
-
-    function insertLegend(plot, options, placeholder, legendEntries) {
-        // clear before redraw
-        if (options.legend.container != null) {
-            $(options.legend.container).html('');
-        } else {
-            placeholder.find('.legend').remove();
-        }
-
-        if (!options.legend.show) {
-            return;
-        }
-
-        // Save the legend entries in legend options
-        var entries = options.legend.legendEntries = legendEntries,
-            plotOffset = options.legend.plotOffset = plot.getPlotOffset(),
-            html = [],
-            entry, labelHtml, iconHtml,
-            j = 0,
-            i,
-            pos = "",
-            p = options.legend.position,
-            m = options.legend.margin,
-            shape = {
-                name: '',
-                label: '',
-                xPos: '',
-                yPos: ''
-            };
-
-        html[j++] = '<svg class="legendLayer" style="width:inherit;height:inherit;">';
-        html[j++] = '<rect class="background" width="100%" height="100%"/>';
-        html[j++] = svgShapeDefs;
-
-        var left = 0;
-        var columnWidths = [];
-        var style = window.getComputedStyle(document.querySelector('body'));
-        for (i = 0; i < entries.length; ++i) {
-            let columnIndex = i % options.legend.noColumns;
-            entry = entries[i];
-            shape.label = entry.label;
-            var info = plot.getSurface().getTextInfo('', shape.label, {
-                style: style.fontStyle,
-                variant: style.fontVariant,
-                weight: style.fontWeight,
-                size: parseInt(style.fontSize),
-                lineHeight: parseInt(style.lineHeight),
-                family: style.fontFamily
-            });
-
-            var labelWidth = info.width;
-            // 36px = 1.5em + 6px margin
-            var iconWidth = 48;
-            if (columnWidths[columnIndex]) {
-                if (labelWidth > columnWidths[columnIndex]) {
-                    columnWidths[columnIndex] = labelWidth + iconWidth;
-                }
-            } else {
-                columnWidths[columnIndex] = labelWidth + iconWidth;
-            }
-        }
-
-        // Generate html for icons and labels from a list of entries
-        for (i = 0; i < entries.length; ++i) {
-            let columnIndex = i % options.legend.noColumns;
-            entry = entries[i];
-            iconHtml = '';
-            shape.label = entry.label;
-            shape.xPos = (left + 3) + 'px';
-            left += columnWidths[columnIndex];
-            if ((i + 1) % options.legend.noColumns === 0) {
-                left = 0;
-            }
-            shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em';
-            // area
-            if (entry.options.lines.show && entry.options.lines.fill) {
-                shape.name = 'area';
-                shape.fillColor = entry.color;
-                iconHtml += getEntryIconHtml(shape);
-            }
-            // bars
-            if (entry.options.bars.show) {
-                shape.name = 'bar';
-                shape.fillColor = entry.color;
-                iconHtml += getEntryIconHtml(shape);
-            }
-            // lines
-            if (entry.options.lines.show && !entry.options.lines.fill) {
-                shape.name = 'line';
-                shape.strokeColor = entry.color;
-                shape.strokeWidth = entry.options.lines.lineWidth;
-                iconHtml += getEntryIconHtml(shape);
-            }
-            // points
-            if (entry.options.points.show) {
-                shape.name = entry.options.points.symbol;
-                shape.strokeColor = entry.color;
-                shape.fillColor = entry.options.points.fillColor;
-                shape.strokeWidth = entry.options.points.lineWidth;
-                iconHtml += getEntryIconHtml(shape);
-            }
-
-            labelHtml = '<text x="' + shape.xPos + '" y="' + shape.yPos + '" text-anchor="start"><tspan dx="2em" dy="1.2em">' + shape.label + '</tspan></text>'
-            html[j++] = '<g>' + iconHtml + labelHtml + '</g>';
-        }
-
-        html[j++] = '</svg>';
-        if (m[0] == null) {
-            m = [m, m];
-        }
-
-        if (p.charAt(0) === 'n') {
-            pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
-        } else if (p.charAt(0) === 's') {
-            pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
-        }
-
-        if (p.charAt(1) === 'e') {
-            pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
-        } else if (p.charAt(1) === 'w') {
-            pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
-        }
-
-        var width = 6;
-        for (i = 0; i < columnWidths.length; ++i) {
-            width += columnWidths[i];
-        }
-
-        var legendEl,
-            height = Math.ceil(entries.length / options.legend.noColumns) * 1.6;
-        if (!options.legend.container) {
-            legendEl = $('<div class="legend" style="position:absolute;' + pos + '">' + html.join('') + '</div>').appendTo(placeholder);
-            legendEl.css('width', width + 'px');
-            legendEl.css('height', height + 'em');
-            legendEl.css('pointerEvents', 'none');
-        } else {
-            legendEl = $(html.join('')).appendTo(options.legend.container)[0];
-            options.legend.container.style.width = width + 'px';
-            options.legend.container.style.height = height + 'em';
-        }
-    }
-
-    // Generate html for a shape
-    function getEntryIconHtml(shape) {
-        var html = '',
-            name = shape.name,
-            x = shape.xPos,
-            y = shape.yPos,
-            fill = shape.fillColor,
-            stroke = shape.strokeColor,
-            width = shape.strokeWidth;
-        switch (name) {
-            case 'circle':
-                html = '<use xlink:href="#circle" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'diamond':
-                html = '<use xlink:href="#diamond" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'cross':
-                html = '<use xlink:href="#cross" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    // 'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'rectangle':
-                html = '<use xlink:href="#rectangle" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'plus':
-                html = '<use xlink:href="#plus" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    // 'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'bar':
-                html = '<use xlink:href="#bars" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    // 'stroke="' + stroke + '" ' +
-                    // 'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'area':
-                html = '<use xlink:href="#area" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    // 'stroke="' + stroke + '" ' +
-                    // 'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            case 'line':
-                html = '<use xlink:href="#line" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    // 'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-                break;
-            default:
-                // default is circle
-                html = '<use xlink:href="#circle" class="legendIcon" ' +
-                    'x="' + x + '" ' +
-                    'y="' + y + '" ' +
-                    'fill="' + fill + '" ' +
-                    'stroke="' + stroke + '" ' +
-                    'stroke-width="' + width + '" ' +
-                    'width="1.5em" height="1.5em"' +
-                    '/>';
-        }
-
-        return html;
-    }
-
-    // Define svg symbols for shapes
-    var svgShapeDefs = '' +
-        '<defs>' +
-            '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +
-                '<polyline points="0,15 5,5 10,10 15,0"/>' +
-            '</symbol>' +
-
-            '<symbol id="area" stroke-width="1" viewBox="-5 -5 25 25">' +
-                '<polyline points="0,15 5,5 10,10 15,0, 15,15, 0,15"/>' +
-            '</symbol>' +
-
-            '<symbol id="bars" stroke-width="1" viewBox="-5 -5 25 25">' +
-                '<polyline points="1.5,15.5 1.5,12.5, 4.5,12.5 4.5,15.5 6.5,15.5 6.5,3.5, 9.5,3.5 9.5,15.5 11.5,15.5 11.5,7.5 14.5,7.5 14.5,15.5 1.5,15.5"/>' +
-            '</symbol>' +
-
-            '<symbol id="circle" viewBox="-5 -5 25 25">' +
-                '<circle cx="0" cy="15" r="2.5"/>' +
-                '<circle cx="5" cy="5" r="2.5"/>' +
-                '<circle cx="10" cy="10" r="2.5"/>' +
-                '<circle cx="15" cy="0" r="2.5"/>' +
-            '</symbol>' +
-
-            '<symbol id="rectangle" viewBox="-5 -5 25 25">' +
-                '<rect x="-2.1" y="12.9" width="4.2" height="4.2"/>' +
-                '<rect x="2.9" y="2.9" width="4.2" height="4.2"/>' +
-                '<rect x="7.9" y="7.9" width="4.2" height="4.2"/>' +
-                '<rect x="12.9" y="-2.1" width="4.2" height="4.2"/>' +
-            '</symbol>' +
-
-            '<symbol id="diamond" viewBox="-5 -5 25 25">' +
-                '<path d="M-3,15 L0,12 L3,15, L0,18 Z"/>' +
-                '<path d="M2,5 L5,2 L8,5, L5,8 Z"/>' +
-                '<path d="M7,10 L10,7 L13,10, L10,13 Z"/>' +
-                '<path d="M12,0 L15,-3 L18,0, L15,3 Z"/>' +
-            '</symbol>' +
-
-            '<symbol id="cross" fill="none" viewBox="-5 -5 25 25">' +
-                '<path d="M-2.1,12.9 L2.1,17.1, M2.1,12.9 L-2.1,17.1 Z"/>' +
-                '<path d="M2.9,2.9 L7.1,7.1 M7.1,2.9 L2.9,7.1 Z"/>' +
-                '<path d="M7.9,7.9 L12.1,12.1 M12.1,7.9 L7.9,12.1 Z"/>' +
-                '<path d="M12.9,-2.1 L17.1,2.1 M17.1,-2.1 L12.9,2.1 Z"/>' +
-            '</symbol>' +
-
-            '<symbol id="plus" fill="none" viewBox="-5 -5 25 25">' +
-                '<path d="M0,12 L0,18, M-3,15 L3,15 Z"/>' +
-                '<path d="M5,2 L5,8 M2,5 L8,5 Z"/>' +
-                '<path d="M10,7 L10,13 M7,10 L13,10 Z"/>' +
-                '<path d="M15,-3 L15,3 M12,0 L18,0 Z"/>' +
-            '</symbol>' +
-        '</defs>';
-
-    // Generate a list of legend entries in their final order
-    function getLegendEntries(series, labelFormatter, sorted) {
-        var lf = labelFormatter,
-            legendEntries = series.reduce(function(validEntries, s, i) {
-                var labelEval = (lf ? lf(s.label, s) : s.label)
-                if (s.hasOwnProperty("label") ? labelEval : true) {
-                    var entry = {
-                        label: labelEval || 'Plot ' + (i + 1),
-                        color: s.color,
-                        options: {
-                            lines: s.lines,
-                            points: s.points,
-                            bars: s.bars
-                        }
-                    }
-                    validEntries.push(entry)
-                }
-                return validEntries;
-            }, []);
-
-        // Sort the legend using either the default or a custom comparator
-        if (sorted) {
-            if ($.isFunction(sorted)) {
-                legendEntries.sort(sorted);
-            } else if (sorted === 'reverse') {
-                legendEntries.reverse();
-            } else {
-                var ascending = (sorted !== 'descending');
-                legendEntries.sort(function(a, b) {
-                    return a.label === b.label
-                        ? 0
-                        : ((a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
-                        );
-                });
-            }
-        }
-
-        return legendEntries;
-    }
-
-    // return false if opts1 same as opts2
-    function checkOptions(opts1, opts2) {
-        for (var prop in opts1) {
-            if (opts1.hasOwnProperty(prop)) {
-                if (opts1[prop] !== opts2[prop]) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-    // Compare two lists of legend entries
-    function shouldRedraw(oldEntries, newEntries) {
-        if (!oldEntries || !newEntries) {
-            return true;
-        }
-
-        if (oldEntries.length !== newEntries.length) {
-            return true;
-        }
-        var i, newEntry, oldEntry, newOpts, oldOpts;
-        for (i = 0; i < newEntries.length; i++) {
-            newEntry = newEntries[i];
-            oldEntry = oldEntries[i];
-
-            if (newEntry.label !== oldEntry.label) {
-                return true;
-            }
-
-            if (newEntry.color !== oldEntry.color) {
-                return true;
-            }
-
-            // check for changes in lines options
-            newOpts = newEntry.options.lines;
-            oldOpts = oldEntry.options.lines;
-            if (checkOptions(newOpts, oldOpts)) {
-                return true;
-            }
-
-            // check for changes in points options
-            newOpts = newEntry.options.points;
-            oldOpts = oldEntry.options.points;
-            if (checkOptions(newOpts, oldOpts)) {
-                return true;
-            }
-
-            // check for changes in bars options
-            newOpts = newEntry.options.bars;
-            oldOpts = oldEntry.options.bars;
-            if (checkOptions(newOpts, oldOpts)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    function init(plot) {
-        plot.hooks.setupGrid.push(function (plot) {
-            var options = plot.getOptions();
-            var series = plot.getData(),
-                labelFormatter = options.legend.labelFormatter,
-                oldEntries = options.legend.legendEntries,
-                oldPlotOffset = options.legend.plotOffset,
-                newEntries = getLegendEntries(series, labelFormatter, options.legend.sorted),
-                newPlotOffset = plot.getPlotOffset();
-
-            if (shouldRedraw(oldEntries, newEntries) ||
-                checkOptions(oldPlotOffset, newPlotOffset)) {
-                insertLegend(plot, options, plot.getPlaceholder(), newEntries);
-            }
-        });
-    }
-
-    $.plot.plugins.push({
-        init: init,
-        options: defaultOptions,
-        name: 'legend',
-        version: '1.0'
-    });
-})(jQuery);
+/* Flot plugin for drawing legends.
+
+*/
+
+(function($) {
+    var defaultOptions = {
+        legend: {
+            show: false,
+            noColumns: 1,
+            labelFormatter: null, // fn: string -> string
+            container: null, // container (as jQuery object) to put legend in, null means default on top of graph
+            position: 'ne', // position of default legend container within plot
+            margin: 5, // distance from grid edge to default legend container within plot
+            sorted: null // default to no legend sorting
+        }
+    };
+
+    function insertLegend(plot, options, placeholder, legendEntries) {
+        // clear before redraw
+        if (options.legend.container != null) {
+            $(options.legend.container).html('');
+        } else {
+            placeholder.find('.legend').remove();
+        }
+
+        if (!options.legend.show) {
+            return;
+        }
+
+        // Save the legend entries in legend options
+        var entries = options.legend.legendEntries = legendEntries,
+            plotOffset = options.legend.plotOffset = plot.getPlotOffset(),
+            html = [],
+            entry, labelHtml, iconHtml,
+            j = 0,
+            i,
+            pos = "",
+            p = options.legend.position,
+            m = options.legend.margin,
+            shape = {
+                name: '',
+                label: '',
+                xPos: '',
+                yPos: ''
+            };
+
+        html[j++] = '<svg class="legendLayer" style="width:inherit;height:inherit;">';
+        html[j++] = '<rect class="background" width="100%" height="100%"/>';
+        html[j++] = svgShapeDefs;
+
+        var left = 0;
+        var columnWidths = [];
+        var style = window.getComputedStyle(document.querySelector('body'));
+        for (i = 0; i < entries.length; ++i) {
+            let columnIndex = i % options.legend.noColumns;
+            entry = entries[i];
+            shape.label = entry.label;
+            var info = plot.getSurface().getTextInfo('', shape.label, {
+                style: style.fontStyle,
+                variant: style.fontVariant,
+                weight: style.fontWeight,
+                size: parseInt(style.fontSize),
+                lineHeight: parseInt(style.lineHeight),
+                family: style.fontFamily
+            });
+
+            var labelWidth = info.width;
+            // 36px = 1.5em + 6px margin
+            var iconWidth = 48;
+            if (columnWidths[columnIndex]) {
+                if (labelWidth > columnWidths[columnIndex]) {
+                    columnWidths[columnIndex] = labelWidth + iconWidth;
+                }
+            } else {
+                columnWidths[columnIndex] = labelWidth + iconWidth;
+            }
+        }
+
+        // Generate html for icons and labels from a list of entries
+        for (i = 0; i < entries.length; ++i) {
+            let columnIndex = i % options.legend.noColumns;
+            entry = entries[i];
+            iconHtml = '';
+            shape.label = entry.label;
+            shape.xPos = (left + 3) + 'px';
+            left += columnWidths[columnIndex];
+            if ((i + 1) % options.legend.noColumns === 0) {
+                left = 0;
+            }
+            shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em';
+            // area
+            if (entry.options.lines.show && entry.options.lines.fill) {
+                shape.name = 'area';
+                shape.fillColor = entry.color;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // bars
+            if (entry.options.bars.show) {
+                shape.name = 'bar';
+                shape.fillColor = entry.color;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // lines
+            if (entry.options.lines.show && !entry.options.lines.fill) {
+                shape.name = 'line';
+                shape.strokeColor = entry.color;
+                shape.strokeWidth = entry.options.lines.lineWidth;
+                iconHtml += getEntryIconHtml(shape);
+            }
+            // points
+            if (entry.options.points.show) {
+                shape.name = entry.options.points.symbol;
+                shape.strokeColor = entry.color;
+                shape.fillColor = entry.options.points.fillColor;
+                shape.strokeWidth = entry.options.points.lineWidth;
+                iconHtml += getEntryIconHtml(shape);
+            }
+
+            labelHtml = '<text x="' + shape.xPos + '" y="' + shape.yPos + '" text-anchor="start"><tspan dx="2em" dy="1.2em">' + shape.label + '</tspan></text>'
+            html[j++] = '<g>' + iconHtml + labelHtml + '</g>';
+        }
+
+        html[j++] = '</svg>';
+        if (m[0] == null) {
+            m = [m, m];
+        }
+
+        if (p.charAt(0) === 'n') {
+            pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
+        } else if (p.charAt(0) === 's') {
+            pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
+        }
+
+        if (p.charAt(1) === 'e') {
+            pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
+        } else if (p.charAt(1) === 'w') {
+            pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
+        }
+
+        var width = 6;
+        for (i = 0; i < columnWidths.length; ++i) {
+            width += columnWidths[i];
+        }
+
+        var legendEl,
+            height = Math.ceil(entries.length / options.legend.noColumns) * 1.6;
+        if (!options.legend.container) {
+            legendEl = $('<div class="legend" style="position:absolute;' + pos + '">' + html.join('') + '</div>').appendTo(placeholder);
+            legendEl.css('width', width + 'px');
+            legendEl.css('height', height + 'em');
+            legendEl.css('pointerEvents', 'none');
+        } else {
+            legendEl = $(html.join('')).appendTo(options.legend.container)[0];
+            options.legend.container.style.width = width + 'px';
+            options.legend.container.style.height = height + 'em';
+        }
+    }
+
+    // Generate html for a shape
+    function getEntryIconHtml(shape) {
+        var html = '',
+            name = shape.name,
+            x = shape.xPos,
+            y = shape.yPos,
+            fill = shape.fillColor,
+            stroke = shape.strokeColor,
+            width = shape.strokeWidth;
+        switch (name) {
+            case 'circle':
+                html = '<use xlink:href="#circle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'diamond':
+                html = '<use xlink:href="#diamond" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'cross':
+                html = '<use xlink:href="#cross" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'rectangle':
+                html = '<use xlink:href="#rectangle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'plus':
+                html = '<use xlink:href="#plus" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'bar':
+                html = '<use xlink:href="#bars" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    // 'stroke="' + stroke + '" ' +
+                    // 'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'area':
+                html = '<use xlink:href="#area" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    // 'stroke="' + stroke + '" ' +
+                    // 'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            case 'line':
+                html = '<use xlink:href="#line" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    // 'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+                break;
+            default:
+                // default is circle
+                html = '<use xlink:href="#circle" class="legendIcon" ' +
+                    'x="' + x + '" ' +
+                    'y="' + y + '" ' +
+                    'fill="' + fill + '" ' +
+                    'stroke="' + stroke + '" ' +
+                    'stroke-width="' + width + '" ' +
+                    'width="1.5em" height="1.5em"' +
+                    '/>';
+        }
+
+        return html;
+    }
+
+    // Define svg symbols for shapes
+    var svgShapeDefs = '' +
+        '<defs>' +
+            '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +
+                '<polyline points="0,15 5,5 10,10 15,0"/>' +
+            '</symbol>' +
+
+            '<symbol id="area" stroke-width="1" viewBox="-5 -5 25 25">' +
+                '<polyline points="0,15 5,5 10,10 15,0, 15,15, 0,15"/>' +
+            '</symbol>' +
+
+            '<symbol id="bars" stroke-width="1" viewBox="-5 -5 25 25">' +
+                '<polyline points="1.5,15.5 1.5,12.5, 4.5,12.5 4.5,15.5 6.5,15.5 6.5,3.5, 9.5,3.5 9.5,15.5 11.5,15.5 11.5,7.5 14.5,7.5 14.5,15.5 1.5,15.5"/>' +
+            '</symbol>' +
+
+            '<symbol id="circle" viewBox="-5 -5 25 25">' +
+                '<circle cx="0" cy="15" r="2.5"/>' +
+                '<circle cx="5" cy="5" r="2.5"/>' +
+                '<circle cx="10" cy="10" r="2.5"/>' +
+                '<circle cx="15" cy="0" r="2.5"/>' +
+            '</symbol>' +
+
+            '<symbol id="rectangle" viewBox="-5 -5 25 25">' +
+                '<rect x="-2.1" y="12.9" width="4.2" height="4.2"/>' +
+                '<rect x="2.9" y="2.9" width="4.2" height="4.2"/>' +
+                '<rect x="7.9" y="7.9" width="4.2" height="4.2"/>' +
+                '<rect x="12.9" y="-2.1" width="4.2" height="4.2"/>' +
+            '</symbol>' +
+
+            '<symbol id="diamond" viewBox="-5 -5 25 25">' +
+                '<path d="M-3,15 L0,12 L3,15, L0,18 Z"/>' +
+                '<path d="M2,5 L5,2 L8,5, L5,8 Z"/>' +
+                '<path d="M7,10 L10,7 L13,10, L10,13 Z"/>' +
+                '<path d="M12,0 L15,-3 L18,0, L15,3 Z"/>' +
+            '</symbol>' +
+
+            '<symbol id="cross" fill="none" viewBox="-5 -5 25 25">' +
+                '<path d="M-2.1,12.9 L2.1,17.1, M2.1,12.9 L-2.1,17.1 Z"/>' +
+                '<path d="M2.9,2.9 L7.1,7.1 M7.1,2.9 L2.9,7.1 Z"/>' +
+                '<path d="M7.9,7.9 L12.1,12.1 M12.1,7.9 L7.9,12.1 Z"/>' +
+                '<path d="M12.9,-2.1 L17.1,2.1 M17.1,-2.1 L12.9,2.1 Z"/>' +
+            '</symbol>' +
+
+            '<symbol id="plus" fill="none" viewBox="-5 -5 25 25">' +
+                '<path d="M0,12 L0,18, M-3,15 L3,15 Z"/>' +
+                '<path d="M5,2 L5,8 M2,5 L8,5 Z"/>' +
+                '<path d="M10,7 L10,13 M7,10 L13,10 Z"/>' +
+                '<path d="M15,-3 L15,3 M12,0 L18,0 Z"/>' +
+            '</symbol>' +
+        '</defs>';
+
+    // Generate a list of legend entries in their final order
+    function getLegendEntries(series, labelFormatter, sorted) {
+        var lf = labelFormatter,
+            legendEntries = series.reduce(function(validEntries, s, i) {
+                var labelEval = (lf ? lf(s.label, s) : s.label)
+                if (s.hasOwnProperty("label") ? labelEval : true) {
+                    var entry = {
+                        label: labelEval || 'Plot ' + (i + 1),
+                        color: s.color,
+                        options: {
+                            lines: s.lines,
+                            points: s.points,
+                            bars: s.bars
+                        }
+                    }
+                    validEntries.push(entry)
+                }
+                return validEntries;
+            }, []);
+
+        // Sort the legend using either the default or a custom comparator
+        if (sorted) {
+            if ($.isFunction(sorted)) {
+                legendEntries.sort(sorted);
+            } else if (sorted === 'reverse') {
+                legendEntries.reverse();
+            } else {
+                var ascending = (sorted !== 'descending');
+                legendEntries.sort(function(a, b) {
+                    return a.label === b.label
+                        ? 0
+                        : ((a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
+                        );
+                });
+            }
+        }
+
+        return legendEntries;
+    }
+
+    // return false if opts1 same as opts2
+    function checkOptions(opts1, opts2) {
+        for (var prop in opts1) {
+            if (opts1.hasOwnProperty(prop)) {
+                if (opts1[prop] !== opts2[prop]) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    // Compare two lists of legend entries
+    function shouldRedraw(oldEntries, newEntries) {
+        if (!oldEntries || !newEntries) {
+            return true;
+        }
+
+        if (oldEntries.length !== newEntries.length) {
+            return true;
+        }
+        var i, newEntry, oldEntry, newOpts, oldOpts;
+        for (i = 0; i < newEntries.length; i++) {
+            newEntry = newEntries[i];
+            oldEntry = oldEntries[i];
+
+            if (newEntry.label !== oldEntry.label) {
+                return true;
+            }
+
+            if (newEntry.color !== oldEntry.color) {
+                return true;
+            }
+
+            // check for changes in lines options
+            newOpts = newEntry.options.lines;
+            oldOpts = oldEntry.options.lines;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+
+            // check for changes in points options
+            newOpts = newEntry.options.points;
+            oldOpts = oldEntry.options.points;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+
+            // check for changes in bars options
+            newOpts = newEntry.options.bars;
+            oldOpts = oldEntry.options.bars;
+            if (checkOptions(newOpts, oldOpts)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function init(plot) {
+        plot.hooks.setupGrid.push(function (plot) {
+            var options = plot.getOptions();
+            var series = plot.getData(),
+                labelFormatter = options.legend.labelFormatter,
+                oldEntries = options.legend.legendEntries,
+                oldPlotOffset = options.legend.plotOffset,
+                newEntries = getLegendEntries(series, labelFormatter, options.legend.sorted),
+                newPlotOffset = plot.getPlotOffset();
+
+            if (shouldRedraw(oldEntries, newEntries) ||
+                checkOptions(oldPlotOffset, newPlotOffset)) {
+                insertLegend(plot, options, plot.getPlaceholder(), newEntries);
+            }
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: defaultOptions,
+        name: 'legend',
+        version: '1.0'
+    });
+})(jQuery);