Search code examples
arraysobjectflot

Passing array of objects to FLOT


All,

I am using FLOT, and I am trying to combine a couple of plots on the same diagram. The first plot is of the "horizontal stacked bar" type, and the second one is a 'garden-variety' time-varying quantity ...

I can display the two plots individually, but I cannot combine them ...

Please note that both plots share the x-axis.

First plot

var min = -10;
var data1 = [
                { "data": [[ 2, min]], "color": 1}, 
                { "data": [[ 3, min]], "color": 0}, 
                { "data": [[ 1, min]], "color": 1}, 
                { "data": [[ 8, min]], "color": 2}, 
                { "data": [[ 6, min]], "color": 1}
            ];
var options1 = {
    series: {
        stack: true,
        lines: {show: false, steps: false },
        bars: {show: true, horizontal:true, width: 1}
    },
    yaxis: { 
        min: min, 
        max: 20
    }
};
$.plot("#placeholder1", data1, options1);

Second plot

var data2 = [];
var t = [];
var i = 0;
for (var tt = 0; tt <= 20; tt += 1) {
    data2.push([i, Math.exp(-tt/10.)*9*Math.cos(2.0*Math.PI*0.1*tt)+9]);
    t.push(tt);
    i++;
}
var options2 = {
    series: {
        lines: {
            show: true
        }
    },
    yaxis: {
        min: min,
        max: 20
    }
};

$.plot("#placeholder2", [data2], options2); 

Failed attempt to display both plots

var obj1 = {
    data: data1,
    series: {
        stack: true,
        lines: {show: false, steps: false },
        bars: {show: true, horizontal:true, width: 1}
    }
};

var obj2 = {
    data: [data2],
    series: {
        lines: {
            show: true
        }
    },
    yaxis: {
        min: min,
        max: 20
    }
}
$.plot("#placeholder3", obj1, obj2); 

See Pen here: http://codepen.io/vpappano/pen/BQrgRQ

Any help will be greatly appreciated.

Thanks !!! :-)


Solution

  • Multiple points:

    • data1 is already an array of data series objects, it can not be the data property for another data series
    • data2 is already an array, no need for extra brackets
    • some issues with the options (per data series and general), see the fixed code
    • the call to plot() doesn't support multiple data series as in your code, give an array of data series as second parameter and the options as third parameter

    Fixed CodePen: http://codepen.io/anon/pen/vyjYNo