CODEWITHSUNDEEP
javascriptjqueryhtmlcssflot
Kaybi
Kaybi

Reputation: 35

JQuery Flot - Grid lines not showing through filled lines

I'm trying to create one real-time flot and my problem is that I can't get to see the flot grid through the filling of my data's lines..

If you have any idea to get my filling a bit transparent like the picture below, I'd like to apply it as well on my Fiddle!

What I'm trying to achieve is something like that: Picture of what I try to get

Here is the Fiddle on what I'm working: My flot on Fiddle

Code:

$(function () {

    getRandomData = function(){
        var rV = [];
        for (var i = 0; i < 10; i++){
             rV.push([i,Math.random() * 10]);
        }
        return rV;
    }

    getRandomDataa = function(){
        var rV = [];
        for (var i = 0; i < 10; i++){
             rV.push([i,Math.random() * 10 + 5]);
        }
        return rV;
    }

    getSeriesObj = function() {
        return [
        {
            data: getRandomDataa(),
            lines: { 
                show: true, 
                fill: true,
                lineWidth: 5,
                fillColor: { colors: [ "#b38618", "#b38618" ] },
                tickColor: "#FFFFFF",
                tickLength: 5
            }
        }, {
            data: getRandomData(),
            lines: {
                show: true,
                lineWidth: 0,
                fill: true,
                fillColor: { colors: [ "#1A508B", "#1A508B" ] },
                tickColor: "#FFFFFF",
                tickLength: 5
            }
        }];
    }

    update = function(){
        plot.setData(getSeriesObj());
        plot.draw();
        setTimeout(update, 1000);
    }

    var flotOptions = {  
        series: {
            shadowSize: 0,  // Drawing is faster without shadows
            tickColor: "#FFFFFF"
        },
        yaxis: {
            min: 0, 
            autoscaleMargin: 0,
            position: "right",
            transform: function (v) { return -v; },     /* Invert data on Y axis */
            inverseTransform: function (v) { return -v; }, 
            font: { color: "#FFFFFF" },
            tickColor: "#FFFFFF"
        },
        grid: {
            backgroundColor: { colors: [ "#EDC240", "#EDC240" ], opacity: 0.5 }, // "Ground" color (May be a color gradient)
            show: true,
            borderWidth: 1,
            borderColor: "#FFFFFF",
            verticalLines: true,
            horizontalLines: true,
            tickColor: "#FFFFFF"
        }
    }; 

    var plot = $.plot("#placeholder", getSeriesObj(), flotOptions);

    setTimeout(update, 1000);
});

Thanks a lot!

Upvotes: 0

Views: 317

Answers (1)

mechenbier
mechenbier

Reputation: 3067

You can use the rgba() color specification with flot to specify the fill color and alpha level (transparency):

fillColor: { colors: [ "rgba(179, 134, 24, .2)", "rgba(179, 134, 24, .2)" ] },

An alpha value of 0 is fully transparent, while an alpha value of 1 is fully opaque.

Upvotes: 1

Related Questions