ASP.Net  »  Articoli  »  ASP.NET 4 

Utilizzare un database

Il Chart control mette a disposizione una API con metodi che consentono di agganciare insiemi di dati alle serie del grafico con pochissime linee di codice. I metodi 'DataBindTable' e 'DataBindXY' permettono di associare alle serie del grafico, collezioni di dati che implementano l'interfaccia IEnumerable (ad esempio l'SqlDataReader).

Esaminiamo un frammento di codice che si connette ad un database Sql Server, esegue una query che ritorna le categorie di articoli e il numero di articoli per ogni categoria e aggancia il risultato al nostro Chart attraverso il metodo DataBindTable:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    SqlConnection conn = new SqlConnection();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
    SqlCommand MyCommand = new SqlCommand();
    MyCommand.Connection = conn;
    MyCommand.CommandText = "SELECT Categoria, Articoli  FROM Categorie ORDER BY Categoria";
    conn.Open();
    SqlDataReader reader = MyCommand.ExecuteReader();
    CategorieChart.DataBindTable(reader, "Categoria");
    //CategorieChart.Series["CategorieSerie"].Points.DataBindXY(reader, "Categoria", reader, "Articoli");
  }
}

Il metodo 'DataBindTable' vuole come parametri di ingresso una collezione di dati enumerabili, il campo della collezione che alimenta l'asse X del grafico ed il campo della collezione che alimenta l'asse Y. Il metodo DataBindTable aggiunge dinamicamente un nuova serie al Chart quindi non è necessario definirla dichiarativamente nel markup. Se al posto del metodo DataBindTable si usa invece il metodo DataBindXY esposto dalla collection Points (vedi la linea di codice commentata nell'esempio precedente) è necessario definire la serie nel markup.

Per associare dati ad un grafico, possiamo usare anche la proprietà 'DataSource'. Questo implica il prelevare i dati da una sorgente, assegnarli al DataSource e chiamare infine il metodo DataBind del chart. Anche quando si usa il DataSource è necessario definire la serie coinvolta nel markup del Chart.

Ecco il codice:

SqlDataReader reader = MyCommand.ExecuteReader();
CategorieChart.Series["SerieCategorie"].XValueMember = "Categoria";
CategorieChart.Series["SerieCategorie"].YValueMembers = "Articoli"; 
CategorieChart.DataSource = reader;
CategorieChart.DataBind(); 

La collezione di dati myReader è la stessa dell'esempio precedente, è necessario esplicitare il campo della collezione che alimenta l'asse X del grafico ed il campo della collezione che alimenta l'asse Y.

Abbiamo visto come si imposta la proprietà DataSource a runtime ma è anche possibile impostare la proprietà 'DataSourceID' a design-time.

<asp:Chart ID="CategorieChart" DataSourceID="sqlDataSourceCategorie" runat="server">
<Titles>
  <asp:Title Text="Articoli del Weblog raggruppati per Categoria"></asp:Title>
</Titles>

<series>
  <asp:Series Legend="Legend1" XValueMember="Categoria" 
              YValueMembers="Articoli" Name="CategorieSerie" YValueType="Int32"
              ChartType="Pie" IsValueShownAsLabel="True" ChartArea="AreaCategorie">                    
  </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>

<asp:SqlDataSource runat="server"  id="sqlDataSourceCategorie" 
                   ConnectionString="<%$ ConnectionStrings:ApplicationServices %>"
                   SelectCommand="SELECT [Categoria], [Articoli] FROM [Categorie]" />

In questo caso abbiamo usato la proprietà DataSourceID del client per indicargli staticamente quale sorgente dati usare ovvero l'SqlDataSourceCategorie ed abbiamo impostato le proprietà XValueMember e YValueMember rispettivamente ai campi Categoria ed Articoli.

Altri articoli

Altre guide

Altre newsletter