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

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"), [ .... ]);

Answer 2

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 3

I am having similar issues with jqplot library. However the graph shows on the first page, and does not initialize on the second page. the div is still showing though. I think this is due to the graph is loaded in the document.ready script:

$(function(){
$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});

I tried initializing the div when loaded, but cant seem to get it right, i think having an event when the "page"(loggedin) is loaded. how do i do this?

i tried this, but it is failing:

$('#chartdiv').change(function() {
  $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
    });
});

my second page:

Logged In

                <ul class="rounded">
                    <div id="chartdiv" style="height:200px;width:280px;"></div> 
                </ul>
        </div>  

Higcharts looks great, but I would prefer not using it due to licensing issues.

Answer 4

Hi! Do you have sample code for the usage please.!