Flot or Flotr2 CandleStick with Lines (combine series)

Question

The example can be viewed at http://jsfiddle.net/amnon/njXD3/1/

In the above short example, the code that draws the candlesticks:

var p2 = $.plot($("#placeholder"), data2, options2);

will draw over the line chart created earlier by

var p1 = $.plot($("#placeholder"), data1, options1);

i.e commenting out the last $.plot will display the line chart while leaving it uncommented will display the candlestick chart.

The question: What's the simplest way to merge data1, data2, options1, options2 so that the two charts can be combined together in one display? Can it be done with one $.plot? I've tried different variations but without much success.

Alternatively, providing a solution using flotr2 instead (example at http://jsfiddle.net/amnon/dDth9/) would also help

Answer 1

An example from the plugin page shows how to combine several charts.

As to your code, call the push function of your candlestick data with lines:{show: true} option. Here is what you should do:

var data2 = $.plot.candlestick.createCandlestick({data:dt,candlestick:{show:true,lineWidth:lw}});

data2.push({ data: prices1, lines:{show: true}, points:{show:true}});

And then use data2 from the code above and options2:

var p = $.plot($("#placeholder"), data2, options2);