Candlestick charts and timeline

[lucbocahut]

Hi,

I 've been using your charting library which is very good. Thank you for this excellent work.

I recently ran into what I think is a bug with the candlestick implementation and time series. In order to see candles on a daily chart I have set the candleWidth to 86000000 (one day wide). The problem is the candles bodies are showing up in a very light gray and you can't see the high and low lines. I am guessing this has to do with the scaling?

There is another small related issue: my data is for weekdays (I am displaying the open/high/low/close for a financial contract), and there is a gap on the chart each week end (5 points, then 2 blancs, then 5 points... etc.) This is not how financial contracts are typically displayed.

I have started to take a look at your code for candles, but thought I would ask here first for some help. I would really appreciate if you could point me in the right direction.

I copy my options for reference:

{ candles: { show: true, candleWidth: 86000000, fill: true, wickLineWidth: 1, upFillColor: '#000000', downFillColor: '#000000', fillOpacity: 1, barcharts: false }, xaxis: { mode: 'time', labelsAngle: 45 }, yaxis: { autoscale:true, autoscaleMargin: 0.1 }, selection: { mode: "x" }, title: "Candle Bars" }

Best

[cesutherland]

Hey, for your first issue, could you fork http://jsfiddle.net/cesutherland/ZFBj5/ with the reproduction?

As to the second issue — I think that the best solution is to use a homogeneous x-axis, where each x-value represents 1 day. In your tick formatter, mouse tracking formatter etc. you can use the index to retrieve date information for that day. This is how the envision finance demo is implemented (http://humblesoftware.com/envision/demos/finance).

That should fix your candlestick problem as well if I'm not mistaken, but I'd still like to get the time-mode candlestick issue fixed!

[lucbocahut]

Thanks for your prompt reply, here is the link to the fork: http://jsfiddle.net/mvDXX/ I had come to the same conclusion on my second question, I will look at the implementation on the envision version.

On Apr 4, 2012, at 6:17 PM, Carl Sutherland wrote:

Hey, for your first issue, could you fork http://jsfiddle.net/cesutherland/ZFBj5/ with the reproduction?

As to the second issue — I think that the best solution is to use a homogeneous x-axis, where each x-value represents 1 day. In your tick formatter, mouse tracking formatter etc. you can use the index to retrieve date information for that day. This is how the envision finance demo is implemented (http://humblesoftware.com/envision/demos/finance).

That should fix your candlestick problem as well if I'm not mistaken, but I'd still like to get the time-mode candlestick issue fixed!

---

Reply to this email directly or view it on GitHub: https://github.com/HumbleSoftware/Flotr2/issues/63#issuecomment-4957104

[pera]

So you have to set candleWidth to 86400000 * 0.6 when xaxis:{mode:"time"} ?

cheers