0

When I tried to use the angular-chart framework I can see the series I've defined, but not the labels and data. I've included following three files to my index.html

<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

These are the variables I define in my $scope

$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
    [12, 13, 8, 4, 29],
    [6, 12, 9, 8, 25]
];

And it only displays this: Displays only series

What am I doing wrong?

EDIT: After further investigation I noticed that the graph is showing when I did a back -> forward when on the page. So by refreshing you lose the chart...

I can manage to draw the chart after refresh by deferring the scope variables like this: 

setTimeout(function (){
        $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]
        ];
    }, 0);

This implies a timing issue, which I'm unable to resolve.

Arninja
  • 735
  • 1
  • 12
  • 24

1 Answers1

0

Is your chart in an element / hierarchy that is hidden / shown (like ng-show or a class that is swapped out, a bootstrap panel...)?

What seems to be happening is that Chart.js is getting the height of the canvas (when it is initializes by angular-chart, which in turn happens when the scope data is changed) as near 0.

For the same reason, a deferred variable change works - because whatever parent / style is causing the canvas to have a small height is now at it's full height.

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Thanks for your info, but there is no ng-show or any class that swaps out... it should be displayed as soon as angular loads the page... – Arninja Jul 16 '15 at 14:21
  • would you be able to post your full HTML code for the page - there could be something else there that drives the size of the chart (Bootstrap tabs / accordions? even if this it the default tab / accordion...). Or just keep taking HTML out till you have a minimum working example. – potatopeelings Jul 16 '15 at 22:49