jqPlot : $.jqPlot is not a function error

Question

I need to create charts on a website.

In my HTML code i have created a div with an ID.

This is my HTML code :

<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>


<body>
    <div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>

In the js code i have only wrote an exemple from the official website of jqPlot :

$(document).ready(function() {
    var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
    var chart_opt = {
        title:'Graph',
        axes:{yaxis:{min:-10, max:240}},
        series:[{color:'#5FAB78'}]
    };
    $.jqplot('graph', chart_data, chart_opt); 
});

So my problem is that i have an error on the browser's console : $.jqplot is not a function

Any idea ?

Make sure the file you are including exists on that path and is the correct name (jquery.jqplot.js and not jquery.jqplot.min.js) — NeuTronas, Apr 11 '17 at 09:00
Thank you for your answer but i have include jquery.plot.js. And i have already try with the .min file too. — Maskim, Apr 11 '17 at 09:04
jquery is already include before jqPlot no ? Thanks for the answer :) — Maskim, Apr 11 '17 at 09:15

Pugh · Answer 1 · 2017-06-08T21:19:55.377

You are getting this error because you have the jqplot inside the $(document).ready(function(). Try something like this.

 $(document).ready(function(){
   GetChart();
});


function GetChart(){
    var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];

    $('#graph').jqplot([chart_data], {
        title:'Default Bar Chart',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
    }

Here is a working example - https://jsfiddle.net/xrnfqax3/

For this example to work, you will need to add the following references to your project-

jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js

score -1 · Answer 2 · answered May 12 '17 at 18:36

-1

Make sure that jquery-*.js order is before jqPlot.js.

and use language="javascript" type="text/javascript" on all scripts tag.

Best Regards

answered May 12 '17 at 18:36

zerala

49
2

although it isn't bad style to add `type="text/javascript"` it is not necessary, the `language` attribute, according to [another SO post](http://stackoverflow.com/questions/2267476/html-script-tag-type-or-language-or-omit-both) has been deprecated for a long time now, and should NOT be used. As for the ordering of dependencies, it's pretty clear that OP already has their sources ordered as you suggest – Patrick Barr May 12 '17 at 19:08

jqPlot : $.jqPlot is not a function error

2 Answers2