javascript - AngularJS - Angularchart - Error has no method 'width'

when I try to use Angular-chart, I have got this error :

TypeError: Object [object Object] has no method 'width'
at e (http://localhost:8080/lib/angular/angular-charts.min.js:1:10690)
at http://localhost:8080/lib/angular/angular.js:6680:44
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6271:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at publicLinkFn (http://localhost:8080/lib/angular/angular.js:5587:30)
at http://localhost:8080/lib/angular/angular.js:1306:27 <div ac-chart="chartType" ac-data="data"     ac-config="config" id="chart" class="chart ng-isolate-scope">

Do you know how to fix this ? I haven't found anything helpful on internet.

Here is my code :

HTML

 <!doctype html>

<html lang="en" ng-app="MYaPP">
<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-charts.min.js"></script>
  <script src="js/app.js"></script>
  <script src="/socket.io/socket.io.js"></script>

</head>
<body>
<div class="top" align="center"> Risk Proxy Manager </div>

<br></br>



<div class="plotGraph" ng-controller='plotGraph'>
    <div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>
</div>

</body>
</html>

App:

var myApp = angular.module('myApp', ['angularCharts']);

function plotGraph($scope){
console.log("And here is the graph part");

//Graph
$scope.data = {
    series: ['Sales', 'Ine', 'Expense', 'Laptops', 'Keyboards'],
    data : [{
        x : "Sales",
        y: [100,500, 0],
        tooltip:"this is tooltip"
    },
    {
        x : "Not Sales",
        y: [300, 100, 100]
    },
    {
        x : "Tax",
        y: [351]
    },
    {
        x : "Not Tax",
        y: [54, 0, 879]
    }]     
}

$scope.chartType = 'bar';

$scope.config = {
    labels: false,
    title : "Not Products",
    legend : {
        display:true,
        position:'left'
    }
}

$scope.config1 = {
    labels: false,
    title : "Products",
    legend : {
        display:true,
        position:'right'
    }
}
}

And the css :

.graph{
    float:left;
width: 50%;
height:400px;
}

/////////////////////////////////////////////////////////////////////////////////////////////////// Thank you

when I try to use Angular-chart, I have got this error :

TypeError: Object [object Object] has no method 'width'
at e (http://localhost:8080/lib/angular/angular-charts.min.js:1:10690)
at http://localhost:8080/lib/angular/angular.js:6680:44
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6271:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at publicLinkFn (http://localhost:8080/lib/angular/angular.js:5587:30)
at http://localhost:8080/lib/angular/angular.js:1306:27 <div ac-chart="chartType" ac-data="data"     ac-config="config" id="chart" class="chart ng-isolate-scope">

Do you know how to fix this ? I haven't found anything helpful on internet.

Here is my code :

HTML

 <!doctype html>

<html lang="en" ng-app="MYaPP">
<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-charts.min.js"></script>
  <script src="js/app.js"></script>
  <script src="/socket.io/socket.io.js"></script>

</head>
<body>
<div class="top" align="center"> Risk Proxy Manager </div>

<br></br>



<div class="plotGraph" ng-controller='plotGraph'>
    <div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>
</div>

</body>
</html>

App:

var myApp = angular.module('myApp', ['angularCharts']);

function plotGraph($scope){
console.log("And here is the graph part");

//Graph
$scope.data = {
    series: ['Sales', 'Ine', 'Expense', 'Laptops', 'Keyboards'],
    data : [{
        x : "Sales",
        y: [100,500, 0],
        tooltip:"this is tooltip"
    },
    {
        x : "Not Sales",
        y: [300, 100, 100]
    },
    {
        x : "Tax",
        y: [351]
    },
    {
        x : "Not Tax",
        y: [54, 0, 879]
    }]     
}

$scope.chartType = 'bar';

$scope.config = {
    labels: false,
    title : "Not Products",
    legend : {
        display:true,
        position:'left'
    }
}

$scope.config1 = {
    labels: false,
    title : "Products",
    legend : {
        display:true,
        position:'right'
    }
}
}

And the css :

.graph{
    float:left;
width: 50%;
height:400px;
}

/////////////////////////////////////////////////////////////////////////////////////////////////// Thank you

Share Improve this question edited Feb 28, 2014 at 14:53 asked Feb 28, 2014 at 14:35 WellWellWell 1611 gold badge5 silver badges15 bronze badges

paste a plunkr example – pedrommuller Commented Feb 28, 2014 at 14:39
Can you show your code please? – qwertynl Commented Feb 28, 2014 at 14:46
Yes I have put it,sorry – WellWellWell Commented Feb 28, 2014 at 14:56

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

Hello I had the same issue. Make sure you look at the installation instructions on here http://chinmaymk.github.io/angular-charts/ .

I solved it first by making sure my dependencies were loading in the correct order. This extension relies on d3 and Jquery.

This is the order it remends

<script type='text/javascript' href='./bower_ponents/jquery/jquery.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/angular/angular.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/d3/d3.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/angular-charts/dist/angular-charts.min.js'></script>

After I fixed this the next error I got was...

Error: Please set height and width for the chart element

It turns out in order for the height and width of the graph to be set you have to set the height and width of the chart with CSS. I found this answer through this issue on the angular-charts repo. https://github./chinmaymk/angular-charts/issues/12

I added this code to my css...

#chart {
  height: 400px;
  width: 800px;
}

And viola it worked! Hopes this helps :)

The problem has been solved, very important set

<script src="http://code.jquery./jquery-1.11.0.min.js"></script>

and

<script data-require="[email protected]" src="http://code.angularjs/1.2.2/angular.js" data-semver="1.2.2"></script>

on the top!!!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS - Angularchart - Error has no method 'width' - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)