Trying to use jqplot with jquery mobile, marionette and requirejs - jquery-mobile

Question

I am trying to use jqplot with Jquery mobile, marionette and requirejs. I have included all jqplot required CSS as well as script files in head tags, but when i am trying to plot a chart using below code
define([ 'jquery', 'plot' ],
function($) {
console.log("Success..Inside Offer Page Script.");
console.log("Plot..."+$.jqplot);
console.log("jquery..."+$);
$.jqplot.config.enablePlugins = true;
var s1 = [ 2, 6, 7, 10 ];
var ticks = [ 'a', 'b', 'c', 'd' ];
plot1 = $.jqplot('chart1', [ s1 ], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
}
},
highlighter : {
show : false
}
});
});
it gives me errors like
Uncaught TypeError: undefined is not a function jqplot.barRenderer.js:41
(line 41: $.jqplot.BarRenderer.prototype = new $.jqplot.LineRenderer();)
Uncaught TypeError: Cannot call method 'push' of undefined jqplot.pointLabels.js:377
(line 377: $.jqplot.postSeriesInitHooks.push($.jqplot.PointLabels.init);)
The plot in my above code's define is
define([
'../scripts/ext_libs/jquery.jqplot'
],
function () {
var plot;
require([
'../scripts/ext_libs/jqplot.barRenderer',
'../scripts/ext_libs/jqplot.pointLabels',
'../scripts/ext_libs/jqplot.categoryAxisRenderer',
],
function () {
plot = $.jqplot;
});
return plot;
});
Can anyone please help me how can i solve these errors. Is their a problem using jqplot with requirejs?
Thanks in advance.

Answer 1

I'm not using marionette, but everything else works fine on my side. I have a jqplot module like this:
define([
'../js/plugins/jqplot/jquery.jqplot'
, 'css!../js/plugins/jqplot/jquery.jqplot'
],
function () {
var plot;
require([
'../js/plugins/jqplot/plugins/jqplot.barRenderer'
, '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer'
, '../js/plugins/jqplot/plugins/jqplot.pointLabels'
, '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
],
function () {
plot = $.jqplot;
});
return plot;
}
);
which I'm requiring requiring normally from my page script like this:
require(["plot"], function (plot) {
// do something here with plot or... $.jqplot
};
You should be able to use $.plot right away, because once you require the module, jqplot will be available on $.
EDIT:
Try this:
define([ 'jquery', 'plot' ],
function($) {
console.log("Success..Inside Offer Page Script.");
console.log($);
console.log($.jqplot);
$.jqplot.config.enablePlugins = true;
var s1 = [ 2, 6, 7, 10 ];
var ticks = [ 'a', 'b', 'c', 'd' ];
plot1 = $.jqplot('chart1', [ s1 ], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
}
},
highlighter : {
show : false
}
});
});

Answer 2

Bit late to the game but.... above doesn't work because require is async to return, so able to return jqplot without any jqplot plugins loaded! async safe solution below
Nasty problem, as it's a chain of three dependencies
jquery is required for jqplot which is required for jqplot plugins, I have a simpler solution based on the same lines as the one above
first do your requirejs "main.js" config like so
requirejs.config({
paths: {
"jquery": "path/to/jquery-1.10.2.min",
// WORKAROUND : jQuery plugins + shims
"jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
"jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
},
shim: {
"jqplot.core": {deps: ["jquery"]},
"jqplot": {deps: ["jqplot.core"]}
}
});
create a wrapper file module file called "jquery-jqplot-module-with-plugins-1.0.8.js", containing :
// wraps jquery jqplot plugin in define statement
define([
"jquery",
"path/to/jqplot.highlighter.min",
"path/to/jqplot.cursor.min",
"path/to/jqplot.dateAxisRenderer.min",
"path/to/jqplot.canvasTextRenderer.min",
"path/to/jqplot.canvasAxisLabelRenderer.min",
"path/to/jqplot.enhancedLegendRenderer.min",
"path/to/jqplot.pieRenderer.min",
"path/to/jqplot.donutRenderer.min",
], function($) {
var jqplot;
jqplot = $.jqplot;
return jqplot;
});
Then when ever you need jqplot with those plugins, simply call for "jqplot" which will load "jquery" then "jqplot.core" then all the jqplot modules, then finally return the jqplot object :)
require(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Require JS");
console.log("Plot...", $.jqplot, $jqplot);
});
or
define(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Define JS");
console.log("Plot...", $.jqplot, $jqplot);
});
tada! :)
ps jquery plugins are evil, no suggestion how to fix that situation, just a statement of fact
cheers
Ant

Answer 3

Looks like plot is returned before require(...) initializes it. I used to have common solution and my plot was partly populated. I ended up with setting all jqplot plugins in shim and changed my `plot.js' accordingly, as was suggested here.
requirejs.config
shim: {
'jqplot': ['jquery'],
'lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.pieRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.barRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.highlighter': ['jqplot'],
}
plot.js
define(['lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer',
'lib/jquery/jqplot/plugins/jqplot.pieRenderer',
'lib/jquery/jqplot/plugins/jqplot.barRenderer',
'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer',
'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer',
'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer',
'lib/jquery/jqplot/plugins/jqplot.highlighter'],
function() {
return $.jqplot;
});