0

I am trying to replicate this example in my code (will change later), but I am getting this error when I try it: Argument 'barChartController' is not a function, got undefined. I am using Angular 1.5.6

This is what my current files look like:

graph.erb (full file)

 <div ng-app='myApp'>
   <div ng-controller='barChartController'>
     <chart ng-model='data'></chart>
   </div>
 </div>

flot.js (full file)

//Module Created
var myApp = angular.module('myApp', []);

//Controller Created
myApp.controller('barChartController', function($scope){

    var daftPoints = [[0, 10]],
        punkPoints = [[1, 20]];

    var data1 = [
        {
            data: daftPoints,
            color: '#00b9d7',
            bars: {show: true, barWidth:1, fillColor: '#00b9d7', order: 1, align: "center" }
        },
        {
            data: punkPoints,
            color: '#3a4452',
            bars: {show: true, barWidth:1, fillColor: '#3a4452', order: 2, align: "center" }
        }
    ];

    $scope.data = data1;


});

//Directive Created
myApp.directive('chart', function(){
    return{
        restrict: 'E',
        link: function(scope, elem, attrs){

            var chart = null,
                options = {
                xaxis: {
                    ticks:[[0,'Daft'],[1,'Punk']]
                },
                grid: {
                  labelMargin: 10,
                  backgroundColor: '#e2e6e9',
                  color: '#ffffff',
                  borderColor: null
                }
              };

            var data = scope[attrs.ngModel];

            // If the data changes somehow, update it in the chart
            scope.$watch('data', function(v){
                 if(!chart){
                    chart = $.plot(elem, v , options);
                    elem.show();
                }else{
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
        }
    };
});

My CSS File (appended)

chart {
    display: block;
    width:400px;
    height:200px;
}

In Layout.erb I have these lines in the head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="/js/flot.js"></script>

So it shouldn't be an issue with it not finding the Javascript. I looked all through this post but none of the answers seemed to fit what I was seeing. I am fairly new to Angular, so any help would be appreciated.

Community
  • 1
  • 1
dev
  • 1,477
  • 5
  • 18
  • 43
  • Not able to replicate the issue.Check this fiddle https://jsfiddle.net/vasi_32/gbkfm71c/1/ – brk Jun 03 '16 at 06:02
  • Could it be possible that other Modules / Controllers in another Javascript file could be messing with it? I have another file "service.js" that is creating "var app = angular.module('store', []);" and "app.controller('HttpController', function($http, $scope, $interval)...." I didn't think it would mess with it, but the example works fine on jsfiddle as you point out, but not good in my code. – dev Jun 03 '16 at 06:09

0 Answers0