Problem using Flot charts on a jQtouch web site

Question

Hiiii

I have a jQtouch site in dev and i would like to use a chart on it, to me Flot looks like the best way to do this (prettiest!)

However if i implement flot on the site i get the following error:

Invalid dimensions for plot, width = 0, height = 0

If i comment out the style sheet ../jqtouch/jqtouch.min.css the flot chart works just fine.

This i think has something to do with the fact that you cannot use flot inside a div that has display:none

From the Flot readme

Blockquote Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

Does anyone know if i can work around this/fix this so flot and jQtouch work together?

Thanks

Hairby

Answer 1

I have managed to use http://highcharts.com/ and jQtouch together ... however I don't have an example right off the bat to show you.

Take a look a HighCharts tho, I switched to it from Flot and never looked back.

Answer 2

You can use visibiity:hidden or position: absolute and have it off the page, other than that...no real options since it can't initialize in an empty area.

Alternatively, if it's hidden by the stylesheet, just override the style inline:

<div id="myDiv" style="width:400px;height:300px;"></div> 

$.plot($("#myDiv"), [ .... ]);