I am stuck with this error, I have a custom directive for creating a histogram that is generated from a json file.
Here is my code, I have an Index.Html page where one view is routed inside based on navigation here
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"> <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! } } });