Визуализация .NET

Визуализация информации с помощью .NET

Лоуренс Морони

В этой статье рассматриваются следующие вопросы:
  • Визуализация данных
  • Создание данных независимой служб
  • Построение сервера зрительного образа
В данной статье использованы следующие технологии:
C#, ASP.NET, XML

Содержимое

Приступая к работе
Создание данных независимой службу, использующую этот данных
Построение сервера визуализация независимой данных
Следующее время

Сведения визуализации имеет был вокруг в течение длительного времени, но попросите разных людей это означает и скорее всего вы получите множество разных ответов — например, диаграмм, инновационные анимированные изображения или точки зрения вычислений интенсивно представления сложных структур данных. Сведения визуализации инкапсулирует все эти ответы и — это платформа визуализации информации, который может поддерживать каждый из этих сценариев.

С точки зрения научных визуализации данных обычно используется для определения исследования визуальное представление крупномасштабных коллекции данных, которые не обязательно числовым и использование графического представления эти данные позволяют проанализировать и поняты данные. С точки зрения бизнеса визуализации данных это все наследующий значение данных через графический визуализации данных, используя инструменты, позволяющие пользователям взаимодействовать с данными найти информацию, необходимую.

Конечно наличие только возможность рисовать эти обычно недостаточно для платформы визуализации хорошо сведения;Существуют также другие уровни функций, которые должны быть решены, такие как:

  • Interactivity Разрешить взаимодействие может изменяться от анимация перемещения секторов по кругу на круговой диаграмме предоставления пользователям средства для обработки данных, таких как изменение и уменьшение масштаба временного ряда.
  • Создание связанных метаданных несколько диаграмм иметь значение добавлены через связанные контекстные метаданных. Например при просмотре временных рядов диаграммы может потребоваться создания скользящего среднего подправить период для этого скользящее среднее и поэкспериментировать с что если сценариев. Это не подходящего ожидать, что источник данных для создания всех этих представлений данных. Некоторые форма данными является необходимым на уровне презентации.
  • Наложения связанных данных A общим требованием для диаграмм является взгляните на другие действия, могут влияют на данные и имеют визуализации отражать это. Рассмотрите возможность временного ряда стоимость запасов компании и канал новости о, определенных акций. Реальные значения могут быть добавлены к диаграмме, показывая влияние значение новостей. " Хорошо»Новости может облегчить переход вверх, "неверный" "Новости могут сделать переход. Возможность добавить эти данные временных рядов диаграммы превращает простой диаграммы в визуализации данных.

Ключом к построение визуализации платформы, можно подключить все это является гибкость, что в любой момент времени может визуализировать данные любым способом. Это огромный и является обычно специальных усилий, но метод, используемый для упрощения этих усилий для использования с вызываемой данных agnotisticism.

Agnosticism данных возникает при определении архитектуры для визуализации данных, не зависящие от самих данных. Например если рассмотреть пример временных рядов диаграммы, который предоставляет связанные метаданные можно довольно просто программировать приложения для чтения данных ряда времени и связанные метаданные (например канал новостей) и записи данных на экране, используя механизм создания диаграмм. Однако после этого усилия удобен для это представление и представление этого отдельно. Вы написали приложение тесно привязан к данным самого себя.

Принцип agnosticism данных позволяет выбрать источник данных и определить данные, необходимо сообщить ядро визуализации и рисования, однако его требуется. Мы будем взглянем на способы построения простого версии этого обработчика в этой статье.

Приступая к работе

Как и все остальное, полезно начать с данными. В этом разделе я дам краткий обзор простого XML через HTTP служба, предоставляющая временных рядов данных, предоставленных Yahoo финансовых служб.

Служба временных рядов Yahoo возвращает CSV файл, содержащий основные данные временных рядов с следующие поля: Дата, открытие цена, цена закрытия, максимальный, минимальный, том и скорректирована закрыть. API для вызова очень прост:

ichart.Finance.Yahoo.com/TABLE.CSV

Использовать следующие параметры:

На рис. 1 размер и время доступа с без локального хранилища
Параметр Значение
s Биржевые Ticker (например, MSFT)
a Запустить месяц (на основе 0;0 = Января, 11 декабря =)
b Начните день
c Начала года
d Месяц окончания (на основе 0;0 = Января, 11 декабря =)
e Конец дня
f Конец года
g Всегда используйте букву d
игнорировать Всегда используйте значение ".csv"

Для получения временных рядов данных для Microsoft (MSFT) от 1 января 2008 г., на 1 января 2009 г., воспользуйтесь следующим АДРЕСОМ:

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

На рис. 1 показана функция C# параметры строки занимает для ценных бумаг, даты начала и окончания дата и строит данного URI.

Рисунок 1 A C# функции, сборки URI для сбора данных

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;
}

Теперь, когда URI для данных, необходимо прочитать его и использовать его. В этом случае я буду преобразовать данные CSV XML. Функции, чтобы сделать это, отображается в рис. 2.

На рисунке 2 преобразование данных CSV в XML

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;
        }

Я поместить эти функции в класс с именем HelperFunctions и добавлен класс веб-проект ASP.NET. Для этого после добавления формы Web ASP.NET (ASPX) называется GetPriceHistory и редактировать страницу ASPX, чтобы удалить разметку HTML, чтобы он выглядел следующим образом:

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

Удобная преимуществом такого подхода является, теперь можно написать код, который записывает буфера ответов и задать тип отклика записывать XML через HTTP.

Вспомогательные функции занять строк для сводок и даты начала и окончания, можно использовать в качестве параметров ASPX. Можно затем передавать их вспомогательные функции для создания XML, которые затем записать за пределы буфера ответов. Кроме того тип MIME должен быть равным "text/xml"так что любой чтения видит ее как XML и не текст.

На рис. 3 показан код для этого. Помните, что HelperFunctions имя класса, содержащий функции, построить URI Yahoo, а его чтение и преобразования данных CSV в XML.

Код на рис. 3 для поддержки функций

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);

}

Теперь имеется простую службу XML через HTTP, которая возвращает временных рядов данных. На рис. 4 показан пример его в действии.

fig01.gif

Рис. 4 Простая служба XML-over-HTTP

Создание данных независимой службу, использующую этот данных

Генерируемые сервером визуализации клиентом отображает изображение и вся обработка выполняется на сервере. Некоторые модули очень смарт-визуализации предоставить код, отправляемой на сервер для предоставления интерактивных возможностей с помощью гиперкарты в изображение, которое отображается, но это очень сложно создавать и функциональные возможности могут быть ограничены. Этот подход полезен, если вы хотите сгенерировать статической диаграммы, не требующие среды конечного пользователя, поскольку обозреватель может отображать распространенные форматы изображения. На рис. 5 показан типичный архитектуры для этого подхода.

fig05.gif

На рис. 5 архитектура обычной визуализация отображенного сервера

При построении эта архитектура обычно написать код сервера, который понимает данные. В предыдущем случае, например, если вы пишете временных рядов диаграммы, отображение значение закрыть, следует написать код, считывает XML принимает закрыть данных и загружает его в рядов на диаграмме, так что его отображения.

При использовании Microsoft ASP.NET, диаграмм ядра (который является свободно загрузки;см ссылку позже в этой статье), бы обычно определяются на диаграмме следующим образом:

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

Этот подход тем не менее, обычно ограничивает вы для диаграмм вместо визуализации, так как возможность предоставления интерактивность ограничен. Возможности для создания связанных метаданных также ограничены в этом сценарии потому что все запросы требуют обратной передачи на сервер для создания новой диаграммы и бы быть ограничена функциональные возможности, предоставляется на сервере. Возможность наложение связанных метаданных является также ограничены же целях.

Тем не менее важные возможности agnosticism данные могут быть включены в этом сценарии. Относительно легко настроить метаданные об источнике данных и где в источнике данных можно найти рядов и категорий данных. Обработчик может обрабатывать эти метаданные и превратить в рядов и категорий, которые сервер может визуализировать, упрощая добавить новые зрительные образы без большого количества лишних программирования.

Построение сервера визуализация независимой данных

Существует множество технологий создания диаграмм серверной стороны и изменить программирования API через их, но принципы, МЫ обсудим подобны по всем их. В этом разделе я рассмотрю свободного построения графиков ядро ASP.NET из Microsoft. Вам также потребуется надстроек Visual Studio для сервера диаграмм.

Давайте посмотрим, что требуется построить круговую диаграмму с этот механизм создания диаграмм. Код очень прост. Во-первых добавьте экземпляр элемента управления диаграммы ASPX Web form. Вы увидите нечто подобное в представлении кода:

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

Затем напишите код для отображения некоторые данные в элемент управления диаграммы следующим образом:

        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;

В этом случае я жестко закодированные значения, но будет обычно читать их из базы данных или службы и затем загрузить их в массивах перед их использованием, формирующие диаграммы. Конечно повторно использовать этот код становится сложным и любые изменения в источник данных может прервать, давайте взглянем на нечто записи, не привязанного к типу данных.

Удобная преимуществом представления данных в XML является, можно использовать язык XPath для определения в документе XML данные, должна быть построения из которого поступит. Для данных, показанный на рис. 1 оператор XPath, который определяет расположение закрыть цены выглядит следующим образом:

-NewDataSet и TimeSeries и закрыть

Теперь Если вы считаете, вместо написания кода, содержащий определения на диаграмме, можно externalize как конфигурацию. Представьте, что файл конфигурации, как показано на рис. 6.

Файл конфигурации на рисунке 6 A, определяет диаграммы

<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>

Вы теперь определение диаграммы называется PriceHistory1 принимает данные от заданного URL-адреса, добавления параметров с заданным именам и заданного значения. Значения в этом случае являются жестко, но нет ничего для остановки от написания кода, использующего параметры, созданные конечного пользователя.

Кроме того в разделе определения серии определяет число рядов оператором XPath, указывающее, где данные извлекаются из и способы рисования его. Сейчас используется простое определение типа диаграммы, но может включать дополнительные параметры здесь для цвета или другие элементы или определение нескольких рядов (это XML в конце концов, позволяя легко добавить дополнительные узлы), а также категории, метки или другие метаданные, такие. Для этого примера я хранятся он простой.

Теперь код диаграмм обработчика будет выглядеть значительно другой. Вместо написания кода, считывает данные, анализ данных и загружает их в диаграмму, можно написать код, который считывает конфигурацию, создает вызов службы URI из данных конфигурации, вызывает службу, получает возвращаемого XML и использует переменные XPath в конфигурации для получения ряды данных.

В таких условиях вашей архитектуры может быть гораздо более надежной. Рассмотрим, например, при изменении значения источника данных его XML-тега из закрыть, чтобы цена закрытия. Разве не придется изменить или повторно компилировать код;Вы бы просто редактировать XPath переменной в определении диаграммы.

Это не объем растянуть представить себе как бы изменить для подключения к различных типов источников данных, таких как подключения к базе данных или веб-служб. На рис. 7 показан код, представлены данные временных рядов на диаграмме ASP.NET.

На рисунке 7 отображение DTime рядов данных на диаграмму ASP.NET

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);
}

Результаты отображаются в рис. 8. Конфигурации не было сделано на диаграмме и с помощью значений конфигурации по умолчанию, но данных выполняется чтение и выполняется на диаграмме.

fig08.gif

Рис. 8 результаты создания временных рядов данных

Небольшой оптимизировать файл конфигурации следует предоставить мне тома и другой набор дат (1-1-1980 для 1-1-1990) обеспечивает представление в рис. 9 — без изменения строки кода в службе построения диаграмм, поскольку он является независимой данных.

fig09.gif

Рисунок 9 Новых результатов после за настройкой конфигурации файла

Документирование способы построения серверу независимой данных займет целую книгу в свой собственный справа и здесь я просто skimmed поверхности. Принципы, вы уже видели будет применяться к большинство API, при работе и большинство код должен быть для управление конфигурацией внешних диаграммы для получения данных, делая то, что вы уже видели здесь очень переносных.

В этой статье я рассмотрели один из основных принципов построения визуализации данных, предоставляя способ отображения данных в безотносительно данных. В будущей статье я рассмотрю с широкими возможностями технологии на стороне клиента обеспечивают возможность взаимодействия с данными и smartly объединения разрозненных источников. Мощь платформы .NET теперь доступна в обозревателе, с помощью Microsoft Silverlight, поэтому мы будет использовать для демонстрации этих принципов.

Лоуренс Морони — пропагандист старший технологии с Microsoft, специализирующийся в Silverlight. Он является автором множества книг по компьютерной тематике разделы, включая Silverlight, AJAX, взаимодействия и безопасности. Блог Лоуренс можно найти на blogs.msdn.com/webnext.