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


ThibaultJ
Réponse acceptée

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

Bakar23
Réponse acceptée

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.

Bakar23
Réponse acceptée

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

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 ?

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 ?

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.

@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: tu parles de l'API chart.js? Parce si c'est de celui-ci que tu parles, oui il est super simple à l'utilisation.

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

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

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é! ^^

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