Flot charts giving "$.plot is not a function"

Hans de Jong picture Hans de Jong · Mar 30, 2015 · Viewed 21.8k times · Source

I am trying out flot charts, but I keep running into this error:

TypeError: $.plot is not a function

I imported all needed javascripts before my own functions.

html:

<div class="row">
    <div id="monthly_balance" class="col-md-12" style="height: 200px;">
    </div>
</div>

js:

<script src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.compiled.js"></script>
<script src="//cdn.jsdelivr.net/jquery.flot/0.8.4/jquery.flot.min.js"></script>

<script type="text/javascript">

    $(function () {

    var data = [[1, 12], [2, 25], [3, 4]]; //examplelist

    var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    };

    $.plot($("#monthly_balance"), data, options)
});
</script>

My js is at the bottom of the page (I tried to put it in the head as well, but kept the same error).

Answer

meskobalazs picture meskobalazs · Mar 30, 2015

The http://cdn.jsdelivr.net/jquery.flot/0.8.4/jquery.flot.min.js file is not found on the server, hence the error. Fix the script reference, and it will be fine.

For example: http://cdn.jsdelivr.net/jquery.flot/0.8.3/jquery.flot.min.js works fine. The 0.8.4 version is currently missing from the CDN.