Dieser Artikel wurde maschinell übersetzt.

.NET Visualisierung

Visualisierung von Daten mit .NET

Laurence Moroney

Inhalt

Einführung
Erstellen eines Dienstes Daten agnostischen, diese Daten verwendet
Erstellen einen Data-agnostischen Visualisierung Server
Nächste Uhrzeit

Informationen Visualisierung hat wurde um für eine lange Zeit, aber bitten unterschiedliche Personen Bedeutung, und erhalten Sie wahrscheinlich viele unterschiedliche Antworten – z. B. Diagramme, innovative animierte Grafiken oder rechenintensive Darstellungen komplexer Datenstrukturen. Informationen Visualisierung kapselt alle diese Antworten, und eine Informationen Visualisierung Plattform ist, die jedes dieser Szenarien unterstützen kann.

Aus der Perspektive eines wissenschaftlichen ist Informationen Visualisierung in der Regel verwendet, um die Studie der visuellen Darstellung von umfangreiche Auflistungen von Informationen, die nicht unbedingt numerische Natur und die Verwendung der grafischen Darstellungen dieser Daten, damit die Daten analysiert und verstanden werden zu definieren. Aus geschäftlicher Sicht geht Informationen Visualisierung Daten über die grafische Darstellung der die Daten mithilfe von Tools, mit denen End Benutzer interagieren mit den Daten um die Informationen finden, die Sie benötigen Wert ableiten.

Natürlich müssen nur die Möglichkeit, zeichnen Sie diese Bilder in der Regel nicht genug für eine gute Informationen Visualisierung Plattform; es gibt auch andere Ebenen von Funktionen, die z. B. behoben werden müssen:

• Interaktivität Interaktivität kann von animiert die Bewegung der Segmente in der ein Kreisdiagramm zur Bereitstellung von Benutzern mit Tools für die Datenbearbeitung z. B. zum Vergrößern und Verkleinern der Time Series variieren.
• Verwandte Metadaten generieren Viele Diagramme haben Wert über verwandte kontextbezogene Metadaten hinzugefügt. Wenn Sie eine Time Series-Diagramm anzeigen, sollten Sie generieren einen gleitenden Durchschnitt und optimieren den Zeitraum für diese Gleitender Durchschnitt oder experimentieren Sie mit was-wenn-Szenarien. Es ist nicht möglich, eine Datenquelle für all diese Datenansichten für Sie generieren erwarten. Einige Form der Datenbearbeitung ist auf der Präsentationsebene erforderlich.
• überlagern Sie verwandte Daten Eine häufige Anforderung für Diagramme besteht darin, andere Stimuli betrachten, die möglicherweise Auswirkungen auf die Daten und die Visualisierung dies widerspiegeln. Erwägen Sie eine Time Series, Lagerwert des Unternehmens und einen Feed von Newsbeiträgen über die bestimmten Aktie anzeigt. Reale Wert kann auf das Diagramm durch anzeigen, wie der Wert, die News beeinflusst hinzugefügt werden. " "Gute Nachrichten möglicherweise machen, gehen" fehlerhafte "" News möglicherweise erleichtern ausfallen. Möglichkeit, diese Daten dem Time Series-Diagramm hinzufügen wird es aus einem einfachen Diagramm Informationen Visualisierung.

Der Schlüssel zum Erstellen einer Visualisierung-Plattform, die alle diese aktivieren können ist Flexibilität, so dass Sie alle Daten in keiner Weise jederzeit rendern können. Dies ist eine riesige und in der Regel spezielle Aufwand, jedoch eine Technik, mit denen Sie diese Bemühungen erleichtern können mit mit Daten Agnotisticism verwenden.

Agnosticism Daten entsteht, wenn Sie eine Architektur definieren für Visualisierung von Daten, die die Daten selbst abhängig ist. Wenn Sie das Beispiel für eine Time Series-Diagramm in Betracht, die zugehörigen Metadaten bereitstellt ziehen, ist es z. B. recht einfach zu programmieren eine Anwendung der Time Series-Daten und die zugehörigen Metadaten (z. B. ein Newsfeed) lesen und Schreiben der Daten auf auf dem Bildschirm zum Erstellen von Diagrammen Datenbankmodul verwenden. Nachdem Sie dies getan haben, ist der Aufwand jedoch gut für diese Darstellung und diese Darstellung allein. Die Anwendung, die Sie geschrieben haben, ist eng an den Daten selbst gebunden.

Das Prinzip der Daten Agnosticism ermöglicht das Auswählen einer Datenquelle, definieren die gewünschten Daten und Teilen Sie die Visualisierung-Engine wechseln, und zeichnen Sie es jedoch soll es. Wir betrachten eine zum Erstellen von einer einfachen Version dieses Modul in diesem Artikel.

Einführung

Wie bei allem, ist es ratsam, mit der Daten beginnen. In diesem Abschnitt erhalten ich eine kurze Übersicht über einen einfachen XML-über-HTTP-Dienst, die bereitgestellten Dienste Yahoo Time Series-Daten bereitstellt.

Der Yahoo Time Series-Dienst meldet eine CSV-Datei mit grundlegende Time Series-Daten mit den folgenden Feldern: Datum, Preis öffnen, schließen Preis, hoch, Niedrig, Datenträger und schließen angepasst. Die API aufrufen, es ist sehr einfach:

ichart.Finance.Yahoo.com/Table.CSV

Sie verwenden die folgenden Parameter:

Um die Time Series-Daten für Microsoft (MSFT) von January 1, 2008 zu 1 Januar 2009, gelangen verwenden Sie den folgenden URL:

http://ichart.Finance.Yahoo.com/Table.CSV?s=MSFT&a=0&b=1&c=2008&d=0&e=1&f=2009&g=d&Ignore=.CSV

Abbildung 1 Zeigt einer C#-Funktion, nimmt Zeichenfolgenparameter für das Tickersymbol, Anfangstermin und End Datum und dieser URI erstellt.

Abbildung ein C#-Funktion, die einen URI zum Aufzeichnen von Daten erstellt

public string BuildYahooURI(string strTicker,
  string strStartDate, string strEndDate)
{
    string strReturn = "";
    DateTime dStart = Convert.ToDateTime(strStartDate);
    DateTime dEnd = Convert.ToDateTime(strEndDate);
    string sStartDay = dStart.Day.ToString();
    string sStartMonth = (dStart.Month -1).ToString();
    string sStartYear = dStart.Year.ToString();
    string sEndDay = dEnd.Day.ToString();
    string sEndMonth = (dEnd.Month - 1).ToString();
    string sEndYear = dEnd.Year.ToString();
    StringBuilder sYahooURI =
      new StringBuilder("http://ichart.finance.yahoo.com/table.csv?s=");
    sYahooURI.Append(strTicker);
    sYahooURI.Append("&a=");
    sYahooURI.Append(sStartMonth);
    sYahooURI.Append("&b=");
    sYahooURI.Append(sStartDay);
    sYahooURI.Append("&c=");
    sYahooURI.Append(sStartYear);
    sYahooURI.Append("&d=");
    sYahooURI.Append(sEndMonth);
    sYahooURI.Append("&e=");
    sYahooURI.Append(sEndDay);
    sYahooURI.Append("&f=");
    sYahooURI.Append(sEndYear);
    sYahooURI.Append("&g=d");
    sYahooURI.Append("&ignore=.csv");
    strReturn = sYahooURI.ToString();
    return strReturn;
}

Nun, den URI für die Daten haben, benötigen Sie zum Lesen und zu seiner Verwendung. In diesem Fall werde ich die CSV-Daten in XML konvertieren. Eine Funktion, die dies tun kann, ist in Abbildung 2 dargestellt.

Abbildung 2 CSV-Daten in XML konvertieren

public XmlDocument getXML(string strTicker, 
   string strStartDate, string strEndDate)
        {
            XmlDocument xReturn = new XmlDocument();
            DataSet result = new DataSet();
            string sYahooURI = 
               BuildYahooURI(strTicker, strStartDate, strEndDate);
            WebClient wc = new WebClient();
            Stream yData = wc.OpenRead(sYahooURI);
            result = GenerateDataSet(yData);
            StringWriter stringWriter = new StringWriter();
            XmlTextWriter xmlTextwriter = new XmlTextWriter(stringWriter);
            result.WriteXml(xmlTextwriter, XmlWriteMode.IgnoreSchema);
            XmlNode xRoot = xReturn.CreateElement("root");
            xReturn.AppendChild(xRoot);
            xReturn.LoadXml(stringWriter.ToString());

            return xReturn;
        }

Ich legen Sie diese Funktionen in eine Klasse namens HelperFunctions und einem ASP.NET-Webprojekt die Klasse hinzugefügt. Dazu hinzugefügt ich ein ASP.NET Web Forms (ASPX) GetPriceHistory aufgerufen und bearbeitet die ASPX-Seite HTML-Markup entfernen, sodass er wie folgt aussieht:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetPriceHistory.aspx.cs" 
   Inherits="PriceHistoryService.GetPriceHistory" %>

Nettes Vorteil dieses Ansatzes befindet, können jetzt die schreiben Sie Code, der direkt in den Antwort-Puffer schreibt und den Antworttyp festlegen, sodass Sie XML über HTTP schreiben können.

Da die Hilfsfunktionen Zeichenfolgen für das Tickersymbol und Anfangs- und Endtermine nutzen, können Sie Sie als Parameter an die ASPX-verwenden. Sie können dann diese an übergeben der Hilfsfunktionen zum Generieren von XML, die Sie dann in den Antwort-Puffer schreiben. Darüber hinaus muss der MIME-Typ "Text/xml" festgelegt werden, damit alle Leser als XML und nicht Text sieht.

Abbildung 3 zeigt den Code zu diesem Zweck. Beachten Sie, dass HelperFunctions den Namen einer Klasse mit die Funktionen, Yahoo-URI erstellen und lesen und konvertieren Sie die CSV-Daten in XML.

Abbildung 3-Code für die Hilfsfunktionen

HelperFunctions hlp = new HelperFunctions();
protected void Page_Load(object sender, EventArgs e)
{
  string strTicker, strStartDate, strEndDate;

  if(Request.Params["ticker"]!=null)
    strTicker = Request.Params["ticker"].ToString();
  else
    strTicker = "MSFT";

  if(Request.Params["startdate"]!=null)
    strStartDate = Request.Params["startdate"].ToString();
  else
    strStartDate = "1-1-2008";

  if(Request.Params["enddate"]!=null)
    strEndDate = Request.Params["enddate"].ToString();
  else
    strEndDate = "1-1-2009";

  XmlDocument xReturn = hlp.getXML(strTicker, strStartDate, strEndDate);

  Response.ContentType = "text/xml";
  Response.Write(xReturn.OuterXml);

}

Sie haben nun einen einfachen XML-über-HTTP-Dienst, der Time Series-Daten zurückgibt. Abbildung 4 zeigt ein Beispiel, in Aktion.

Abbildung 4 eine einfache XML-über-HTTP-Dienst

Erstellen eines Dienstes Daten agnostischen, diese Daten verwendet

Serverseitig generierte Visualisierung ein Client rendert ein Bild und alle Verarbeitung erfolgt auf dem Server. Einige sehr intelligente Visualisierung Module bieten Code, der an den Server über Imagemaps in dem Bild, das wieder wiedergegeben wird bieten Interaktivität buchen kann, aber dies ist äußerst komplex zum Generieren, und die Funktionalität kann begrenzt werden. Dieser Ansatz ist hilfreich, wenn Sie statische Diagramme generieren, die keine Endbenutzer Laufzeit erfordern, da der Browser die allgemeinen Bildformate rendern kann. Abbildung 5 zeigt eine typische Architektur für diesen Ansatz.

Abbildung 5 Standard Server gerendert Visualisierung-Architektur

Wenn Sie diese Architektur erstellen, Schreiben Sie in der Regel Servercode, der die Daten zu verstehen. Im vorherigen Fall z. B. würde Wenn Sie ein Diagramm Time Series schreiben, das Zeichnen von den schließen-Wert, Sie Code schreiben, die in der XML-Datei liest und übernimmt die schließen Daten in einer Datenreihe im Diagramm lädt, sodass es gezeichnet werden kann.

Wenn Sie die Microsoft ASP.NET verwenden würden Diagrammerstellung-Modul (das ist kostenlos herunterladbares; finden Sie unter den Link weiter unten in diesem Artikel), Sie in der Regel ein Diagramm wie folgt definieren:

        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

Dieser Ansatz begrenzt jedoch normalerweise Sie auf Diagramme statt Visualisierung, da die Möglichkeit, Interaktivität bereitzustellen beschränkt ist. Die Möglichkeit, verwandte Metadaten generieren ist in diesem Szenario auch begrenzt, da alle Anforderungen ein Sendevorgangs an den Server ein neues Diagramm zu generieren und wäre beschränkt auf die Funktionalität, die auf dem Server bereitgestellt wird. Die Möglichkeit, verwandte Metadaten überlagern ist auch für den gleichen Gründen beschränkt.

Wichtigen Funktionen von Agnosticism Daten können jedoch durch dieses Szenario aktiviert werden. Es ist relativ einfach, konfigurieren Metadaten zu Ihrer Datenquelle und dem in der Datenquelle Sie Ihre Datenreihen und Datenkategorien finden können. Ein Modul verarbeiten Sie diese Metadaten und schalten Sie ihn in den Reihen und Kategorien, die der Server wiedergeben kann, erleichtert das Hinzufügen von neuer Visualisierungen ohne großen kann zusätzliche Programmierung.

Erstellen einen Data-agnostischen Visualisierung Server

Stehen eine Reihe von serverseitigen Diagrammerstellung Technologien zur Verfügung, und die Programmierung APIs über diese ändern, aber die Prinzipien, die ich hier besprechen ähneln aller von Ihnen. In diesem Abschnitt werde ich die kostenlosen betrachten Diagrammerstellung ASP.NET-Modul von Microsoft. Sie müssen auch die Visual Studio add-ins für den Server Diagrammdarstellung.

Untersuchen wir, was es dauert, um ein Kreisdiagramm mit diesem Modul zum Erstellen von Diagrammen zu erstellen. Der Code ist sehr einfach. Fügen Sie zunächst eine Instanz des Chart-Steuerelement zu einer ASPX-Webformular. Etwas wird in der Codeansicht angezeigt werden:

        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

Dann schreiben Sie Code wie den folgenden um einige Daten im Diagramm-Steuerelement rendern:

        double[] yValues = { 20, 10, 24, 23 };
        string[] xValues = { "England", "Scotland", "Ireland", "Wales" };
        Series mySeries = Chart1.Series[0];
        mySeries.Points.DataBindXY(xValues, yValues);
        mySeries.ChartType = SeriesChartType.Pie;

In diesem Fall ich habe hart codiert die Werte, aber Sie würden normalerweise aus einer Datenbank oder von einem Dienst gelesen und anschließend in den Arrays laden, bevor Sie das Diagramm zu generieren. Natürlich die Wiederverwendung dieses Codes wird schwierig, und alle Änderungen in der Datenquelle heben, wir etwas schreiben betrachten, die nicht den Datentyp gebunden werden müssen.

Die gute Darstellung der Daten in XML ist, dass ich zum Definieren von im XML-Dokument, in denen die Daten, die gezeichnet werden soll aus stammen werden die XPath-Sprache verwenden können. Für die Daten in Abbildung 1 dargestellt sieht die XPath-Anweisung, die den Speicherort der schließen Preise definiert:

/ NewDataSet/TimeSeries/schließen

Nun, wenn Sie Informationen darüber, anstatt schreiben Code, die Definitionen für Ihr Diagramm enthält, können Sie es als Konfiguration auf externalize. Genommen Sie an, eine Konfigurationsdatei wie in Abbildung 6 dargestellt.

Abbildung 6 A-Konfigurationsdatei, die einem Diagramm definiert

<root>
  <Chart Name="PriceHistory1">
    <Uri>
      <Path>http://localhost/PriceHistoryService/GetPriceHistory.aspx</Path>
      <Param Name="ticker">MSFT</Param>
      <Param Name="startdate">1-1-2008</Param>
      <Param name="enddate">1-1-2009</Param>
    </Uri>
    <Data>
      <SeriesDefinitions>
        <Series id="ClosePrice">
          <Data>/NewDataSet/TimeSeries/Close</Data>
          <Type>Line</Type>
        </Series>
      </SeriesDefinitions>
    </Data>
  </Chart>
</root>

Sie können jetzt definieren ein Diagramm PriceHistory1 aufgerufen, die die Daten aus dem angegebenen URL enthält Anfügen von Parametern mit den angegebenen Namen und angegebenen Werten. Die Werte sind in diesem Fall hartcodierte, aber es gibt nichts zu verhindern, dass Sie Code, die von einem Endbenutzer generierten Parameter verwendet.

Darüber hinaus definiert Abschnitt Reihe Definitionen eine Anzahl von Reihen mit einer XPath-Anweisung, wo die Daten stammen und wie es gezeichnet angibt. Rechts jetzt eine einfache Definition einen Diagrammtyp verwendet, Sie konnte jedoch zusätzliche-Parameter hier für Farbe oder anderen Elementen oder für mehrere Datenreihen (es ist XML, so dass Sie auf einfache Weise zusätzliche Knoten hinzufügen) ebenso wie Kategorien, Etiketten oder andere solche Metadaten definieren. Für dieses Beispiel habe ich es einfache gehalten.

Jetzt wird der Code Diagrammerstellung Modul enorm verschiedene aussehen. Anstatt Code, der die Daten liest, analysiert die Daten und lädt es direkt in das Diagramm zu schreiben, können Sie Code schreiben, die liest der Konfiguration, den Service-Aufruf URI aus der Konfigurationsdaten erstellt, ruft der Dienst, ruft die zurückgegebene XML und verwendet die XPath-Variablen in der Konfiguration um die Datenreihe abzurufen soll.

Unter diesen Bedingungen kann Ihre Architektur viel robuster. Betrachten Sie z. B., wenn der Quellwert Daten das XML--Tag schließen, um Closing Preis geändert. Sie würde nicht bearbeiten oder Kompilieren des Codes, würden Sie die XPath-Variable in der Diagramm-Definition einfach bearbeiten.

Es ist nicht viel von einer Strecken kümmern, wie Sie hier, um verschiedene Arten von Datenquellen wie z. B. Datenbankverbindungen oder Webdienste Verbindung bearbeiten würden. Abbildung 7 zeigt den Code, der Time Series-Daten auf ein Diagramm ASP.NET zeichnet.

Abbildung 7 Zeichnung der DTime-Serie-Daten auf ein ASP.NET ein

protected void Button1_Click(object sender, EventArgs e)
{
  // Variable declarations
  StringBuilder dataURI = new StringBuilder();
  WebClient webClient = new WebClient();
  XmlDocument xmlChartConfig = new XmlDocument();
  XmlDocument xmlData = new XmlDocument();
  // Get the chart config
  Uri uri = new Uri(Server.MapPath("ChartConfig.xml"),
    UriKind.RelativeOrAbsolute);
  Stream configData = webClient.OpenRead(uri);
  XmlTextReader xmlText = new XmlTextReader(configData);
  xmlChartConfig.Load(xmlText);

  // I'm hard coding to read in the chart called 'Price History 1'. In a
  // 'real' environment my config would contain multiple charts, and I'd
  // pass the desired chart (along with any parameters) in the request
  // string. But for simplicity I've kept this hard coded.
  XmlNodeList lst =
    xmlChartConfig.SelectNodes("/root/Chart[@Name='PriceHistory1']/Uri/*");

  // The first child contains the root URI
  dataURI.Append(lst.Item(0).InnerText.ToString());

  // The rest of the children of this node contain the parameters
  // the first parameter is prefixed with ?, the rest with &
  // i.e. http://url?firstparam=firstval&secondparam=secondval etc
  for (int lp = 1; lp < lst.Count; lp++)
  {
    if (lp == 1)
      dataURI.Append("?");
    else
      dataURI.Append("&");

    // In this case the desired parameters are hard coded into the XML.
    // in a 'real' server you'd likely accept them as params to this page
    dataURI.Append(lst.Item(lp).Attributes.Item(0).Value.ToString());
    dataURI.Append("=");
    dataURI.Append(lst.Item(lp).InnerText);
  }

  // Now that we have the URI, we can call it and get the XML
  uri = new Uri(dataURI.ToString());
  Stream phData = webClient.OpenRead(uri);
  xmlText = new XmlTextReader(phData);
  xmlData.Load(xmlText);

  // This simple example is hard coded for a particular chart
  // ('PriceHistory1') and assumes only 1 series
  lst = xmlChartConfig.SelectNodes(
    "/root/Chart[@Name='PriceHistory1']/Data/SeriesDefinitions/Series/Data");

  // I'm taking the first series, because I only have 1
  // A 'real' server would iterate through all the matching nodes on the
  // XPath
  string xPath = lst.Item(0).InnerText;

  // I've read the XPath that determines the data location, so I can
  // create a nodelist from that
  XmlNodeList data = xmlData.SelectNodes(xPath);
  Series series = new Series();

  // I'm hard coding for 'Line' here -- the 'real' server should
  // read the chart type from the config
  series.ChartType = SeriesChartType.Line;
  double nCurrent = 0.0;

  // I can now iterate through all the values of the node list, and
  foreach (XmlNode nd in data)
  {
    // .. create a DataPoint from them, which is added to the Series
    DataPoint d = new DataPoint(nCurrent, Convert.ToDouble(nd.
      InnerText));
    series.Points.Add(d);
    nCurrent++;
  }

  // Finally I add the series to my chart
  Chart1.Series.Add(series);
}

Die Ergebnisse sind in Abbildung 8 dargestellt. Im Diagramm wurde keine Konfiguration durchgeführt wurde und es ist die Standard-Konfigurationswerte verwenden, aber die Daten wird gelesen und dargestellt wird.

Abbildung 8 der Ergebnisse Generated by der Time Series-Daten

Eine kleine Tweak der Konfigurationsdatei, damit ich Datenträger und einen anderen Satz von Daten (1-1-1980, 1-1-1990) stellt die Ansicht in Abbildung 9 – ohne eine Codezeile in der Diagramm-Dienst ändern, da er Daten agnostischen ist.

Abbildung 9 Neue Ergebnisse nach optimiert die Confi Guration Datei

Dokumentieren zum Erstellen von eines Daten-agnostischen Servers würde ein ganzes Buch in seinen eigenen rechts; ich habe hier nur die Oberfläche des skimmed. Die Prinzipien, die Sie gesehen haben gelten für die meisten APIs, die Sie arbeiten und den Großteil der von Ihnen sein sollte geschriebenen, für die Verwaltung der Konfiguration externe Diagramm zu die Daten vornehmen, was Sie hier gesehen haben sehr tragbaren Code.

In diesem Artikel ich haben eine der wichtigsten Prinzipien Daten Visualisierungen erstellen – eine Möglichkeit, Ihre Daten eine Daten-agnostischen Weise zu rendern. In einem zukünftigen Artikel wird ich untersuchen, über eine umfangreiche Technologien auf dem Client die Möglichkeit, um mit Ihren Daten zu interagieren und smartly verschiedenartigen Datenquellen zu aggregieren. Die Leistungsfähigkeit von .NET Plattform ist jetzt verfügbar in den Browser mit Microsoft Silverlight, so dass wir es verwendet, um diese Prinzipien zu veranschaulichen.

Laurence Moroney ist ein leitender Technologie Evangelist mit Microsoft Silverlight spezialisiert. Er ist Autor zahlreicher Bücher über Themen, einschließlich Silverlight, AJAX, Interoperabilität und Sicherheit der Datenverarbeitung. Sie können Laurence's Blog unter Suchen. Blogs.msdn.com/webnext.