Trying to get simple flot and angular query to work based on other SO post

Question

Why does this not work for me? Based on this question How to Integrate Flot with AngularJS?

All I get is a blank page.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="static/js/angular/angular.min.js"></script>
    <script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="static/js/jquery/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="static/lib/flot/controller.js"></script>
    <style type='text/css'>
       chart {
            display:none;
            width:400px;
            height:200px;
        }
   </style>
 </head>
 <body>
    <div ng-app='App'>
        <div ng-controller='Ctrl'>
            <chart ng-model='data'></chart>
        </div>
    </div>    
  </body>
</html>


#Controller.js
var App = angular.module('App', []);

App.controller('Ctrl', function ($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

score 2 · Accepted Answer · answered Apr 14 '14 at 05:44

You included the scripts in the wrong order. It should be jQuery, Flot, and then angular (followed by your controller):

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="flot@*" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>

Here is a plunker: http://plnkr.co/edit/WI3lXKRxxEpPvnhHfgrf?p=preview

Trying to get simple flot and angular query to work based on other SO post

1 Answers1