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 :

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 :

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 :

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) :

Créer l’outlet correspondant :

Et son delegate :

…et ses données !

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

… 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() » :

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

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) » :

Et vous devriez voir votre joli graphique !

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

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