Créer un tableau de bord de devises avec Django

00:00:00 :Maintenant qu'on a importé la librairie char.js dans notre fichier html, on va pouvoir créer notre premier graphique.Alors on ne va pas encore utiliser les données de notre API, ça ce sera dans la prochaine section.
00:00:11 :Pour l'instant on va rentrer des valeurs à la main, c'est vraiment juste pour voir comment on va pouvoir insérer un graphique, donc comment créer le graphique.
00:00:18 :Pour ça on va devoir utiliser un petit peu de Javascript, donc ne vous en faites pas, c'est quand même assez simple.Ce cours n'a bien entendu pas comme vocation de vous apprendre Javascript, donc je ne rentrerai pas vraiment dans les détails, mais on va quand même voir ensemble toutes les lignes de code à écrire.
00:00:33 :Je ne vais pas copier-coller un gros bloc de code, donc ne vous en faites pas, mais juste pour vous prévenir, il y a un peu de Javascript qui s'en vient.
00:00:39 :Donc prenez votre courage à demain et on commence tout ça.Pour l'instant on est avec notre site qui ne comporte rien, on a juste changé le fond pour avoir un mode sombre.
00:00:48 :On va revenir dans notre fichier HTML ici, et à l'intérieur du body on va créer plusieurs divs.Je vais faire une tabulation pour bien indenter mon code à l'intérieur de mon fichier HTML, et on va créer un container.
00:01:00 :La première chose à faire c'est toujours de créer un container, puisque c'est la structure de Bootstrap.On va avoir un container qui va contenir ensuite un ou plusieurs rows, donc un row c'est une rangée, et cette rangée va pouvoir contenir des colonnes.
00:01:13 :On va faire div, point, et le point ça va nous permettre d'automatiquement créer une classe.Grâce à PyCharm, vous allez voir, ça va nous simplifier la vie.
00:01:21 :On va faire div, point, et le nom de la classe qu'on veut créer, donc container-fluide.Tiret-fluide ça permet d'avoir un container qui va prendre toute la largeur de l'écran.
00:01:31 :Je mets mon curseur ici à la fin de container-fluide, j'appuie sur tabulation, et automatiquement vous voyez qu'il a créé notre tag div ici.Il a bien mis l'attribut classe avec la classe container-fluide, et on a bien notre tag ici qui se ferme avec le slash div.
00:01:46 :On va pouvoir, à l'intérieur ici, appuyer sur entrée pour organiser là encore notre HTML un peu mieux, et on va créer un autre div à l'intérieur de ce div container-fluide.
00:01:56 :Ce div, en fait, ça va être cette fois une rangée.On va dire row, comme ceci, et on va avoir une autre classe également qui va nous permettre de centrer les éléments à l'intérieur de cette rangée.
00:02:07 :Cette deuxième classe qu'on va utiliser c'est justify-content-center.Je peux rajouter un point pour ajouter une autre classe automatiquement quand je vais faire tabulation.Je mets un point, je dis justify-content-center, j'appuie sur tabulation, et automatiquement on a notre div avec les classes row et la classe justify-content-center.
00:02:28 :Vous voyez que PyCharm est très efficace, on peut rapidement créer des fichiers HTML grâce à ces petites astuces.La dernière chose qu'on va faire, c'est créer des colonnes.
00:02:37 :On va créer une seule colonne pour l'instant qui va contenir notre graphique, et on va avoir quelque chose à faire pour le responsive.C'est-à-dire que notre colonne ne va pas avoir la même taille selon la taille d'écran.
00:02:48 :On va faire encore un div avec cette fois-ci col-md-10.MD, ça va cibler toutes les tailles d'écran qui vont être moyennes et en dessous.Par exemple, les tablettes et les mobiles.
00:03:01 :Ce que je veux, c'est que sur les mobiles et les tablettes, la colonne prenne pas mal de place, donc 10 sur 12.Le maximum pour une colonne, c'est 12.
00:03:09 :10 sur 12, c'est presque l'entièreté de ma page web, et c'est logique puisque sur une tablette ou un mobile, on a moins d'espace d'écran.Je veux que ma colonne prenne plus de place pour qu'on voit bien notre graphique.
00:03:21 :Par contre, sur les écrans un peu plus larges, comme un écran d'ordinateur de bureau,je ne vais pas vouloir que mon graphique prenne toute la largeur de l'écran.
00:03:32 :Pour les écrans qui vont être larges et au-dessus, je vais mettre une valeur qui va être plus petite.On va remettre un point ici pour créer une autre valeur pour ma colonne.
00:03:41 :On va dire col-lg-6.Ça veut dire que pour les écrans qui vont être larges et plus que larges,on a large et XL si je me souviens bien, on va avoir une colonne qui va prendre moins de place.
00:03:54 :Je remets mon curseur à la fin, j'appuie sur tabulation pour valider,je rappuie sur entrée pour mettre mon div à la suite, mon div ici qui ferme à la suite.
00:04:03 :Et à l'intérieur de tout ça, pour l'instant, si on revient sur notre site web, on n'aura rien.Vous voyez, j'actualise. Là, j'ai actualisé avec POM Air.
00:04:11 :Sinon, vous cliquez ici sur Reload this page, et on n'a rien, on ne voit rien sur notre page.C'est normal puisqu'on a des divs, mais il n'y a rien à l'intérieur de ces divs.
00:04:20 :Pour rapidement visualiser un div, on peut faire par exemple un H1.J'appuie sur tabulation pour autocompléter ce tag, et je vais faire l'ORM.L'ORM, c'est le lorem ipsum.
00:04:30 :Ça, c'est généralement valide sur pas mal tous les éditeurs de texte.C'est-à-dire qu'on peut taper l'ORM, on appuie sur tabulation, et là, magie, ça nous met un lorem ipsum.
00:04:39 :C'est pratique pour avoir très rapidement du texte qui va nous permettre de tester nos divs.On peut actualiser de nouveau notre site, et là, vous voyez qu'on a bien notre texte qui s'affiche.
00:04:49 :Petit problème là, c'est que par contre, on ne voit pas vraiment notre colonne.Vu qu'on n'a pas de couleur d'arrière-plan sur notre div, c'est un peu difficile de savoir où il commence et où il s'arrête.
00:04:59 :Donc on va revenir dans notre fichier HTML ici, et on va rajouter bg-info.Donc on pourrait mettre n'importe quelle couleur ici, on pourrait mettre success, warning, danger,donc tout ce qu'on a vu dans la partie bootstrap sur les couleurs.
00:05:11 :Dans mon cas, je vais mettre info puisque c'est quand même assez agréable, ça ne va pas trop nous faire mal aux yeux.Et là, vous voyez qu'on a donc une colonne qui commence ici, qui s'arrête ici.
00:05:20 :Donc ça représente en fait notre colonne qu'on a mis de 6 ici, puisque moi j'ai un écran qui est assez large,j'enregistre sur un ordinateur de bureau.
00:05:27 :Et pour vérifier ce que ça donne sur un écran plus petit, on peut faire un clic droit, aller dans inspect ici,et on va en fait pouvoir varier la taille de notre écran.
00:05:36 :Donc là, on peut mettre par exemple un mobile, et vous voyez que sur mobile, on a juste une petite marge ici à gauche et à droite.
00:05:42 :Si on revient sur notre fichier HTML et qu'à la place de 10, on met 12, et que je reviens et que j'actualise,là vous voyez qu'on a bien une colonne qui prend toute la largeur de notre écran.
00:05:52 :Donc nous, on ne veut pas que ça prenne non plus toute la largeur, donc on va revenir à 10.Et si j'actualise de nouveau, donc j'ai bien ces marges ici.
00:05:59 :Si j'augmente un peu, donc mobile, on est toujours avec des marges.Si je me mets en tablette, là on a encore ces marges ici, donc on est toujours avec une colonne de 10.
00:06:07 :Et si je me mets au-dessus de ce format tablette, donc par exemple en format laptop, là vous voyez qu'on a une colonne qui rétrécit.Donc on a en fait une colonne qui prend 6 unités sur 12.
00:06:20 :Donc si on voulait que ça prenne un peu plus, là c'est à vous de voir ce que vous voulez faire.On pourrait mettre par exemple 8, et si j'actualise, vous voyez que ça prend un petit peu plus de place.
00:06:28 :Bien entendu, on pourra réadapter tout ça en fonction des graphiques.Donc une fois qu'on aura intégré les graphiques et qu'on aura mis beaucoup plus de choses sur notre site,on peut très bien après ça revenir changer ces valeurs pour avoir quelque chose qui fonctionne.
00:06:40 :Pour l'instant, je vais laisser ça comme ça.Et je ne vais pas laisser mon lorem ipsum puisque c'était juste pour le test.Donc ça me paraît bien comme ça ici.
00:06:48 :Notre graphique va être bien centré et va prendre la place qu'il faut selon la taille de mon écran.Et à la place de ce lorem ipsum que je vais supprimer, je vais insérer un autre élément ici qui va être un élément de type canvas.
00:07:00 :Donc canvas comme ceci.Et cette fois-ci, on ne va pas mettre une classe, mais on va mettre un ID.Pour mettre un ID, on va cette fois-ci utiliser le symbole hashtag, donc le symbole dièse, qui n'est plus le point.
00:07:12 :Le point, c'était pour les classes.Le dièse, c'est quand on veut faire un ID.Donc je vais l'appeler chart et j'appuie sur tabulation.Et automatiquement, vous voyez qu'on a bien ce canvas ici qui est créé avec un ID qui est égal à chart.
00:07:25 :Donc c'est tout bon pour mon canvas.Et ensuite, on va pouvoir ici, après notre div, écrire notre javascript.Donc le javascript, là encore, on pourrait le faire mieux, c'est-à-dire on pourrait le mettre dans un fichier javascript séparé.
00:07:38 :C'est ce qui est conseillé de faire.Mais là encore, je ne veux pas rentrer dans les fichiers statiques.Je ne veux pas passer le temps que ça prendrait sur les fichiers statiques.
00:07:46 :Donc désolé, mais il y aurait au moins 30 minutes à faire là-dessus.Donc dans ce cas-ci, on va écrire le javascript encore une fois à l'intérieur du html.
00:07:54 :Si on fait tout à l'intérieur de notre fichier html, ce n'est pas la meilleure pratique.Donc là, je préfère vous le dire, si vraiment vous faites un site, il vaut mieux externaliser ces fichiers.
00:08:03 :Dans ce cas-ci, pour ne pas avoir à créer les fichiers statiques et à gérer tout ça,et pour se simplifier la vie puisque notre application reste quand même assez simple,eh bien on va écrire le javascript directement dans notre html.
00:08:15 :Donc pour ça, on va créer un tag script.Donc je vais mettre script ici et appuyer sur tabulation pour créer automatiquement ce tag.Et à l'intérieur de ce tag, c'est donc ici que va se dérouler tout notre javascript.
00:08:28 :Donc la première chose qu'on va devoir faire, c'est récupérer cet élément ici,donc l'élément canva qui a l'id chart, puisque c'est à l'intérieur de ce canva que l'on va insérer le graphique.
00:08:40 :Donc pour ça, je vais créer une variable.Donc je vais faire une variable avec var et on va l'appeler ctx.On va dire que c'est égal à document.
00:08:48 :Donc document, c'est ce qu'on appelle le document object model, le DOM.C'est en fait ce qui représente notre page web et ce qui va nous permettre d'accéder à ces différents éléments à l'intérieur de notre fichier html.
00:08:58 :Donc ce qu'on va récupérer, c'est le id.Donc on va faire get element by id.Ça va nous permettre de récupérer l'élément avec l'id chart.
00:09:06 :Donc je vais sélectionner l'id comme ceci, donc avec les guillemets.Je mets des parenthèses et je vais dire que je veux récupérer donc l'élément qui a l'id chart.
00:09:15 :Je mets un point virgule à la fin de la ligne.Ce n'est pas absolument obligatoire mais c'est vraiment conseillé.Donc ça nous permet de définir que la ligne s'arrête ici si jamais on voulait minifier notre javascript.
00:09:26 :Donc minifier ça veut dire en fait réduire le poids du fichier.Donc en fait ce qu'on fait c'est qu'on supprime tous les caractères qui n'ont pas vraiment lieu d'être.
00:09:33 :Donc les espaces etc.Et dans ce cas-ci on a besoin donc du point virgule pour indiquer que c'est la fin de la ligne.Donc ça c'est quelque chose qu'on ne pourrait pas faire en python, minifier un fichier python forcément.
00:09:44 :Puisque le python par définition est très très dépendant des tabulations, des espaces etc.Donc c'est quelque chose qu'on ne pourrait pas faire.C'est un des désavantages d'ailleurs de python de ne pas pouvoir comme ça compacter les fichiers python.
00:09:56 :Donc avec javascript il vaut toujours mieux mettre ce point virgule même si on n'aura pas d'erreur.C'est quand même toujours mieux au cas où par la suite on aurait un processus qui nous permettrait de minifier ce fichier pour ne pas qu'il prenne trop de place.
00:10:07 :Donc un point virgule à la fin de la ligne et on va ensuite créer une instance de notre graphe.Donc on va faire new, ça va nous permettre de créer un objet chart.
00:10:16 :Donc on y a accès grâce au fait qu'on a en fait importé ce cdn ici, le cdn chart.min.js.Donc cet objet chart il est à l'intérieur de ce fichier javascript et donc c'est vraiment parce qu'on a intégré ce fichier dans notre fichier html que l'on peut créer cet objet.
00:10:31 :Donc on va créer un objet chart qui va être en fait notre graphique et on va indiquer en premier argument ici où on veut insérer ce graphique.
00:10:40 :Donc là on va l'insérer dans ctx, donc ctx c'est la variable que j'ai définie ici qui représente mon canva.Donc je mets ctx, une virgule et je vais ouvrir ensuite une accolade.
00:10:51 :Donc vous allez voir ça va ressembler au dictionnaire de Python.Donc là on va vraiment avoir ce même concept de clé valeur qui va nous permettre de définir plusieurs informations sur notre graphique.
00:11:01 :Je vais déjà fermer ma parenthèse ici et mettre un point virgule.Donc je préfère faire les choses dans l'ordre et bien fermer les choses puisque en fait vous allez voir que là petit à petit on va avoir pas mal d'accolades de virgule, de point virgule, de tous ces caractères en fait qui vont commencer à s'ajouter.
00:11:17 :Donc c'est bien important d'essayer de s'y retrouver le plus rapidement possible pour ne pas s'y perdre.Je mets tout ça à la ligne pour me laisser un peu d'espace et la première chose qu'on va faire c'est spécifier le type de notre graphique.
00:11:30 :Donc le type ça va être la clé et la valeur de cette clé type ça va être le type de graphique que l'on veut avoir.
00:11:36 :Donc dans ce cas-ci on va avoir un graphique en ligne.Si jamais vous voulez voir les différents types de graphique que vous pouvez créer on peut aller dans chart.js, donc dans la documentation de chart.js et dans get started qui va nous amener sur la documentation.
00:11:50 :Vous allez avoir ici à gauche tous les différents types de chart.Donc si je vais sur le chart de type ligne on va voir ici par exemple dans les examples usage on voit bien qu'on a le type ligne ici.
00:12:00 :Et si vous descendez vous allez sur certains graphiques voir différents types qui peuvent être utilisés.Donc dans les graphiques de type ligne il n'y a que ça mais si par exemple je vais dans bar ici on voit que par défaut on a le type bar.
00:12:12 :Donc ça c'est si on voulait faire un graphique en bar comme ceci et si on descend un peu on va voir que bien des fois on a d'autres types de graphiques qui sont disponibles.
00:12:20 :Donc comme par exemple ici les horizontales bar chart et si on regarde ici et bien le type de ce graphique c'est horizontal bar.Vous pouvez aussi venir donc sur la page d'accueil dans les samples et voir en fait un peu plus visuellement ces différents types de graphique.
00:12:34 :Donc si on revient par exemple sur le bar chart ici et qu'on clique sur horizontal on l'avait vu dans une partie précédente il me semble vous pouvez faire un clic droit aller sur inspect pour voir le code source en fait de cette page.
00:12:46 :Et si on va voir dans le script ici on peut également retrouver ce type donc type de point horizontal bar.Donc c'est une autre façon plus visuelle si vous voulez puisque là on voit vraiment les graphiques d'aller voir quels sont les types de graphique que l'on peut utiliser.
00:12:59 :Donc nous dans notre cas on va avoir un line chart ici donc si je vais sur le basique c'est ça en fait qu'on veut essayer de recréer donc un graphique avec des lignes.
00:13:06 :Donc si je reviens dans mon script ici donc dans mon fichier index.html à l'intérieur de mon javascript on spécifie qu'on veut donc un graphique de type ligne.
00:13:16 :Je vais ensuite spécifier une autre clé donc une autre paire de clés valeurs donc je mets une virgule je vais à la ligne et cette fois ci on va spécifier les data.
00:13:24 :Donc la clé ça va être data et on va avoir un dictionnaire là encore donc je vais également m'assurer de le fermer tout de suite.
00:13:31 :Donc la collade pour ouvrir et la collade pour fermer je vais à la ligne pour me laisser encore un peu d'espace et cette fois ci on va indiquer les labels.
00:13:39 :Donc les labels en fait c'est ce qu'on va avoir sur l'axe des X.Donc si je reviens sur mon graphique ici dans ce cas ci ce serait par exemple January, February, March, April, May, June et July.
00:13:48 :Donc là c'est les mois nous dans notre cas ça va être les dates.Alors comme je vous l'ai dit pour l'instant on va mettre des valeurs un peu arbitraires donc moi je vais mettre par exemple 1, 2, 3, 4, 5.
00:13:57 :Et ça c'est vraiment les valeurs qui vont être affichées sur l'axe des X.Ensuite on met une virgule puisque là en fait on a donc un dictionnaire et on va avoir ce même principe de clé valeur.
00:14:07 :Donc la clé c'est labels et les valeurs c'est 1, 2, 3, 4, 5.Donc je mets une virgule je vais à la ligne et on va avoir ensuite ce qu'on appelle les data sets.
00:14:16 :Alors les data sets on peut en avoir plusieurs si je reviens là encore sur mon exemple de graphique.On a une seule valeur ici dans les labels puisque on a January, February, March on a seulement un axe des X.
00:14:27 :Par contre sur l'axe des Y ici on peut avoir plusieurs lignes qui s'entrecroisent donc comme c'est le cas ici et on a plusieurs data sets.
00:14:33 :Vous voyez d'ailleurs ici en haut les labels s'appellent MyFirstDataSet et MySecondDataSet.Donc ça c'est vraiment les deux data sets qu'on a.Donc tout ça pour dire qu'en fait ici dans notre data set on va avoir une liste.
00:14:44 :Donc une liste on la définit avec des crochets et on peut avoir plusieurs data sets.Dans notre cas on n'en aura qu'un puisqu'on aura juste la courbe de la devise que l'on va afficher.
00:14:53 :Par contre on pourrait si on voulait afficher plusieurs devises sur un même graphique et bien avoir plusieurs data sets sur le même graphique.Donc dans notre cas on va en avoir un seul donc je vais indiquer à l'intérieur de ces crochets un dictionnaire.
00:15:05 :Donc là je l'ouvre et je le ferme là encore directement pour ne pas oublier de fermer mon accolade par la suite.Et on va avoir là encore plusieurs valeurs à l'intérieur de ce data set qu'on va spécifier.
00:15:15 :La première c'est le label de ce data set.Donc label de point.Pour l'instant je vais mettre usd et par la suite on ira récupérer le nom de la devise qu'on est en train d'afficher.
00:15:24 :On va avoir une deuxième valeur qui va être les data.Donc les data c'est vraiment là les données qui vont être affichées.Donc dans ce cas ci dans les deux graphiques vous voyez qu'on a notre premier data set qui est une valeur de 35.
00:15:36 :Ensuite on est à 6, ensuite on est à 22, 78 etc.Donc ça c'est vraiment les valeurs qui vont être affichées sur notre graphique et on va les spécifier dans ce data ici.
00:15:45 :Donc vous voyez ça fait déjà pas mal de choses un peu en arborescence.On a un premier data dans lequel on a les labels.Après on a notre data set et à l'intérieur de ce data set on a également un data qui va représenter les valeurs de nos différents data sets.
00:15:58 :Donc là je vais mettre décrocher puisqu'on va avoir plusieurs valeurs.Donc je vais mettre par exemple 1, 3, 2, 7 et 4.Donc plusieurs valeurs.
00:16:08 :Alors j'essaye d'avoir le même nombre ici que ici puisque forcément je veux avoir quelque chose qui est synchronisé entre les deux.Donc je m'assure d'avoir le même nombre de valeurs.
00:16:17 :Et ensuite on a juste deux paramètres qu'on va spécifier.Le premier c'est fill et donc fill ça va nous permettre de spécifier si on veut remplir ou pas notre graphique en dessous de la ligne.
00:16:27 :Donc on le changera par la suite, on mettra true.Par défaut il est à true, moi je vais le mettre à false.Et je vous montrerai visuellement ce que ça change quand on le met à true ou à false pour que ce soit un peu plus clair.
00:16:37 :Pour l'instant je vais juste le mettre à false.Je vais finir ça et après on va voir visuellement ce que ça donne sur notre graphique.
00:16:42 :La dernière chose que je vais spécifier c'est la couleur de la ligne.Donc pour ça on utilise border color.Et on va spécifier une chaîne de caractère qui va être une valeur en RGB.
00:16:52 :Donc moi je vais mettre par exemple 255, 128 et 128.Donc là normalement on a tout, on s'assure qu'on a bien fermé les choses comme il faut.
00:17:02 :On a bien fermé les lignes qui ne servent à rien ici pour y voir un peu plus clair.Donc on a notre dataset ici, donc on a un seul dataset.
00:17:08 :Si on voulait en mettre plusieurs et bien on pourrait copier ça, mettre une virgule et coller avec d'autres valeurs.On pourrait mettre par exemple le canadien avec d'autres valeurs, d'autres couleurs pour les lignes etc.
00:17:19 :Donc on pourrait avoir plusieurs datasets ici.Donc on a notre accolade qui ouvre, notre accolade qui ferme, c'est bon.On a notre crochet qui ouvre, notre crochet qui ferme, c'est bon.
00:17:27 :Donc tout ça c'est la valeur qui est associée à dataset.On a notre label, les deux points, la valeur, on a bien la virgule ici pour séparer les deux clés, donc tout ça c'est bon.
00:17:36 :L'accolade qui ouvre, l'accolade qui ferme, là encore c'est bon.Donc tout ça c'est la valeur associée à data.On a bien notre virgule pour séparer type et data, donc ça aussi c'est bon.
00:17:45 :Et on a pour finir notre accolade ici qui se ferme à cet endroit.Et notre parenthèse cette fois-ci qui se ferme ici avec, pour finir, le point virgule.
00:17:55 :Donc j'espère que vous vous êtes bien accrochés, ça fait beaucoup de choses un peu d'un coup.Et on n'a même pas encore actualisé notre site pour voir si ça marche.
00:18:03 :Alors là on a de la chance si tout marche d'un coup.Je vais fermer cet onglet ici pour qu'on ait notre site en plein écran.
00:18:10 :J'actualise et là magie, alors il y a juste une petite chose qui est assez embêtante, c'est le background info ici que j'ai laissé.Mais sinon magie, enfin magie oui et non, en fait on a juste bien travaillé.
00:18:20 :On a notre graphique qui s'affiche avec donc sur l'axe des X ici les labels qu'on a spécifiés, donc 1, 2, 3, 4, 5.Et ensuite ici nos valeurs de 1, 3, j'avais mis 1, 3, 2, 7 et 4, donc 7 et 4 vous voyez.
00:18:34 :Donc on peut mettre notre curseur ici pour afficher les valeurs sur le point que l'on est en train de survoler avec notre curseur.Et on a bien également notre label USD ici qui est affiché.
00:18:45 :Donc ça fonctionne, on a notre graphique, on n'en a qu'un pour l'instant, on va juste vérifier le responsive.Si je fais un clic droit et que je clique sur inspect ici, on va vérifier donc sur mobile vous voyez que ça prend presque toute la largeur de l'écran.
00:18:57 :Et si je reviens sur un laptop, on a une petite marge un peu plus grande ici puisque notre écran sera par définition déjà assez grand.
00:19:04 :Donc ça fonctionne, c'est parfait, on a bien notre graphique ici qui s'affiche à l'intérieur donc de notre balise canvas ici.On a bien nos données qui sont insérées grâce au javascript donc avec notre chart que l'on récupère ici grâce à document.getElementById.
00:19:21 :Et ensuite notre graphique que l'on instancie ici avec les différentes options.Donc si vous voulez vous amuser un peu, je vous conseille d'aller dans la documentation ici, de vérifier par exemple les sources de cet exemple si vous voulez voir comment c'est fait.
00:19:33 :Ou même de vous rentrer directement dans la documentation.Si on va voir dans les line charts, vous allez voir qu'on a pas mal de propriétés qu'on peut changer.
00:19:40 :Donc nous on avait par exemple BorderColor que l'on a changé, vous voyez d'ailleurs ici ce qu'il attend.Donc par défaut il a une valeur de RGBA donc on peut même mettre de la transparence.
00:19:48 :Et on a pas mal de choses qu'on peut changer ici, la largeur du trait, est-ce qu'on veut avoir des pointillés ou pas, le style, les lignes, les couleurs, line tension aussi qui est pas mal.
00:19:59 :Est-ce qu'on veut avoir une courbe qui soit un peu lisse ou pas.Donc plein de choses ici qu'on peut spécifier donc je vous conseille d'aller lire un petit peu la documentation si ça vous intéresse.
00:20:09 :Il y a pas mal de choses qu'on peut faire qui sont très intéressantes.Et même si j'actualise, vous avez remarqué qu'on a l'animation qui est gérée automatiquement.
00:20:16 :On peut bien sûr la désactiver, on peut même changer la façon dont elle apparaît, on peut faire du bounce, on peut avoir un truc plus ou moins élastique.
00:20:23 :C'est assez impressionnant.Donc voilà pour cette partie assez longue sur la création de notre premier graphe.Donc ça clôt cette section dans laquelle on a donc inséré notre graphe à l'intérieur de notre page HTML.
00:20:35 :Et dans la prochaine section, on va cette fois-ci récupérer les données de notre API pour les envoyer à notre graphe.Et ne plus avoir des valeurs qui sont dans le dur donc qui sont écrites par nous.

Notre premier graph

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Loudo

Problème: template html - création du premier graph - le graph ne s’affiche pas

Rechercher sur le site