Angular + Chartjs

Asked

Viewed 802 times

3

I’m starting to use the Chart.js Library by following the site http://jtblin.github.io/angular-chart.js/#getting_started

But I’m having difficulty, when I rotate the html page, nothing happens, all scripts are found but the graph is not displayed.

I look forward to suggestions

<!doctype html>
<html>
    <head>
        <title>Angularjs</title>
        <meta charset="utf-8" lang="pt-br">
        <link rel="stylesheet" href="public/vendor/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="public/vendor/bootstrap/dist/css/bootstrap-theme.css">
        <script type="text/javascript" src="public/vendor/angular/angular.js"></script>
        <script type="text/javascript" src="public/vendor/Chart.js/Chart.js"></script>
        <script type="text/javascript" src="public/vendor/angular-chart.js/dist/angular-chart.js"></script>
        <script type="text/javascript" src="public/vendor/angular-chart.js/dist/angular-chart.css"></script>
        <script type="text/javascript" src="public/vendor/d3/d3.js"></script>
    </head>
    <body ng-app="app">
        <div class="container">
            <h1>Estudos com Chart.js</h1>
            <h5>Dados das base dados.</h5>
            <br>
            <canvas id="line" class="chart chart-line" data="data"
                    labels="labels" legend="true" series="series"
                    click="onClick">
            </canvas>
            <script type="text/javascript">
                angular.module("app", ["chart.js"]).controller("LineCtrl", 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);
                    };
                });
            </script>
        </div>
    </body>
</html>
angularjs-directives chartjs

  • No error on console?

  • Failed to put the "Linectrl" in the ng-controller tag.

1 answer

2

I think you should reference the controller in HTML, for example use the ng-app="app" on the tag <html> and use ng-controller="LineCtrl" on the tag <body>

Browser other questions tagged angularjs-directives chartjs

You are not signed in. Login or sign up in order to post.