Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

[Solved] Flot Integration - $.flot is not a function error


Reply


4 Posts   511 Views

Avatar
Bimble

Community Member, 16 Posts

9 January 2014 at 10:47am

Edited: 09/01/2014 10:48am

I'm trying to integrate Flot with Silverstripe, and running into JS loading problems.

I'm getting the js console error messgae "$.flot is not a function"

Im loading the packages in a extended Page_Controller class inside: init():

public function init() {
parent::init();
Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js");
Requirements::javascript("presentation/flot/jquery.flot.js");
Requirements::javascript("presentation/flot/jquery.flot.time.js");
Requirements::javascript("presentation/flot/jquery.flot.selection.js");
Requirements::javascript("presentation/javascript/ChartKPI.js");
}

The JS packages are there in page source, so appear to be loading okay

I've also tried changing $.flot to "jQuery.flot", which worked in Drupal, but not in SS.

So some other JS loading problem must exist????? I've run out of idea and hoping for hints?

Avatar
swaiba

Forum Moderator, 1799 Posts

10 January 2014 at 12:45am

I cannot help directly... but if it helps I know flot is used in this module...

https://github.com/silverstripe-labs/silverstripe-abtesting

...so it might have some help there

Avatar
Bimble

Community Member, 16 Posts

10 January 2014 at 3:07am

Thanks, that's bound to be useful

Avatar
Bimble

Community Member, 16 Posts

10 January 2014 at 7:43am

I had a couple of problems:

1) I pulled the jQuery enclosures from the module Swaiba pointed to (thanks for that pointer) which got rid of my "flot is not a function" error.

2) Drupal does the jQuery load for you, when I discovered a forum post that showed that in SS i needed to do that myself, I lazily copied the line. The jquery in that line turned out to be about a decade too old for Flot. So changigng to the most recent jQuery library solved all other errors.

In case anyone else comes this way, this works (using Flot provided example to test):

javascript

(function($) {
$(function () {
$(document).ready(function(){
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
})
});
})(jQuery);

fyi, ensure you alway have a corresponding #placeholder div or Flot wont display