CODEWITHSUNDEEP
jqueryangularjschartschart.js
Maltesse
Maltesse

Reputation: 67

Angular and ChartJS to create bar chart

i am trying to write a an interactive charts which uses data from JSON and put it in the chart data. To do that I have to combine chart.js and angular together.

As guideline I am following http://jtblin.github.io/angular-chart.js/ , but the problem is that it doesn't matter what I will do, the chart doesn't appear.

I'll upload part of the code which (I think) occurs the problem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph</title>
</head>
<body>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/chart.js/Chart.min.js"></script>
<script src="../node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

<script>
    var app = angular.module('app', ['chart.js']);
    app.controller('BarCtrl', ['$scope', function ($scope) {
        $scope.options = { legend: { display: true } };
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
    }]);

</script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" chart-type="type"
        chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>
</body>
</html>

After a long time it finally works:

Solution:

<script>
    var app = angular.module('app', ['chart.js']);
    app.controller('BarCtrl', function ($scope) {
        $scope.options = { legend: { display: true } };
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
    });

</script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-type="type"
        chart-data="data" chart-labels="labels" chart-series="series">
</canvas>
</div>
</body>
</html>

Upvotes: 0

Views: 978

Answers (1)

Adam Kane
Adam Kane

Reputation: 38

There seems to be an error in your HTML. Your canvas tags are not closed properly. I noticed that this is an issue if you copy the code from the angular-charts example on their site. Prettying annoying. You may also need to set the height and width of your canvas so that it displays correctly.

<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
        var app = angular.module('app', ['chart.js']);

        app.controller('BarCtrl', function($scope) {
            $scope.labels = ['2006', '2007', '2008',       '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];

            $scope.data = [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90]
            ];
        });
    </script>


</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" width="400" height="400">
        </canvas>
    </div>


<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>


</body>

</html>

Upvotes: 1

Related Questions