Chart.js, mon graphe ne s'affiche pas

Par Silvère stOne, il y a 11 ans

Javascript

Salut!
Je suis arrivé au stade d'un projet ou je dois afficher afficher des statistiques sous forme de graphe... J'ai parcouru le web et on me conseille majoritairement Chart.js. Je m'y suis mis; mais je n'arrive pas à faire apparaitre mon graphe... Je crois pourtant avoir bien mis en pratique la doc... un bout de mon code js...

<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="/js/Chart.min.js"></script> <script type="text/javascript"> $(function() { // Get context with jQuery - using jQuery's .get() method. var ctx = $("#myChart").get(0).getContext("2d"); // This will get the first returned node in the jQuery collection. var myLineChart = new Chart(ctx).Line(data, options); var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; }) </script>

Vous me sauvez! Merci!

12 réponses

betaWeb, il y a 11 ans

J'ai utilisé D3 js pour une app JS pour mon boulot, il est très complet mais assez complexe à mettre en place et surtout à personnaliser.

betaWeb, il y a 11 ans

Salut,

Pour avoir utilisé Chart.js (et pas aimé le fait qu'il n'est pas DU TOUT paramétrable, notamment point de vue des tooltips), il me semble que le soucis se situe au niveau de la fonction get(0) au début de ton script. Que t'indique la console dev ?

Silvère stOne, il y a 11 ans

Tu as effectivement raison, le problème se situerait a cet endroit... ma console me renvoi ce message TypeError: $(...).get(...) is undefined
Par ailleurs, concernant les tooltips et de ce fait, jvais peut être jeter un coup d'oeil du coté de D3.js, un commentaire ?

ThibaultJ, il y a 11 ans

Slt, Pourquoi pas utiliser Google Chart Api, Simple parametrable et rapide a implementer (Je propose)

betaWeb, il y a 11 ans

@TJ_: Google Chart API c'est une horreur à paramétrer et la doc est à l'image de toutes les autres docs de Google: on ne comprend rien ! Bref, je te conseille de regarder quand même au pire selon tes besoins c'est vrai qu'elle est hyper complète la librairie de Google.

Bakar23, il y a 11 ans

Je suis peut être bizarre mais j'a itrouvé l'API charts super facile a utiliser :0 Que ça soit avec du json ou directement via un fetch php.

betaWeb, il y a 11 ans

@bakar23: tu parles de l'API chart.js? Parce si c'est de celui-ci que tu parles, oui il est super simple à l'utilisation.

ThibaultJ, il y a 11 ans

Cyprien perso je trouve google chart api super simple d'utilisation ;)

Bakar23, il y a 11 ans

Je parle bien de l'API Google, la documentation et les exemples sont, à mon sens, très explicite.

betaWeb, il y a 11 ans

@Bakar23: Après la dernière fois que j'y suis allé c'était il y a plus d'un an, peut-être ont-ils enfin pensé à refactor leur doc.

Silvère stOne, il y a 11 ans

Benh... c'est clair que Google Chart a fait plus que des heureux. Dans ce cas, j'vais pas me fait prier. je file direct là! Merci à tous pour votre contribution, elle m'a vraiment aidé! ^^

ThibaultJ, il y a 11 ans

Silvère stOne pense a mettre le sujet en resolut ;)