Charts in Websites

Mir ist klar, das ist der Beginn einer langen Reise. Der Start liegt beim Status Quo von ASP.NET. Das ASP.NET Chart Webforms Control rendert am Web Server (IIS) eine Grafik und schickt die zum Client.

Das Steuerelement unterstützt das neue ASP.NET Webforms Modelbinding. Funktionell ist alles drin was man von einem Report erwarten könnte: Balken, Kuchen, 3D. Darüber hinaus noch unglaublich viel mehr.

Mein Anwendungsfall sind die besten Sprecher der ADC und deren Rating auf einer 7stelligen Skala. Auf ppedv Konferenzen steht immer ein Live Session Voting zur Verfügung.

Der VB.NET und HTML Code erklärt sich selbst.

   1:         <asp:Chart ID="Chart1" runat="server"  SelectMethod="getData" >
   2:              <series>
   3:                  <asp:Series ChartType="Bar" Name="Series1"
   4:                      
   5:                       XValueMember="Name" YValueMembers="Wert">
   6:                  </asp:Series>
   7:              </series>
   8:              <chartareas>
   9:                  <asp:ChartArea Name="ChartArea1" >
  10:                      <AxisY Minimum="0" Maximum="7"></AxisY>
  11:   
  12:                  </asp:ChartArea>
  13:              </chartareas>
  14:          </asp:Chart>
  15:   

Per LINQ werden die Daten zusammengetragen. Das funktioniert analog zum Databinding andere Controls ala ListView.

   1:   Public Function GetData() As IQueryable(Of daten)
   2:          Dim ef As New feedbackentities
   3:          Dim query = From item In ef.voting
   4:                        Group item By item.sessionID Into Group
   5:            Let rating = Group.Average(Function(p) p.vote1)
   6:            Join sprecher In ef.Session On sessionID Equals sprecher.Id
   7:                    Order By rating
   8:             Select New daten With {.name = sprecher.Sprecher,
   9:                                    .wert = rating}
  10:   
  11:          Return query.Take(5).OrderByDescending(Function(x) x.wert)
  12:   
  13:   
  14:      End Function
  15:   
  16:  End Class
  17:  Public Class daten
  18:      Property name As String
  19:      Property wert As Double
  20:   
  21:  End Class

Das Ergebnis im Browser ist ein ca 7 KB großes PNG, das per HTTP Handler am Webserver erzeugt wird.

image

Das sind übrigens die echten Daten, lauter Einser. Die Grafik wurde so klein gehalten, weil wir von einer überwiegend mobilen Nutzung ausgehen.

Kommentare sind geschlossen