ChartJS with AngularJS - Canvas won't display anything

Question

I'm trying to use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.

Anyone has an idea? I've tried reordering the scripts a few times. I just can't figure it out. :(

Here is the html.

<html ng-app="profitly">
  <head>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/Chart.js"></script>
    <script src="js/lib/angular.min.js"></script>
    <script src="js/lib/angular-route.min.js"></script>
    <script src="js/lib/angular-chartjs.min.js"></script>
    <script src="js/controller.js"></script>
  </head>

  <body ng-controller="MainController" class="container-fluid">
    <div class="wrapper" ng-view>
      <article ng-controller="graph">      
        <cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>         
      </article>
    </div>
  </body>

<html>

And here is the app initialization:

var app = angular.module('profitly', ['ngRoute', 'chartjs']);

And here is the controller for this part:

app.controller('graph', function($scope) {

  $scope.someData = {
    labels: [
      'Supply', 
      'May', 
      'Jun'
    ],
    datasets: [
      {
    data: [1, 7, 15, 19, 31, 40]
      },
      {
    data: [6, 12, 18, 24, 30, 36]
      }
    ]
  };

  $scope.someOptions = {
      segmentStrokeWidth: 20,
      segmentStrokeColor: '#000'
  };

 });

Imalea · Accepted Answer · 2015-02-07 19:05:24Z

5

Someone else on my hack team figured it out later that day. Here is the HTML:

<article class="col-xs-6 col-md-offset-3 col-md-6 center">
    <canvas id="expenses" width="200" height="100"></canvas>
        <script>
                    var pieData = [
            {
                    value: 20,
                    color:"#878BB6"
            },
            {
                    value : 40,
                    color : "#4ACAB4"
            },
            {
                    value : 10,
                    color : "#FF8153"
            },
            {
                    value : 30,
                    color : "#FFEA88"
            }
    ];
    var pieOptions = {
            segmentShowStroke : false,
            animateScale : true
    }
    var expenses = document.getElementById("expenses").getContext("2d");
    new Chart(expenses).Pie(pieData, pieOptions);
    </script>

</article>

For more, our github repo (the view was the "cashflow.html" one) and to see how it rendered.

Probably not the best way to do it.

answered Feb 7, 2015 at 19:05

Imalea

3765 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Souradeep Nanda Over a year ago

It is not even using angularJs any more. This is not a solution.

koralarts · Accepted Answer · 2014-09-14 00:46:15Z

1

It looks like your missing ng-app in your HTML which would contain which angular app you will be using.

You can put it in the inside one of the divs wrapping the graph.

answered Sep 14, 2014 at 0:46

koralarts

2,1125 gold badges30 silver badges49 bronze badges

3 Comments

Imalea Over a year ago

Sorry, I just made a quick edit. Since it's pulling a view and the index.html, I forgot to add that in the stack overflow snippet. But it's there. See updated code. Sorry about that.

ReganPerkins Over a year ago

@Imalea did you ever find out what was causing this?

Imalea Over a year ago

@ReganPerkins no exactly. I was at a hackathon that day and someone else on my team figured it out. I'll add the answer below.

Collectives™ on Stack Overflow

ChartJS with AngularJS - Canvas won't display anything

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related