Si vous êtes prêt à créer et envoyer des graphiques personnalisés de qualité, vous êtes prêt à commencer avec Image Charts.
Image Charts est un service de génération de graphiques toujours disponible et toujours à jour, qui se charge du travail difficile de création et de mise à jour de superbes graphiques intégrés grâce à une API personnalisée. Configurez-le une seule fois, et commencez à raconter l'histoire de vos données avec des graphiques personnalisés mis à jour automatiquement. Ne perdez plus jamais de temps sur des graphiques ternes.
Regardez cette vidéo pour un tutoriel complet ou faites défiler vers le bas pour voir les instructions sous forme écrite. Bons graphiques !
Comment choisir un endpoint de graphique
Il existe 2 endpoints différents avec Image Charts : /Chart et /Chart 2.8.0.
Bien que les étapes pour utiliser chacun soient très similaires, l'un est plus adapté aux développeurs tandis que l'autre est plus accessible à tous.
Le point de terminaison /Chart 2.8.0 s'adresse aux développeurs familiers avec chart-js. Si le code n'est pas votre fort, le point de terminaison /Chart vous permet d'atteindre ce même niveau de personnalisation. Les deux vous donnent accès à de superbes graphiques intégrés et à mise à jour automatique.
Comment utiliser l'endpoint /Chart 2.8.0
Le point de terminaison API /Chart 2.8.0 est simple, mais nécessite une connaissance de la bibliothèque chart-js.
Commencez simplement par ouvrir le menu déroulant, puis sélectionnez /Chart 2.8.0.
À partir de là, vous pourrez utiliser la bibliothèque chart-js pour créer votre graphique.
Comment utiliser l'endpoint /Chart
Le point de terminaison /Chart s'adresse à celles et ceux qui sont moins familiers avec le code, ou qui souhaitent simplement créer leurs graphiques rapidement et facilement.
Texte alternatif - sélection du point de terminaison du graphique
Une fois votre endpoint choisi, suivez ces étapes pour créer votre graphique
Créer votre graphique intégré personnalisé
Suivez ces étapes pour créer votre graphique intégré personnalisé.
Sélectionner un graphique
Commencez par vérifier que /Chart est sélectionné dans le menu déroulant. Regardez ensuite en haut de votre écran et sélectionnez Gallery. Vous y sélectionnerez un graphique et des données préremplies que vous pourrez modifier ultérieurement.
Texte alternatif - sélection du type de graphique
Modifier dans les paramètres du formulaire
Une fois votre type de graphique sélectionné, retournez dans l'onglet Paramètres du formulaire, tout à gauche en haut de l'écran. Vous y trouverez les blocs correspondant au graphique choisi, déjà remplis avec des données de test. (Pour rappel, si vous souhaitez changer de type de graphique, retournez simplement dans la galerie.)
Modifiez simplement les données dans les blocs situés à gauche, et le graphique se mettra automatiquement à jour. Vous pouvez également y modifier le nom de votre jeu de données.
À partir de là, vous pouvez faire défiler jusqu’à votre deuxième jeu de données et modifier les libellés. Plus bas, vous pourrez modifier la taille du graphique en pixels. En dessous, vous pourrez changer de type de graphique sans perdre vos données.
Juste en dessous, vous pourrez renommer l'axe X.
Paramètres Enterprise (fonctionnalité payante)
Pour les offres payantes, consultez l'onglet Paramètres Enterprise en haut de page. C'est ici que vous activerez le mode Enterprise.
Une fois activée, cette option vous permettra de modifier la famille de police et sa syntaxe, ainsi que d'activer les images haute résolution.
Texte alternatif - activation des paramètres Enterprise
Paramètres d'URL
Pour consulter les paramètres d'URL du graphique que vous avez créé, cliquez simplement sur l'onglet du même nom en haut de l'écran.
Environnements (fonctionnalité payante)
Si vous utilisez l'offre On-Premise d'Image Charts, vous pourrez utiliser l'onglet Environnements pour contrôler le début de l'URL de votre graphique.
Il vous suffit de cliquer sur Ajouter un nouvel environnement, de modifier, puis d’enregistrer. La valeur par défaut est « Production ».
Texte alternatif - ajout d'un environnement
Récupérez l’URL pour les e-mails et les documents
Sur le côté droit de votre fenêtre, sélectionnez maintenant Sortie URL. Vous pourrez alors copier l'URL fournie pour ajouter votre graphique à un e-mail ou un document.
Récupérez le code HTML à intégrer sur des sites web.
Si vous souhaitez intégrer votre graphique sur votre site web, sélectionnez la sortie HTML. Utilisez simplement le code d'intégration du haut pour afficher votre nouveau graphique sur votre site.
Pour ceux qui intègrent en markdown, sélectionnez le second code.
Comment créer automatiquement des graphiques dans un e-mail avec Zapier
Pour ceux qui ont Abonnements Enterprise, Image Charts fournit Zapier et Make Intégration.
Nous allons voir ici comment configurer un déclencheur et une action pour créer automatiquement des graphiques dans un e-mail avec Zapier.
Texte alternatif - Image-chart dans votre boîte de réception
Récupérez les données de vos graphiques depuis n'importe où
Commencez par sélectionner la provenance des données de votre graphique. Pour cet exemple, nous utilisons Typeform.
Sous « Événement de l'application », choisissez votre source. Cela utilisera les données du formulaire comme entrée du graphique.
Étape de déclenchement : choisissez l'application et l'événement
À chaque soumission de ce formulaire, un graphique est automatiquement créé avec Image Charts.
Sélectionnez votre événement, puis cliquez sur Continuer.
Choisir un compte
Connectez votre compte Typeform (ou tout autre outil de votre choix) à Zapier en cliquant sur le nom du formulaire que vous souhaitez utiliser.
Cliquez sur Continuer.
Texte alternatif - configuration du déclencheur Typeform
Configurer le déclencheur
Là encore, cliquez sur le nom du formulaire que vous souhaitez utiliser et continuez.
Texte alternatif - sélection du nom du formulaire
Tester le déclencheur
Ici, nous pouvons examiner les réponses. Cliquez de nouveau sur continuer.
À partir de là, la configuration de Typeform est terminée, et nous allons maintenant configurer Image Charts.
Texte alternatif - test du déclencheur de formulaire
Étape d'action : choisissez l'application et l'événement
Ici, nous allons sélectionner Image Charts comme étape suivante de l'automatisation.
Nous sélectionnerons ensuite Créez un graphique Chart.js dans le menu déroulant.
Cliquez sur Continuer.
Texte alternatif - création d'un type de graphique Chart.js
Choisir un compte
Choisissez votre compte Image Charts. Vous y saisirez vos informations de connexion Image Charts.
Configurer l'action
Ici, nous allons copier tout le code de la configuration chart.js à l'exception du bloc de données. Ensuite, dans version, sélectionnez Chart.js version 2.8.8.
les variables version, largeur du graphique, hauteur du graphique et couleur d'arrière-plan du graphique sont prédéfinies dans Image Charts. Saisissez maintenant les mêmes valeurs dans les champs respectifs.
Cliquez sur Continuer.
Tester l'automatisation
Vous verrez maintenant l'URL de votre graphique qui servira à l'intégrer dans vos e-mails automatisés.
Il est maintenant temps de tester l'automatisation. Sélectionnez Retester & Vérifier.
Si l'opération réussit, cliquez sur Continuer.
Envoyer l'e-mail sortant avec Zapier
Ajouter Email by Zapier est le moyen le plus simple d'envoyer un e-mail avec un graphique intégré. Vous pouvez aussi utiliser MailChimp, Gmail ou tout autre service de messagerie.
Choisissez l’e-mail par Zapier dès maintenant.
Envoyez un déclencheur d'e-mail sortant depuis le menu déroulant des événements.
Cliquez sur Continuer.
Saisissez ici l’objet et le corps de votre e-mail dans le balisage. Ajoutez le champ URL obtenu précédemment dans le corps du message. C’est ce qui intégrera le graphique dans votre e-mail. Sélectionnez simplement l’URL dans le menu déroulant sous le corps de votre e-mail.
Ajoutez votre signature et cliquez sur continuer.
Tester l'automatisation
Sélectionnez à nouveau « retester & vérifier ».
Si tout fonctionne, vous pouvez maintenant exécuter l'automatisation et recevoir votre tout nouvel e-mail automatisé avec le graphique intégré !
Voici un exemple de ce à quoi ressemblera l'e-mail dans votre boîte de réception :
Un dernier mot
Voilà comment démarrer avec Image Charts. Lancez-vous, et essayez-le gratuitement dès aujourd'hui.
