Angular chart doesn't show in my page

Question

I followed all the tutorial, included all the js and css necessary, the html is according to the tutorial and the chart created in my js doesn't show in my page.

Css and JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>   
<script src="js/angular-chart.js"></script>
<script src="js/angular-chart.min.js"></script>
<script src="js/bootstrap.min.js"></script>

ng-app and ng-controller:

<body class="container-full" ng-app="comando">

<div id=D12 class="col-md-12" ng-controller="fchart">
                <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"
                    chart-click="onClick">
                </canvas> 
            </div>

script.js:

var app = angular.module('comando', ["chart.js"]);

app.controller("fchart", function ($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };
});

I have no idea whatelse i can do. I aprecciate the help........

Possible duplicate of [link](http://stackoverflow.com/questions/37143278/angular-chart-js-it-doesnt-display-the-chart?rq=1). — Pravesh Khatri, May 19 '16 at 12:58

score 0 · Answer 1 · answered May 19 '16 at 13:05

There is an issue according to the github repo. The solution is:

Upgrade the angular-chart.js library to latest version by uninstalling the current version and reinstalling the new version. Assuming you are using bower otherwise, remove the references to both the Chart.js library and the angular-chart.js library and then add the v 2.x of Chart.js and v 1.0.0-alpha6 of angular-chart.js to your project and add the references in your html file

bower install angular-chart.js#1.0.0-alpha6 --save
In your controller, add a reference to store chart Options

$scope.chartOptions={ legend: { display: true, position: 'bottom' } };
If you are utilizing the legend feature, In your HTML file make the changes to the directive as follows

Remove the chart-legend attribute and replace with chart-options="chartOptions"

Example

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"
                chart-click="onClick">
            </canvas>

Becomes

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-options="chartOptions" chart-series="series"
                chart-click="onClick">
            </canvas>

I find out that i did't include the script.js :x but even I adding later the problem stayed the same. And i saw in the console the following error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=comando&p1=Error%3A…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A21%3A19) angular.js:4587 and at the line 4587: throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}", — Ernany Daniel, May 19 '16 at 13:31

Angular chart doesn't show in my page

1 Answers1