$.plot is not a function

Matt D

unread,

May 11, 2010, 8:33:17 AM5/11/10

to Flot graphs

I get the above error message when trying to draw a graph. This
message however does not appear all the time which is confusing me.
The page works and draws the initial graph (in Firefox 3.6.3 and IE 6,
my available browsers) but only in a new window (and when I hit
Control F5 in FF). When I perform a regular refresh or use an on page
control to change the graph then the graph disappears and the above
error is shown in Firefox. The error in IE6 is slightly different,
Object doesn't support this property or method, which I assume to be
the same issue.

I can post my code but I'm still working on a smaller example.

Does anyone have any ideas why this might work in some situations and
not others with the same code?

George Roberts

unread,

May 12, 2010, 5:01:33 PM5/12/10

to flot-...@googlegroups.com

There's just too many possibilities. Most of which involve some kind of
javascript error occurring that blocks javascript from including flot (or
possibly jquery). I recommend putting the .js files as high as possible in your
code and also getting firebug in firefox and stopping on error. Make sure the
jquery line is above the flot line.

- George Roberts
http://gr5.org

Matt D

unread,

May 17, 2010, 10:42:36 AM5/17/10

to Flot graphs

Hey,

Thanks. The js files are right at the top and jquery is before flot.
Remember that the graph draws when it's a completely new window or a
control F5 refresh, but not on a regular refresh or from the onchange
method of a select on the same page.

I'll post my code in case there's something obvious that I'm missing.
If it didn't work all the time I'd understand but not why in one
situation it works and not others. I'll try firebug like you suggest
too.

Code below:

<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.flot.min.js"></script>
<script type="text/javascript" src="/js/excanvas.min.js"></script>
<script type="text/javascript" src="/js/date.js"></script>
<script type="text/javascript" src="/js/jquery.datePicker.js"></
script>
<script type="text/javascript" src="/js/jquery.getUrlParam.js"></
script>

<link rel="stylesheet" type="text/css" media="screen" href="/css/
datePicker.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/
imdba.css">
<link rel="stylesheet" type="text/css" media="screen"
href="capacity_graphs.css">

<script type="text/javascript">
var ds;
$(function(){
$("#menu").load('/menu.html');
var db=$(document).getUrlParam('db');
ds=$(document).getUrlParam('ds');
populateStats(ds,db);
$.getJSON("/sybase/get_used_data.php",{db: db, ds: ds, ajax:
'true'},function(data) {
$.plot($("#graph"), data, { xaxis: { mode: "time" }, legend:
{position: "nw",opacity: 0.5} });});

$('.date-pick').datePicker({startDate:$
("input#datefrom").val(),endDate:$("input#dateto").val()});
$.getJSON("get_db_by_ds.php",{server: ds, ajax: 'true'},
function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
if (j[i].optionValue != db) {
options += '<option value="' + j[i].optionValue + '">' +
j[i].optionDisplay + '</option>';
}
else {
options += '<option value="' + j[i].optionValue + '"
selected>' + j[i].optionDisplay + '</option>';
}
}
$("select#database").html(options);
changeGraph('yes');
});
});

function populateStats(arg1,arg2,arg3) {
$.getJSON("get_db_stats.php",{server: arg1,db: arg2,ajax: 'true'},
function(j){
$('td#dataused').html(j[0].data_used);
$('td#datatotal').html(j[0].data_total);
$('td#pctused').html(j[0].percent_used+"%");
if (j[0].days_remaining == "0") {
$('td#daysremaining').html("No Growth");
}
else {
$('td#daysremaining').html(j[0].days_remaining);
};
if (arg3 == "yes") {
$('input#datefrom').val(j[0].mindate);
$('input#dateto').val(j[0].maxdate);
};
});
}

function detachGraph() {
window.open($('#graph img').attr('src'),$
('#database').val(),'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=720,height=520,left=290,top=100');
}

function changeGraph(arg1) {
$.getJSON("/sybase/get_used_data.php",{db: $('#database').val(), ds:
ds, ajax: 'true'},function(data) {
$.plot($("#graph"), data, { xaxis: { mode: "time" }, legend:
{position: "nw",opacity: 0.5} });});
populateStats(ds,$('#database').val(),arg1);
}

</script>

</head>
<body>
<div id=menu></div>
<div id=main class=main>

<div id="graph" style="width:650px;height:450px;">
</div>

<div id=inputs>
<form id=dates>
<li><label for="datefrom" class="shortwidth">Date From:</label>
<input id=datefrom name=datefrom class="date-pick" value="$datefrom"
onChange="changeGraph('no');"></li>
<li><label for="dateto" class="shortwidth">Date To:</label>
<input id=dateto name=dateto class="date-pick" value="$dateto"
onChange="changeGraph('no');"></li>
<li><label for="database" class="shortwidth">Database:</label>
<select id=database name=database style="width:185px"
onChange="changeGraph('yes');">
</select></li>
</form>
</div>

<div id=info>
<font class=heading>Current Stats</font>
<table>
<tr><td>Data Used (MB):</td><td id=dataused></td></tr>
<tr><td>Data Total (MB):</td><td id=datatotal></td></tr>
<tr><td>Utilisation:</td><td id=pctused></td></tr>
<tr><td>Days Remaining:</td><td id=daysremaining></td></tr>
</table>
</div>
</div>

</body>

On May 12, 10:01 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:

> There's just too many possibilities. Most of which involve some kind of
> javascript error occurring that blocks javascript from including flot (or
> possibly jquery). I recommend putting the .js files as high as possible in your
> code and also getting firebug in firefox and stopping on error. Make sure the
> jquery line is above the flot line.
>

> - George Robertshttp://gr5.org

Matt D

unread,

May 17, 2010, 11:25:58 AM5/17/10

to Flot graphs

OK so using firebug I've got to the cause of the problem but I suspect
it's something I'm doing wrong.

On the page I use the following bit of code to load up a hierarchical
menu inside a div at the left

$("#menu").load('/menu.html');

I believe that something this is doing it removing javascript loaded
by the main page and replacing it with the javascript from the loaded
page. Perhaps some kind of namespace conflict.

I guess this is not a flot issue at all but if someone can point out
whether it's browser, jquery or user then I know where to look next.

Thanks
Matt

George Roberts

unread,

May 17, 2010, 11:43:04 AM5/17/10

to flot-...@googlegroups.com

On the page I use the following bit of code to load up a hierarchical
menu inside a div at the left

$("#menu").load('/menu.html');

Amazing! I didn't know jquery could do that! A quick fix would be to put the
needed .js files (jquery,flot) inside menu.html. Alternatively if you don't
care about google indexing your menu.html then you could put it in an iframe
instead of a div and use standard methods for putting menu.html into the iframe
(google html iframe tag).

Joshua Varner

unread,

May 17, 2010, 11:55:22 AM5/17/10

to flot-...@googlegroups.com

Try using a closure to localize the jquery object you are using.

Like

(function($) {
# your code,
})(jQuery);

That way if $ is replaced, or query reloaded you still have a
reference to the one you were using.

This won't work if the plugin is actually changing the global jquery
and manually deleting flot, but that's less likely than reloading it.
The real fix is to unbreak the menu plugin, but this may let you
workaround.

Josh

Matt D

unread,

May 17, 2010, 12:48:29 PM5/17/10

to Flot graphs

My initial solution to the problem used your solution of calling all
the js files inside the menu but this is poor programming. My second
solution was to move the call to load the menu into it's own script
block and called just after the initial loading of jquery

$(function(){

$("#menu").load('/menu.html');

});

</script>
<script type="text/javascript" src="/js/jquery.flot.min.js"></script>
<script type="text/javascript" src="/js/excanvas.min.js"></script>
<script type="text/javascript" src="/js/date.js"></script>
<script type="text/javascript" src="/js/jquery.datePicker.js"></
script>
<script type="text/javascript" src="/js/jquery.getUrlParam.js"></
script>

Finally, since i figured that I wouldn't be loading the menu onto a
page which didn't have jquery already loaded then I removed the
loading of jquery from that file.

FYI, the load function can actually load just part of page, a div or a
table or something. I'm finding it pretty useful.

On May 17, 4:43 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:

Matt D

unread,

May 17, 2010, 12:49:21 PM5/17/10

to Flot graphs

That's another good idea. I'll bear that trick in mind if I manage to
tangle myself up worse in the future.

On May 17, 4:55 pm, Joshua Varner <jlvar...@gmail.com> wrote:
> Try using a closure to localize the jquery object you are using.
>
> Like
>
> (function($) {
> # your code,
>
> })(jQuery);
>
> That way if $ is replaced, or query reloaded you still have a
> reference to the one you were using.
>
> This won't work if the plugin is actually changing the global jquery
> and manually deleting flot, but that's less likely than reloading it.
> The real fix is to unbreak the menu plugin, but this may let you
> workaround.
>
> Josh
>

Reply all

Reply to author

Forward