JSFiddle - React, Tailwind, and code Playground

by rpaul

JavaScript

/* Flot plugin that adds legends with custom symbols
 */
(function($) {
    function getDrawFunction(series) {
        var drawFunction = series.points.symbol;
        if (drawFunction == "circle") drawFunction = function(ctx, x, y, radius, shadow) {
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
        };
        return drawFunction;
    }

    function drawShapeOnCanvas(canvas, drawFunction, series) {
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        drawFunction(context, centerX, centerY, 50, false);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = series.color; //'#8ED6FF';
        context.fill();
    }

    function generateLegendSymbol(s) {
        //... get the draw function
        var drawFunction = getDrawFunction(s);
        //... create a canvas element
        var canvas = document.createElement("canvas");
        canvas.width = 300;
        canvas.height = 300;
        //... draw the shape on the canvas
        drawShapeOnCanvas(canvas, drawFunction, s);
        //... generate image from the canvas
        var dataURL = canvas.toDataURL();
        //.... put the image as legend
        var legendSymbol = "<img width='70' height='70' style='vertical-align: middle;' src='" + dataURL + "' alt='File Icon'>";
        return legendSymbol;
    }

    function isInnoLegendActive(options) {
        return !options.legend.innoLegendShow || !options.legend.innoLegend;
    }

    function buildLegendEntries(series, lf) {
        var entries = [];
        for (var i = 0; i < series.length; ++i) {
            var s = series[i];
            debugger;
            var legendSymbol;
            if (s.points.show) legendSymbol = generateLegendSymbol(s);
            if (s.label) {
                label = lf ? lf(s.label, s) : s.label;
          ...