Le meilleur visuel personnalisé dont vous navez jamais entendu parler

Si vous avez recherché des visuels personnalisés pour LuckyTemplates, je vais vous en montrer un impressionnant que je suppose que 99 % d'entre vous n'ont jamais vu ou entendu parler auparavant. Vous pouvez regarder la vidéo complète de ce tutoriel au bas de ce blog.

Je suis tombé sur cela dans le , qui traitait des achats, des stocks et des ventes. Nous disposions d'un ensemble de données principalement axé sur les bons de commande, les créances et les factures.

Pour ce défi, nous devions représenter le temps entre ces événements et les visualiser de manière utile. L'une des choses qui m'a sauté aux yeux au départ à propos de ce défi était que ce serait formidable si nous pouvions montrer les différents événements sur une chronologie horizontale mise à l'échelle par date. Je savais qu'il n'y avait aucun moyen de le faire dans les visuels de base de LuckyTemplates.

Je suis donc allé sur le marché AppSource et j'ai recherché des visuels personnalisés capables de faire une chronologie horizontale. J'ai trouvé quelque chose appelé Query On Timeline .

Il a quelque chose que je cherchais - une barre avec des dates et des graphiques et la possibilité d'inclure des informations supplémentaires sous la ligne comme les dates de bon de commande, les dates de connaissement et les dates de facture.

Il existe d'autres façons d'utiliser cela, comme ce style Kanban.

Vous pouvez également utiliser la version réduite sans les visuels.

Ou choisissez le style cascade.

Vous pouvez même opter pour le style image en ligne.

Il existe de nombreuses façons de procéder. Comme j'ai commencé à enquêter là-dessus, j'ai découvert qu'il n'y avait aucune documentation à ce sujet. Il n'y avait étonnamment rien à ce sujet dans la communauté Microsoft, où vous pouvez presque toujours trouver quelque chose qui répondra à votre question.

J'ai dû explorer celui-ci principalement par moi-même. Dans ce blog, je veux vous montrer ce que j'en ai fait et vous expliquer comment l'utiliser au cas où vous souhaiteriez l'appliquer à vos propres rapports.

C'était ma participation au défi n ° 7 en utilisant le visuel Query on Timeline.

Le visuel en bas à gauche a cette clé : l' orange correspondait aux dates des bons de commande, le bleu moyen aux créances et le bleu foncé aux dates des factures.

Chacun des bons de commande comporte plusieurs articles avec des dates de livraison et des dates de facturation différentes. Tout est entièrement dynamique donc si vous sélectionnez sur un autre bon de commande, vous pouvez voir que le visuel change et vous pouvez le filtrer par matière.

Vous pouvez également vous déplacer hors du focus pour voir la plage complète de dates associées aux différentes créances et factures.

Si vous cliquez sur l'une de ces icônes, cela vous mènera à leur page. Par exemple, si vous cliquez sur la facture…

… cela vous amènera à un modèle de facture factice.

Et de même, si vous accédez au bon de commande, cela vous amènera à un modèle de bon de commande. La même chose se produit pour les livraisons et les connaissements.

Table des matières

• Étapes clés pour obtenir l'un des meilleurs visuels personnalisés pour LuckyTemplates
• Préparer vos visuels
• Préparation de votre modèle de données
• Formatage des visuels personnalisés pour LuckyTemplates
• Conclusion

Étapes clés pour obtenir l'un des meilleurs visuels personnalisés pour LuckyTemplates

Il s'agit d'un visuel sophistiqué et il y a plusieurs étapes clés pour que cela fonctionne sur vos propres rapports. La première consiste à préparer vos visuels .

La deuxième étape consiste à télécharger les visuels sur un site d'hébergement public où vous pouvez facilement saisir les URL pour les manipuler dans LuckyTemplates.

Vous devez également configurer votre URL supplémentaire , qui dans ce cas, sont les modèles fictifs que nous avons liés aux icônes.

Ensuite, vous devez configurer votre modèle de données de manière cohérente avec les exigences de la requête sur la chronologie .

Contrairement à d'autres visuels qui sont flexibles lorsqu'ils traitent avec une variété de modèles de données, celui-ci nécessite des limitations strictes sur la façon dont vous structurez votre modèle.

Vous devez en tenir compte à l'avance, puis configurer le visuel lui-même. Il a beaucoup de configurabilité, certaines d'entre elles n'étant pas intuitives.

Préparer vos visuels

Commençons par l'étape 1. J'utilise un site appelé Flat Icon pour mes visuels.

Il y a beaucoup de bons sites d'icônes ; il se trouve que c'est celui que j'utilise. Ce que j'ai fait, c'est sélectionner trois icônes, une pour les achats, les livrables et les factures.

J'ai modifié ces icônes en utilisant mon thème de couleur. Si vous êtes curieux de savoir comment les faire correspondre à votre thème de couleur, regardez ma vidéo sur la manipulation facile du code hexadécimal pour LuckyTemplates .

Une fois que vous avez configuré vos photos, images ou icônes, téléchargez-les et chargez-les sur un site d'hébergement d'images. Encore une fois, il y en a beaucoup de bons. Celui que j'utilise s'appelle ImgBB , qui est un site gratuit et facile à utiliser.

Les icônes que j'ai utilisées dans mon entrée pour la requête sur la chronologie sont les icônes de couleur orange, bleu moyen et bleu foncé.

La clé ici est de sélectionner les icônes dont vous avez besoin et de sélectionner Obtenir les codes d'intégration .

Cela vous permettra de voir les liens de la visionneuse .

Cliquez sur le bouton déroulant et accédez à Liens directs.

Copiez ensuite ces liens dans un bloc-notes. La clé ici est d'obtenir les URL de ces images hébergées publiquement.

Ceci est similaire à ce que vous ferez pour vos URL supplémentaires. Dans ce cas, le site dont je me suis procuré s'appelle Template Labs .

J'ai copié les URL des modèles de bon de commande, de connaissement et de facture dans un bloc-notes. Nous allons les gérer de la même manière que nous allons gérer les URL des icônes.

Préparation de votre modèle de données

La prochaine chose à faire est de préparer notre modèle de données. Je vais vous montrer comment la plupart des participants au défi ont géré leurs modèles de données. Ceci est la soumission de Mudassir Ali, et il a préparé une merveilleuse entrée pour ce défi. Je vous encourage vraiment à y jeter un œil.

Il y a beaucoup de visuels et d'info-bulles vraiment intéressants intégrés ici, ainsi que des techniques intéressantes. Pour y parvenir, il a construit un modèle de données avec trois tables de faits, ce qui est une très bonne approche dans ce défi.

C'était un bon moyen de faire les calculs et d'arriver aux résultats analytiques nécessaires. Mais ce modèle ne prendra pas en charge l'approche chronologique.

Ma soumission était essentiellement un travail de requête puissant pour obtenir ces trois tables de faits dans une table de transactions de bout en bout.

Dans le forum, nous écrivons abondamment sur la façon dont nous avons créé nos entrées. Vous pouvez lire pour voir comment j'ai mis en place le tableau des transactions de bout en bout en détail.

Si nous examinons le tableau des transactions, nous avons un certain nombre de dates : date du bon de commande, date de la facture, date des créances et autres dates calculées.

Ce qui est nécessaire pour la requête sur la chronologie est une seule colonne de date. Ainsi, après avoir assemblé cette table de transaction unique, je l'ai non pivotée, puis liée la version non pivotée dans mon modèle de données. Notez que le titre dit pivot, mais ce n'est en fait pas pivoté.

Si nous examinons à nouveau le tableau des transactions, nous verrons la colonne Catégorie de date et la colonne Date unique .

La colonne Catégorie de date a été essentiellement réduite en trois catégories principales : commandé , reçu et facturé . Mais il y a aussi des maximums et des minimums locaux et globaux là-dedans.

Nous avons également l' URL du bon de commande (URL PO).

Si nous revenons sur la table des transactions, nous verrons les colonnes calculées pour ces URL qui sont des instructions qui examinent la catégorie de données et attribuent l'URL du site d'hébergement d'images à l'icône appropriée.

Nous faisons la même instruction SWITCH similaire pour attribuer le modèle qui est également basé sur le champ Catégorie de date.

C'est ainsi que j'ai attribué l'icône et le modèle appropriés pour chacun des enregistrements.

Si nous revenons au tableau non croisé dynamique, nous verrons la seule colonne de date , la catégorie de date et les deux champs d'URL pour les bons de commande et les modèles.

C'est tout ce dont nous avons besoin pour configurer correctement la chronologie.

Si nous entrons dans notre visuel et les champs principaux ici, le titre est la catégorie de date non pivotée que je vous ai montrée.

La date/heure peut être l'une des deux choses suivantes : la date de la table de faits dans la version non pivotée ou la date validée dans la table Date. L'un ou l'autre travaille ici.

L' URL facultative est l'URL du modèle qui est liée au clic sur l'icône.

L' image facultative est le champ URL du bon de commande.

Maintenant, si nous examinons ce champ d'URL de bon de commande, nous devons définir la catégorie de données dans l'URL de l'image, car elle sera automatiquement définie par défaut sur du texte. Si vous le conservez sous forme de texte, les images ne s'afficheront pas correctement.

Si vous le définissez dans le champ URL, les images seront correctement transmises par le site d'hébergement d'images.

Ces étapes expliquent essentiellement comment vous pouvez configurer correctement les champs fondamentaux sur le visuel.

Formatage des visuels personnalisés pour LuckyTemplates

Maintenant, je veux juste vous expliquer certaines des mises en forme que j'ai faites pour le rapport. Le premier qui est pertinent est Stagger Text , qui crée un effet de cascade.

Si nous désactivons Stagger Text, nous obtenons tout sur la même ligne. Mais lorsque vous avez plusieurs champs relativement proches les uns des autres, ils se chevauchent et deviennent illisibles. C'est pourquoi nous avons décalé le texte sur le calcul automatique.

La fonction Texte en haut vous permet de déplacer le texte en cascade du bas au-dessus de la ligne.

Les titres en gras vous permettent de surligner le titre en gras. Il existe également un formatage de date que vous pouvez effectuer sur l'axe X. Vous pouvez afficher ou non les dates sur l'axe.

Les commutateurs de date d'échelle manuelle sont également importants car si vous les activez, le point de début et le point de fin restent constants.

Cela doit être activé car nous avons une période de temps fixe pour les données. Nous voulons montrer par rapport à ce point fixe dans le temps où ces différents événements se produisent.

Si nous désactivons cette option, le dernier point de données de chaque bon de commande devient le point final de cette ligne. Comme vous pouvez le voir, le point final est mars.

Dans ce cas, nous souhaitons activer la mise à l'échelle manuelle et la démarrer le 1er janvier, qui correspond au début de l'ensemble de données, et la terminer le 30 juin, qui correspond à la fin de l'ensemble de données.

Les pixels d'échelle manuelle définissent la largeur de la ligne. La seule raison pour laquelle nous l'avons activé était de créer un espace afin qu'il ne s'exécute pas et de créer une barre de défilement en bas.

Les propriétés d'élément unique sont utiles si vous n'avez qu'un seul événement par catégorie.

Étant donné qu'il n'a pas de formatage conditionnel personnalisé complet , vous pouvez définir la police, la couleur et les propriétés de chaque catégorie avec cette fonctionnalité. Il ne vous permet de faire que le premier, tandis que les autres sont dans la couleur par défaut. Espérons que, dans une version ultérieure, ils auront la mise en forme conditionnelle complète.

Les paramètres d'image vous permettent de redimensionner la taille de vos images et de maintenir l'espacement approprié.

Le style vous permet de choisir parmi plusieurs styles : style de barre, style de ligne, style cascade et style Kanban.

Nous allons avec le style Bar, mais pour d'autres applications, vous voudrez peut-être expérimenter et jouer avec cette fonctionnalité.

Ce visuel personnalisé a également une capacité dynamique à afficher la date du jour, mais ce n'est pas pertinent dans ce cas car il ne s'étend pas à la longueur de nos données.

Il a également la possibilité de télécharger les dates sous forme de fichier de calendrier à partir de Google Calendar ou Outlook.

Conclusion

Voici un exemple de configuration de visuels personnalisés pour LuckyTemplates. Il y a beaucoup d'expérimentations nécessaires pour que cela ait l'air exact, mais je pense que cela fournit un moyen précieux d'afficher les données.

J'espère que vous avez trouvé ce didacticiel utile et que vous avez trouvé quelque chose que vous voudrez peut-être expérimenter et jouer avec.

Veuillez vous abonner à LuckyTemplates TV si vous ne l'avez pas encore fait. Nous avons beaucoup de nouveau contenu vidéo qui sortira bientôt.