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
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);