5

I am stuck with this error, am having a custom directive for creating a bar chart, which gets generated from a json file.

Here is my code, I have a Index.Html page, where one view is routed inside based on the navigation here is the

Index.Html

<head>
    <title>DiginRt</title>

    <body ng-app="DiginRt" class=" pace-done" cz-shortcut-listen="true">
        <div id="header-topbar-option-demo" class="page-header-topbar">
            <div id="page-wrapper">
                <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
                    <div class="page-header pull-left">
                        <div class="page-title"> Dashboard</div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="page-content" ui-view> // Here i load the view for the dashboards </div>
            </div>
        </div>
        </div>
        <script src="script/jquery-1.10.2.min.js"></script>
        <script src="script/jquery-ui.js"></script>
        <script type="text/javascript">
            var $j = jQuery.noConflict();
        </script>
        <script type="text/javascript" src="script/prototype.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
        <script type="text/javascript" src="script/d3.js"></script>
        <script src="script/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="script/jquery.jsPlumb-1.4.1-all-min.js"></script>
        <script type="text/javascript" src="script/plumb.js"></script>
        <script type="text/javascript" src="script/app.js"></script>
    </body>

</html>

Dashboard.HTML:

<body ng-controller="DashboardCtrl">
    <div id="main_wrapper">
        <div id="toolboxControl">
            <div id="containerChart">
                <ul>
                    <li> <a ng-click="addWidget()" href="#controlflow">Charts</a>
                        <div id="controlflow" class="containerChart">
                            <input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls...">
                            <div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable> <img class="toolheader" src="{{widget.Icon}}">
                                <div class="toolcontent">{{widget.name}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div ng-controller="CustomWidgetCtrl" id="container" class="drop-container" ng-click="addEvent($event)" droppable>
            <div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}">
                <div class="box">
                    <div class="box-header">
                        <h3>{{ widget.name }}</h3>
                        <div class="box-header-btns pull-right"> <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> </div>
                    </div>
                    <div class="box-content">
                        <!--  <bars data="40,4,55,15,16,33,52,20"></bars> -->
                        <bargraph id="d3bar" datajson="sample.json" xaxis-name="Year" xaxis-pos="905" yaxis-name="Frequency" yaxis-pos="12" d3-format=".0%">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </span>
    </div>

App.Js:

 var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
 routerApp.config(function($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise('/dashboard');
     $stateProvider.state('dashboard', {
         url: '/dashboard',
         templateUrl: 'Charts.html',
         controller: 'DashboardCtrl'
     })
 });
 routerApp.controller('DashboardCtrl', ['$scope', '$timeout',
     function($scope, $timeout) {
         $scope.gridsterOptions = {
             margins: [20, 20],
             columns: 4,
             draggable: {
                 handle: 'h3'
             }
         };
         $scope.dashboards = {
             '1': {
                 id: '1',
                 icon: 'images/icons/chart_line.png',
                 name: 'Home',
                 widgets: [{
                     col: 0,
                     row: 0,
                     sizeY: 1,
                     sizeX: 1,
                     icon: 'images/icons/chart_line.png',
                     name: "Stocks per store"
                 }]
             }
         };
     }
 ])
 routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
     function($scope, $modal) {
         $scope.remove = function(widget) {
             $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
         };
         $scope.openSettings = function(widget) {
             $modal.open({
                 scope: $scope,
                 templateUrl: 'chart_settings.html',
                 controller: 'chartSettingsCtrl',
                 resolve: {
                     widget: function() {
                         return widget;
                     }
                 }
             });
         };
     }
 ])
 var BarGraph = Class.create({
     initialize: function(datajson, xaxisName, xaxisPos, yaxisName, yaxisPos, d3Format) {
         this.datajson = datajson;
         this.xaxisName = xaxisName;
         this.xaxisPos = xaxisPos;
         this.yaxisName = yaxisName;
         this.yaxisPos = yaxisPos;
         this.d3Format = d3Format;
     },
     workOnElement: function(element) {
         this.element = element;
     },
     generateGraph: function() {
         //d3 specific coding
         var margin = {
                 top: 20,
                 right: 20,
                 bottom: 30,
                 left: 40
             },
             width = 960 - margin.left - margin.right,
             height = 500 - margin.top - margin.bottom;
         var formatPercent = d3.format(this.d3Format);
         var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
         var y = d3.scale.linear().range([height, 0]);
         var xAxis = d3.svg.axis().scale(x).orient("bottom");
         var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
         var svg = d3.select(this.element).append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
         d3.tsv(this.datajson, function(error, data) {
             if (error) return console.warn(error);
             //console.log(this.xaxisName);
             x.domain(data.map(function(d) {
                 return d.letter;
             }));
             y.domain([0, d3.max(data, function(d) {
                 return +d.frequency;
             })]);
             svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).append("text").attr("x", this.xaxisPos).attr("dx", ".71em").style("text-anchor", "end").text(this.xaxisName);
             svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", this.yaxisPos).attr("dy", ".71em").style("text-anchor", "end").text(this.yaxisName);
             svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
                 return x(d.letter);
             }).attr("width", x.rangeBand()).attr("y", function(d) {
                 return y(d.frequency);
             }).attr("height", function(d) {
                 return height - y(d.frequency);
             });
         }.bind(this));
     }
 });
 routerApp.directive('bargraph', function() { // Angular Directive
     return {
         restrict: 'EA', // Directive Scope is Element
         replace: true, // replace original markup with template 
         transclude: false, // not to copy original HTML DOM
         compile: function(elem, attrs) { // the compilation of DOM is done here.
             // It is responsible for produce HTML DOM or it returns a combined link function
             // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
             console.log(attrs.id);
             console.log(attrs.datajson);
             var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
             var newElem = $(html);
             elem.replaceWith(newElem); // Replacement of the element.
             var ourGraph = new BarGraph(attrs.datajson, attrs.xaxisName, attrs.xaxisPos, attrs.yaxisName, attrs.yaxisPos, attrs.d3Format);
             ourGraph.workOnElement('#' + attrs.id);
             // Work on particular element
             ourGraph.generateGraph(); // here is the error!
         }
     }
 });

3 Answers 3

5
+50

There was some angular code missing from your html and script. A couple of things I did:

  • added <html ng-app="routerApp"> to the html page
  • added var routerApp = angular.module('routerApp', []); to the js file

I created a PLUNK with the results. The only other difference to your code is that it was easier for me to find a TSV sample file rather than the JSON file you referenced in your code. So, I changed from d3.json to d3.tsv, but that is really not important here. I hope this helps.

6
  • I have already added the ng-app , my html code is bit different. is it because of that? Dec 19, 2014 at 10:01
  • These were the only 2 code changes I made (besides the TSV). The only other thing I did was specify the necessary libraries in the html (prototype, D3 and angular). Not having the angular library could result in the angular not defined you are seeing. Check the plunk I created. Dec 19, 2014 at 11:08
  • i have defined all the necessary libraries, the problem is that it works when i build a separate application,when i embed inside a view it does not work Dec 19, 2014 at 11:12
  • 2
    These details should had been part of the original question. I suggest you edit your question to have all necessary explanations and complete code (embedded view). Dec 19, 2014 at 11:26
  • i have modified the question, can you check now Dec 19, 2014 at 11:35
3

There are extraneous, unclosed, and erroneous tags all throughout your HTML that Angular seems to be struggling with parsing. I would recommend checking your HTML for validity, as that will fix the issue you are having.

If you would like examples, I can supply some, just let me know in the comments.

1

I've had these issues before and it had to do with a directive having the replace option set to true. So might be an idea to check if you really need the replace option in your specific case.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.