La migliore grafica personalizzata di cui non hai mai sentito parlare

Se stai cercando elementi visivi personalizzati per LuckyTemplates, te ne mostrerò uno fantastico che immagino che il 99% di voi non abbia mai visto o sentito prima. Puoi guardare il video completo di questo tutorial in fondo a questo blog.

Mi sono imbattuto in questo nel , che si occupava di acquisti, inventario e vendite. Avevamo un set di dati incentrato principalmente su ordini di acquisto, crediti e fatture.

Per questa sfida, avevamo bisogno di rappresentare il tempo tra quegli eventi e visualizzarli in modo utile. Una delle cose che mi ha colpito inizialmente di questa sfida è stata che sarebbe fantastico se potessimo mostrare i diversi eventi su una sequenza temporale orizzontale ridimensionata per data. Sapevo che non c'era un modo per farlo negli elementi visivi di base all'interno di LuckyTemplates.

Quindi sono andato al marketplace di AppSource e ho cercato elementi visivi personalizzati in grado di eseguire timeline orizzontali. Ho trovato qualcosa chiamato Query On Timeline .

Ha qualcosa che stavo cercando: una barra con date e grafici e la possibilità di includere alcune informazioni aggiuntive sotto la riga come le date dell'ordine di acquisto, le date della polizza di carico e le date della fattura.

Ci sono altri modi in cui puoi usarlo, come questo stile Kanban.

Puoi anche utilizzare la versione ridotta senza le immagini.

Oppure scegli lo stile a cascata.

Puoi persino optare per lo stile picture-in-line.

Ci sono molti modi in cui puoi farlo. Quando ho iniziato a indagare su questo, ho scoperto che non c'era documentazione al riguardo. Sorprendentemente non c'era nulla al riguardo nella comunità Microsoft, dove puoi quasi sempre trovare qualcosa che risponda alla tua domanda.

Ho dovuto esplorare questo principalmente da solo. In questo blog, voglio mostrarti cosa ne ho fatto e illustrarti come usarlo nel caso tu sia interessato ad applicarlo ai tuoi report.

Questa è stata la mia voce per la sfida n. 7 utilizzando l'oggetto visivo Query sulla sequenza temporale.

L'oggetto visivo in basso a sinistra ha questa chiave: l' arancione era per le date dell'ordine di acquisto, il blu medio era i crediti e il blu scuro era le date della fattura.

Ciascuno degli ordini d'acquisto ha più materiali con date di consegna diverse e date di fattura diverse. Tutto è completamente dinamico, quindi se selezioni un altro ordine di acquisto, puoi vedere che l'aspetto cambia e puoi filtrarlo per materiale.

Puoi anche spostarti fuori fuoco per vedere l'intera gamma di date associate ai diversi crediti e fatture.

Se fai clic su una di queste icone, ti porterà effettivamente alla loro pagina. Ad esempio, se clicchi sulla fattura...

… ti porterà a un modello di fattura fittizio.

Allo stesso modo, se vai all'ordine di acquisto, ti porterà a un modello di ordine di acquisto. La stessa cosa accade per le consegne e le polizze di carico.

Sommario

• Passaggi chiave per ottenere uno dei migliori elementi visivi personalizzati per LuckyTemplates
• Preparare le tue immagini
• Preparazione del modello di dati
• Formattazione degli oggetti visivi personalizzati per LuckyTemplates
• Conclusione

Passaggi chiave per ottenere uno dei migliori elementi visivi personalizzati per LuckyTemplates

Questo è un oggetto visivo sofisticato e ci sono diversi passaggi chiave per farlo funzionare sui tuoi report. Il primo è preparare le tue immagini .

Il secondo passaggio consiste nel caricare gli elementi visivi in ​​un sito di hosting pubblico in cui è possibile acquisire facilmente gli URL per la manipolazione in LuckyTemplates.

Devi anche impostare il tuo URL supplementare , che in questo caso sono i modelli fittizi che abbiamo collegato alle icone.

Quindi è necessario impostare il modello di dati in modo coerente con i requisiti di Query sulla sequenza temporale .

A differenza di altri oggetti visivi che sono flessibili quando si tratta di una varietà di modelli di dati, questo richiede alcune rigide limitazioni su come strutturi il tuo modello.

Devi tenerne conto in anticipo e quindi configurare l'immagine stessa. Ha molta configurabilità, alcune delle quali non sono intuitive.

Preparare le tue immagini

Iniziamo con il passaggio 1. Uso un sito chiamato Flat Icon per i miei elementi visivi.

Ci sono molti buoni siti di icone; questo sembra essere quello che uso. Quello che ho fatto è stato selezionare tre icone, una per acquisti, consegne e fatture.

Ho modificato queste icone usando il mio tema di colore. Se sei curioso di sapere come abbinarli al tuo tema di colore, dai un'occhiata al mio video su una semplice gestione del codice esadecimale per LuckyTemplates .

Dopo aver impostato tutte le foto, le immagini o le icone, scaricale e caricale su un sito di hosting di immagini. Di nuovo, ce ne sono molti buoni. Quello che uso io si chiama ImgBB , che è un sito gratuito facile da usare.

Le icone che ho usato nella mia voce per Query On Timeline sono le icone di colore arancione, blu medio e blu scuro.

La chiave qui è selezionare le icone necessarie e selezionare Ottieni codici di incorporamento .

Questo ti permetterà di vedere i link del visualizzatore .

Fai clic sul pulsante a discesa e vai a Collegamenti diretti.

Quindi copia questi collegamenti in un blocco note. La chiave qui è ottenere gli URL di queste immagini ospitate pubblicamente.

Questo è simile a quello che farai per i tuoi URL supplementari. In questo caso, il sito da cui sono partito si chiama Template Labs .

Ho copiato gli URL dell'ordine di acquisto, della polizza di carico e dei modelli di fattura in un blocco note. Li gestiremo nello stesso modo in cui gestiremo gli URL delle icone.

Preparazione del modello di dati

La prossima cosa da fare è preparare il nostro modello di dati. Ti mostrerò come la maggior parte delle persone nella sfida ha gestito i propri modelli di dati. Questa è la sottomissione di Mudassir Ali, e ha messo insieme una meravigliosa voce per questa sfida. Ti incoraggio davvero a dargli un'occhiata.

Ci sono molti elementi visivi e suggerimenti davvero interessanti incorporati qui, oltre ad alcune tecniche interessanti. Per raggiungere questo obiettivo, ha costruito un modello di dati con tre tabelle dei fatti, che è un approccio perfettamente valido in questa sfida.

Questo è stato un buon modo per fare i calcoli e trovare i risultati analitici che erano necessari. Ma questo modello non supporterà l'approccio della sequenza temporale.

La mia presentazione è stata fondamentalmente un sacco di lavoro di query di potenza per ottenere quelle tre tabelle dei fatti in una tabella delle transazioni end-to-end.

Nel forum, possiamo scrivere ampiamente su come siamo arrivati ​​alle nostre voci. Puoi leggere per vedere come ho messo insieme la tabella delle transazioni end-to-end in modo dettagliato.

Se osserviamo la tabella delle transazioni, abbiamo un numero di date: data dell'ordine di acquisto, data della fattura, data dei crediti e altre date calcolate.

Quello che serve per la Query On Timeline è una singola colonna di data. Quindi, dopo aver messo insieme questa singola tabella delle transazioni, l'ho annullata e poi ho collegato la versione non pivotata nel mio modello di dati. Si noti che il titolo dice pivot, ma in realtà non è pivot.

Se diamo un'altra occhiata alla tabella delle transazioni, vedremo la colonna della categoria Data e la singola colonna Data .

La colonna Categoria data è stata fondamentalmente ridotta a tre categorie principali: ordinato , ricevuto e fatturato . Ma ci sono anche massimi e minimi locali e globali.

Abbiamo anche l' URL dell'ordine di acquisto (URL PO).

Se guardiamo indietro alla tabella delle transazioni, vedremo le colonne calcolate per questi URL che sono istruzioni che esaminano la categoria di dati e assegnano l'URL dal sito di hosting di immagini all'icona appropriata.

Facciamo la stessa istruzione SWITCH simile per l'assegnazione del modello che si basa anche sul campo Categoria data.

È così che ho assegnato l'icona e il modello appropriati per ciascuno dei record.

Se torniamo alla tabella unpivot, vedremo la singola colonna data , la categoria data e i due campi URL per gli ordini di acquisto e i modelli.

Questo è tutto ciò di cui abbiamo bisogno per impostare correttamente la sequenza temporale.

Se entriamo nei nostri campi visivi e principali qui, il titolo è la categoria data non ruotata che ti ho mostrato.

La data/ora può essere una delle due cose: la data della tabella dei fatti nella versione non pivottante o la data convalidata nella tabella della data. O uno lavora qui.

L' URL facoltativo è l'URL del modello collegato al clic sull'icona.

L' immagine facoltativa è il campo dell'URL dell'ordine di acquisto.

Ora, se diamo un'occhiata al campo dell'URL dell'ordine di acquisto, dobbiamo impostare la categoria di dati nell'URL dell'immagine, poiché verrà automaticamente impostata su testo. Se lo mantieni come testo, le immagini non verranno visualizzate correttamente.

Se lo imposti sul campo URL, le immagini arriveranno correttamente dal sito di hosting delle immagini.

Questi passaggi sono fondamentalmente il modo in cui è possibile impostare correttamente i campi fondamentali nell'oggetto visivo.

Formattazione degli oggetti visivi personalizzati per LuckyTemplates

Ora, voglio solo guidarti attraverso alcune delle formattazioni che ho fatto per il rapporto. Il primo rilevante è Stagger Text , che crea un effetto a cascata.

Se disattiviamo il testo sfalsato, ciò che otteniamo è tutto sulla stessa riga. Ma quando hai più campi relativamente vicini l'uno all'altro, si sovrappongono e diventano illeggibili. Questo è il motivo per cui abbiamo sfalsato il testo sul calcolo automatico.

La funzione Testo in alto ti consente di spostare il testo a cascata da sotto a sopra la riga.

I titoli in grassetto consentono di evidenziare il titolo in grassetto. C'è anche una formattazione della data che puoi fare sull'asse X. Puoi mostrare o non mostrare le date sull'asse.

Anche le opzioni di scala manuale della data sono importanti perché se lo accendi, il punto iniziale e il punto finale rimangono costanti.

Questo deve essere attivo perché abbiamo un periodo di tempo fisso per i dati. Vogliamo mostrare in relazione a quel punto fisso nel tempo in cui si verificano questi diversi eventi.

Se lo disattiviamo, l'ultimo punto dati in ogni ordine di acquisto diventa il punto finale di quella riga. Come puoi vedere, il punto finale è marzo.

In questo caso, vogliamo attivare il ridimensionamento manuale e avviarlo il 1° gennaio, che è l'inizio del set di dati, e terminarlo il 30 giugno, che è la fine del set di dati.

I pixel della scala manuale impostano la larghezza della linea. L'unico motivo per cui l'abbiamo attivato era creare uno spazio vuoto in modo che non funzionasse e creare una barra di scorrimento in basso.

Le proprietà dell'elemento singolo sono utili se si dispone di un solo evento per categoria.

Poiché questo non ha una formattazione condizionale personalizzata completa , puoi impostare il carattere, il colore e le proprietà di ciascuna categoria con questa funzione. Ti consente solo di fare il primo, mentre il resto è nel colore predefinito. Se tutto va bene, in una versione successiva, avranno la formattazione condizionale completa.

Le impostazioni dell'immagine ti consentono di ridimensionare le dimensioni delle tue immagini e mantenere la spaziatura corretta.

Lo stile ti consente di scegliere tra diversi stili: stile barra, stile linea, stile cascata e stile Kanban.

Stiamo andando con lo stile Bar, ma per altre applicazioni, potresti voler sperimentare e giocare con questa funzione.

Questo oggetto visivo personalizzato ha anche una capacità dinamica di mostrare la data odierna, ma in questo caso non è rilevante perché non si estende alla lunghezza dei nostri dati.

Ha anche la possibilità di scaricare le date come file di calendario da Google Calendar o Outlook.

Conclusione

Questo è un esempio di come si configurano oggetti visivi personalizzati per LuckyTemplates. Sono necessarie molte sperimentazioni per far sì che appaia esattamente nel modo giusto, ma penso che fornisca un modo prezioso per visualizzare i dati.

Spero che tu abbia trovato utile questo tutorial e che tu abbia trovato qualcosa con cui potresti voler sperimentare e giocare.

Abbonati a LuckyTemplates TV se non l'hai ancora fatto. Presto usciranno molti nuovi contenuti video.