Sunday, May 6, 2012

How to set line colors in Flot graph

// could not find simple example of setting line colors in Flot graph

var lcolors = ["#FFA500","#00BFFF","#DC143C","#3CB371"];

// get the data after graph is plotted, change line colors, then redraw

var plot = $.plot($("#placeholder"), data, getOptions());

series = plot.getData();

for (var i = 0; i < series.length; ++i) {
    if (i < lcolors.length) { 

        series[i].color = lcolors[i];   // override the default color
    }
}

plot.draw();


// options for time series graph with live refresh
function getOptions() {

    return {
        // drawing is faster without shadows
        series: {
            shadowSize: 0
        },
        lines: {
            show: true
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        legend: {
            show: false,
            backgroundOpacity: 0,
            position: 'nw'
        },
        xaxis: {
            mode: 'time',
            max: new Date().getTime() - (new Date().getTimezoneOffset() * 60000),
            timeformat: "%H:%M%p"
        },
        yaxis: {
            min: 0,
            tickFormatter: function suffixFormatter(val, axis) {
                return val.toFixed(axis.tickDecimals);
            }
        }
    };
}

1 comment:

kelly said...

What about

series: {
lines: {
show: true

},
points: {
show: true
}

},
colors: ["#fff", "#fff", "#fff"],
legend: {
show: false
},