Forum : Angular Chart, aucun graphe ne s'affiche

Salut!
Dans le soucis de présenter un graphe dans une app, j'ai exploité Chartist.js et il fonctionne correctement. Mais il n'est pas aussi paramétrable que je souhaiterait. Alors j'ai fouiné et j'suis tombé sur Angular Chart. Le soucis, la doc ([http://jtblin.github.io/angular-chart.js/#top]) n'est pas vraiment explicite au niveau des dépendances. Avec la structure suivante, ma console ne me retourne plus d'erreur mais le graphe ne s'affiche tout de meme pas...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="chart/chart.min.js"></script>
<script type="text/javascript" src="angular-chart/angular-chart.min.js"></script>
// Puis un simple copier-coller
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);
  };
});

Merci! Vous me sauvez! ^^

kal-el

Réponse acceptée

Merci de ta reponse. Est-tu sur d'initialiser correctement ton application Angular? Ton code me parait correcte. Verifie que tu as bien un ng-app="app" dans ton code HTML et que tu instancie bien ton controller. Un truc du genre :

<body ng-app="app">
    <div ng-controller="LineCtrl">
        <canvas id="line" class="chart chart-line" legend="true" data="data" labels="labels" series="series"></canvas>
    </div>
</body>

kal-el

Ayant déjà utilisé ce plugin dans le passé, je pense pouvoir t'aider. Cependant, j'ai quelques questions :

As-tu des erreurs dans la console liée aux fichiers Javascript que tu utilise (chart.min.js...etc...) ?
Est-ce que ton code HTML ressemble au snippet ci-dessous ?

<canvas id="line" class="chart chart-line" legend="true" data="data" labels="labels" series="series"></canvas>

Enfin, au vue de ton code, tu ne semble pas importer le fichier css angular-chart.css. Ce fichier n'a pas d'impact sur la façon dont le graphe s'affiche, il est surtout utilisé pour les légendes mais dans la mesure ou tu as parler de dépendence, s'en est une.

Silvère stOne

Auteur

Salut @kal-el !

Ma console ne me retourne aucune erreur
pour le snippet, je crois que c'est bon

j'ai pas omis de lier la css..
voila mon code...


...
<link type="text/css" rel="stylesheet" media="all" href="/css/angular-chart.css"/>
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>

$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>
...


Merci! tu me sauves là!

Silvère stOne

Auteur

:) J'suis vraiment bleufé... Devine quoi?... ça marche!!! c'est fou comme cela peut faire énormement de bien! J'te dois une fière chandelle @kal-el, les forums... je Kiff!!! ^^

Angular Chart, aucun graphe ne s'affiche

4 réponses