Grafici a linee

Il grafico a linee è la scelta obbligata quando si vuole rappresentare l'andamento di un determinato oggetto nel tempo. Il campo dove questa tipologia incontra un maggior utilizzo è quello finanziario. Si pensi ai grafici che rappresentano l'andamento di azioni, fondi, ecc. ecc in un arco temporale.

Questo tipo di grafico è più semplice da generare si devono semplicemente calcolare dei punti sull'area di lavoro e poi unirli disegnando una retta, esattamente come con la Settimana Enigmistica. Per rendere il grafico più leggibile, anche in questo caso, la soluzione migliore è quella di creare una griglia di sfondo esattamente come con gli istogrammi. Come esempio, ho utilizzato la media della richieste giornaliere ad un ipotetico sito suddivise per anno.

Come al solito procediamo passo passo.

Innanzitutto si scorre il datareader e vengono calcolate le coordinate dei punti da visualizzare. Questi vengono memorizzati in una collection per essere disegnati successivamente nell'ordine giusto.

Nella seconda fase bisogna costruire la solita griglia con lo stesso procedimento adottato per gli istogrammi.

Come ultimo step vengono disegnati i punti precedentemente memorizzati. Per ogni punto viene disegnato e riempito un cerchio per dare un maggior risalto, e, in basso, viene scritto l'anno di riferimento. Per creare il cerchio vengono utilizzati 2 metodi: il primo è DrawEllipse che tra i diversi overload ne ha uno che accetta in input l'oggetto Pen con cui disegnare la circonferenza, le coordinate x e y del punto in alto a destra, l'altezza e la larghezza del rettangolo (in questo caso stiamo disegnando una circonferenza quindi è più corretto parlare di quadrato) che contiene il cerchio; il secondo metodo è FillEllipse e accetta in input un oggetto Brush (più precisamente un oggetto del tipo di una classe che eredita da Brush visto che è astratta) con cui riempire l'area del quadrato che viene determinata nella stessa modalità in cui viene calcolata per il metodo precedente. Per scrivere l'anno viene utilizzato sempre il metodo DrawString .

Aggiungere una legenda

Ogni grafico che si rispetti contiene una legenda così da dare una rappresentazione sia visiva che numerica di ciò che si sta visualizzando. Infatti, nonostante una griglia riesca a dare una buona idea sui valori, non darà mai il risultato reale.

Il metodo più intuitivo consiste nel creare dei rettangoli dello stesso colore delle aree disegnate nel grafico (nel caso di grafici a linee non ci sono punti con colori diversi quindi bisogna usare un altro metodo).

In questo caso, prendiamo in considerazione la tabella usata per il grafico a torta per disegnare una legenda.

Viene eseguita la query estraendo i record interessati e per ognuno viene disegnato un piccolo quadrato e riempito con il colore associato. Di seguito, viene aggiunta una stringa con la descrizione ed il valore legati a quel colore.

Conclusioni

Il .NET Framework ci mette a disposizione diverse API tramite GDI+ che permettono di creare qualunque effetto. Bisogna lavorare un pò per sfruttare questi metodi e creare qualcosa che meglio si adatta alle nostre esigenze, ma, una volta superato l'impatto iniziale, si vedrà che la tecnologia non è assolutamente più complessa di altre presenti nel framework.

Con questa piccola libreria, poi, aggiungere grafici alle vostre applicazioni diventa davvero un gioco da ragazzi!

Approfondimenti

• Creare immagini e grafici con ASP.NET

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

• Pagina 1
  • La base di lavoro
  • Grafici a torta
• Pagina 2
  • Grafici a barre
• Pagina 3
  • Grafici a linee
  • Aggiungere una legenda
  • Conclusioni
  • Approfondimenti