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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

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

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

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

Go to End

4 Posts   3385 Views


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() {

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?


Forum Moderator, 1899 Posts

10 January 2014 at 12:45am

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


Community Member, 16 Posts

10 January 2014 at 3:07am

Thanks, that's bound to be useful


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):


(function($) {
  $(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 ]);

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