ASP.Net  »  Articoli  »  ASP.NET 4 

Associare i dati ad un grafico

Le Chart Area, le serie e i DataPoint possono essere specificati in maniera dichiarativa (attraverso l'uso del markup o attraverso la finestra delle proprietà) o per mezzo del codice.

Dati inseriti nel markup

Tipicamente le serie e le Chart Area sono specificate dichiarativamente mentre i Data Point sono popolati dinamicamente, grazie all'interrogazione di una base dati o ad altre fonti di dati. Cominciamo con il mostrare un grafico i cui dati sono tutti specificati dichiarativamente nel markup:

<asp:Chart ID="CategorieChart" runat="server">
 <Titles>
    <asp:Title Text="Articoli del Weblog raggruppati per Categoria">
 </asp:Title>
 </Titles>
 <series>
    <asp:Series Legend="Legend1" Name="CategorieSerie" YValueType="Int32" ChartType="Pie" IsValueShownAsLabel="True" ChartArea="AreaCategorie">
    <Points>
       <asp:DataPoint AxisLabel="Informatica" YValues="5" /> 
       <asp:DataPoint AxisLabel="Filosofia" YValues="1" /> 
       <asp:DataPoint AxisLabel="Poesia" YValues="4" /> 
     </Points>
   </asp:Series>
 </series>
 <chartareas>
   <asp:ChartArea Name="AreaCategorie">
       <Area3DStyle LightStyle="Realistic" Enable3D="true" />
    </asp:ChartArea>
 </chartareas>
 <Legends>
     <asp:Legend Name="Legend1" Title="Categorie">
     </asp:Legend>
 </Legends>
</asp:Chart>

Nella sezione Series è definita una sola serie che si chiama CategorieSerie. Questa serie verrà rappresentata in un grafico a torta visualizzato all'interno della Chart Area chiamata AreaCategorie. In questa Chart Area abbiamo indicato che il grafico deve essere tridimensionale impostando il tag Area3DStyle.

La serie Categorie è costituita da una collezione di Points. Ci sono 3 DataPoint che visualizzano sull'asse X del grafico il nome della categoria (proprietà AxisLabel) ed il numero di articoli appartenenti alla categoria sull'asse Y (proprietà YValues). Il grafico che si ottiene è quello che abbiamo visto in figura 1.

Dati inseriti da codice

Vediamo ora come specificare i Data Point da codice. Nel markup precedente eliminiamo la sezione Points perché inseriremo i valori nel sorgente:

protected void Page_Load(object sender, EventArgs e)
{
 if (!IsPostBack)
 {
   System.Web.UI.DataVisualization.Charting.Series SerieCategorie = CategorieChart.Series["CategorieSerie"];
   SerieCategorie.Points.AddXY("Informatica", 5);
   SerieCategorie.Points.AddXY("Filosofia", 1);
   SerieCategorie.Points.AddXY("Poesia", 4); 
 }
}

Abbiamo definito una variabile SerieCategorie e la abbiamo associata alla serie CategorieSerie del nostro Chart. Abbiamo aggiunto i tre Data Point al Chart grazie al il metodo 'AddXY', esposto dalla collezione Points della serie.

In questo esempio abbiamo aggiunto a mano i 3 Data Point mentre è più plausibile che questi dati siano prelevati da una base dati o da una altra fonte.

Altri articoli

Altre guide

Altre newsletter