ASP.Net  »  Articoli  »  ASP.NET 4 

Creare un grafico composito

Abbiamo visto come aggiungere un Chart Control in una pagina, come associare i dati al grafico e come questo viene rappresentato nel browser. Esaminiamo ora la creazione di un DrillDown Report ovvero un grafico "figlio" che dettaglia un elemento selezionato in un grafico "padre".

Nel nostro esempio il grafico padre è il grafico a torta delle Categorie ed il figlio è il grafico a barre che dettaglia le visite degli articoli appartenenti alla categoria selezionata dall'utente nel grafico padre. Creiamo il grafico figlio con le stesse modalità viste per il grafico a torta:

<asp:Chart ID="ArticoliChart" runat="server">
  <Titles>
    <asp:Title Text="Dettaglio della Categoria"></asp:Title>
  </Titles>
  
  <series>
    <asp:Series Name="ArticoliSerie" YValueType="Int32"
                ChartType="Column" IsValueShownAsLabel="True" >
    </asp:Series>
  </series>
  
  <chartareas>
    <asp:ChartArea Name="ChartArea1">
      <AxisY Title="Visite"></AxisY>
      <AxisX Title="Articoli"></AxisX>
    </asp:ChartArea>
  </chartareas>
</asp:Chart>

Ciò che ci consente di agganciare i due grafici è la proprietà Url del Chart Control.

Nel creare il grafico delle categorie, abbiamo impostato la proprietà Url all'indirizzo della pagina Web che contiene il grafico figlio, specificando la categoria con il campo id_categoria della querystring. In questo modo recuperiamo i dati di dettaglio della categoria scelta nel grafico padre.

Come per il grafico a torta, recuperiamo i dati da un file XML che presenta la seguente struttura:

<articoli>
  <articolo>
    <id_articolo>1</id_articolo>
    <id_categoria>1</id_categoria>
    <titolo>ASP.NET Routing: url amichevoli con Web Form 4.0 e Visual Studio 2010</titolo>
    <data>17/02/2010</data>
    <visite>54</visite>
    <url>http://simonemoretti75.wordpress.com/2010/02/17/asp-net-routing-url-amichevoli-con-web-form-4-0-e-visual-studio-2010/</url>
  </articolo>
  
  <!-- ... -->

<articoli> 

e leggiamo i dati in esso contenuti usando le API LINQ to XML:

XElement articoli = XElement.Load(Server.MapPath("~/App_Data/articoli.xml"));
foreach (XElement node in articoli.Elements("articolo"))
{
  string id_categoria = node.Element("id_categoria").Value;
  string titolo = node.Element("titolo").Value;
  string data = node.Element("data").Value;
  string visite = node.Element("visite").Value;
  string url = node.Element("url").Value;
  
  if(id_categoria==Request.QueryString["id_categoria"])
  {
    ArticoliChart.Series["ArticoliSerie"].Points.AddXY(data, visite);
    ArticoliChart.Series["ArticoliSerie"].MapAreaAttributes = "target=\"_blank\"";
    
    //recupero il datapoint appena inserito e vi aggiungo le proprietà url e tooltip
    System.Web.UI.DataVisualization.Charting.DataPoint dp = new System.Web.UI.DataVisualization.Charting.DataPoint();
    dp =ArticoliChart.Series["ArticoliSerie"].Points[ArticoliChart.Series["ArticoliSerie"].Points.Count - 1];
    dp.Url = url;
    dp.ToolTip = titolo;
  }
}

Il grafico che otteniamo è quello proposto in figura 2. Anche in questo caso abbiamo usato le proprietà URL e ToolTip. La prima la abbiamo impostata sull'indirizzo Web degli articoli e la seconda ci dice il titolo dell'articolo.

Conclusioni

Il framework .NET, dalla versione 4, ci mette a disposizione uno strumento molto potente pre la realizzazione di grafici dall'aspetto professionale. Il controllo è gratuito, facile da usare, flessibile, personalizzabile ed ampiamente integrato nel framework.

Altri articoli

Altre guide

Altre newsletter