Angular-Chart not rendering anything

Question

I'm building an app using AngularJS. In this app I want to show a line-chart with some data. I got a page with two 'tabs'. I used my own implementation for this: Two buttons at the top, $scope.graph.visible boolean which is being set by clicking those buttons.

This is the chart in the HTML:

<canvas 
  data="{{graph.data}}"
  labels="{{graph.labels}}"
  options="{{graph.options}}"
  legend="{{graph.legend}}"

  ng-show="{{graph.visible}}">
</canvas>

In the controller I got this:

  $scope.graph.data = [1, 2, 3, 4, 5, 6, 7, 8];
  $scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee',];
  $scope.graph.options = {
    animation: false
  };
  $scope.graph.legend = true;

In the source of the page I see this (when the graph should be visible):

<canvas data="[1,2,3,4,5,6,7,8]" labels="["hoi","doei","hallo","hee","hoi","doei","hallo","hee"]" options="{"animation":false}" series="" colours="" getcolour="" click="" hover="" legend="true" ng-show="true" class="ng-hide" style="">
</canvas>

EDIT// I wonder why it has the class ng-hide

EDIT2// When I manually remove the ng-hide class I can see a white block with web inspector. Otherwise I can''t even find that.

EDIT3// Also, when I add class="" in the HTML-file, it doesn't remove the ng-hide class.

EDIT4// http://plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview

No errors in the console. Yes, I will provide a plunker or something in a few minutes! — Jeroen
– Jeroen, Commented Apr 22, 2015 at 11:14
plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview Here is a plunker! Hope you can help me! — Jeroen
– Jeroen, Commented Apr 22, 2015 at 11:29
you wrong use angular chart :-) just a minute, i provide a some fixing — Grundy
– Grundy, Commented Apr 22, 2015 at 11:48

Ali Ezzat Odeh · Accepted Answer · 2018-11-18 12:45:34Z

9

Adding following div container over the canvas solved the problem for me, check the following:

<div class="chart-container" ng-show="graph.visible">
  <canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>

answered Nov 18, 2018 at 12:45

Ali Ezzat Odeh

2,1631 gold badge20 silver badges18 bronze badges

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

1 Comment

Ali Ezzat Odeh Over a year ago

@AnandA.S as I remember it was related to ng-show="graph.visible", but really not sure since this is an old answer though!

score 8 · Accepted Answer · 2015-04-22 12:26:40Z

8

You don't have to use {{}} when it's data from the scope, so you have to change like this :

<canvas 
    class="chart chart-line"
    data="graph.data"
    labels="graph.labels"
    series="graph.series"
    options="graph.options"
    legend="graph.legend"
    ng-show="graph.visible">
  </canvas>

Furthermore, data should be an array of array like

$scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]];

See the working Plunker here (fixed by Grundy in the comments) : http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview

edited Apr 22, 2015 at 12:26

answered Apr 22, 2015 at 11:18

user670804

8 Comments

Jeroen Over a year ago

That's what I though too, but because without the curly braces it just prints "graph.visible" I put those around it. Now it prints "true" or "false". I know it's strange. I commented a plunker to the original post, check it out there!

user670804 Over a year ago

When you don't you the bracket and you hover "canvas" in the dev tools you can see that it's there. Your problem is that "canvas" is not a directive or doesnt do anything.

Jeroen Over a year ago

When I remove it, the canvas is indeed visible (but still white ...), but it has ng-show="graph.visible" in the web-inspector. Is that good?

Grundy Over a year ago

@XavierBalloy but legend not change dynamic, i mean if on start graph.legend is true legend always true, even if set graph.legend to false

Grundy Over a year ago

@JeroenJK just hide not graph element, but graph container like this plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview

|

Collectives™ on Stack Overflow

Angular-Chart not rendering anything

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related