Tutoriel Swift : l’API Charts

Swift Charts Tutoriel

Je reprend la petite application utilisée pour le tutoriel sur HealhtKit afin de vous donner un aperçu des innombrables possibilités de l’API Charts.

L’API Charts à été développée par Daniel Gindi et peut être téléchargée sur Github. L’idée est de faciliter la vie des développeurs iOS / Swift pour la création de graphiques. Grâce à Charts, vous pouvez facilement créer des diagrammes, des courbes, des graphiques en barres, et plein d’autres types de graphiques pour représenter de manière visuelle des données.

C’est un peu un Excel pour développeurs. Par contre, tout comme celui-ci, l’utilisation nécessite un certain apprentissage, mais vous verrez, cela en vaut la peine !

Voici à quoi nous allons arriver :

HeartStatisticsWithChars.jpeg

Prêts ? C’est parti…

Ajouter Charts à notre projet

Tout d’abord, il faut ajouter Charts à notre projet. Vous savez que j’aime bien Cocoapods… donc on va l’utiliser. Voici le fichier pod de l’appli :

PodForCharts

Ensuite, le classique « pod install », et l’on ouvre le fichier « .workspace » avec Xcode. Si ce dernier râle un peu, n’hésitez pas à faire plusieurs « cleans » et « builds ».

Il faut ensuite rajouter Charts dans les Imports, ainsi que « ChartViewDelegate » dans l’en-tête de la classe :

ChartsImports

Voilà, tout est prêt, reste à ajouter le graphique…

Pour ajouter un graphique, il faut ajouter une « view » dans votre vue principale, et l’attribuer à une custom class « LineChartView » (pour un graphique en ligne) :

LicneChartView

Créer l’outlet correspondant :

OutletChartView

Et son delegate :

ChartsDelegate

…et ses données !

Pour les données du graphique, je crée 2 tableaux …

ChartsArrays

… que je remplis avec les données récupérées depuis HealhtKit (pour cette démo, j’ai diminué l’intervalle de dates), c’est le rôle de la fonction « chartsDatas() » :

ChartsDatas

Tous les paramètres concernant le codé « design » du graphique sont gérés par la fonction « plotDatas() » :

PlotDatas.png

Pour plus d’infos sur les nombreuses possibilités dans le domaine de la customisation des graphiques Charts, je vous conseille fortement la documentation et de jeter un oeil à la démo sur Github : https://github.com/danielgindi/Charts/tree/master/ChartsDemo-iOS

Voilà, reste à exécuter nos fonctions « chartDatas() » et « plotDatas() » dans « viewWillAppear(_ animated: Bool) » :

ChartsViewWillApear

Et vous devriez voir votre joli graphique !

Comme d’habitude, le projet terminé est téléchargeable sur GitLab : https://gitlab.com/vinceBar/ChartsTutorial

et je suis à l’écoute de tous vos commentaires !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s